Правило приоритета обслуживающего работника в случае двух обслуживающего работника

Я планирую иметь двух сервис-воркеров. Но область действия для одного является подмножеством другого.

Пример: один - '/'.

Другое - '/ images'

Сейчас я регистрирую двух сервисных работников из разных мест. Я сомневаюсь, что когда присутствуют оба обслуживающего работника, а браузер отправляет запрос в / images, тогда какой сервисный рабочий перехватит его, поскольку это входит в сферу действия обоих сервисных рабочих.

Отдает ли браузер предпочтение более специализированной области?

Изменить: это мой код для регистрации двух Service Worker.Теперь я хочу зарегистрировать обоих Service Workers при первом вызове '/'.

if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register(serviceWorkerEndpoint1, { scope: serviceWorkerScope1 }).then(function (registration) {
            Log.Log('ServiceWorker registration successful with scope: ' + registration.scope, "ServiceWorker1Installed", "ServiceWorkerInstalled");
        }).catch(function (err) {
            Log.Log('ServiceWorker registration failed: ' + err, "ServiceWorkerInstalled", "ServiceWorkerInstalled");
            });   

        navigator.serviceWorker.register(serviceWorkerEndpoint2, { scope: serviceWorkerScope2 }).then(function (registration) {
            Log.Log('ServiceWorker registration successful with scope: ' + registration.scope, "ServiceWorker2Installed", "ServiceWorkerInstalled");
        }).catch(function (err) {
            Log.Log('ServiceWorker registration failed: ' + err, "ServiceWorker2Installed", "ServiceWorkerInstalled");
        });           
    }

person biswpo    schedule 26.02.2016    source источник


Ответы (1)


Оба работают, но для каждой области активен только один, поэтому браузер отдает предпочтение наиболее конкретному. Я оставляю вам настройку для проверки (хотя я пробовал сам):

Структура папки:

.
├── images
│   └── sw-images.js
├── index.html
└── sw.js

В ./images/sw-images.js:

self.onfetch = event => {
  if (event.request.url.indexOf('content') != -1)
    event.respondWith(new Response('Hi from images'));
};

In ./sw.js:

self.onfetch = event => {
  if (event.request.url.indexOf('content') != -1)
    event.respondWith(new Response('Hi from root'));
};

В index.html:

<script>
  Promise.all([
    navigator.serviceWorker.register('sw.js', { scope: '/'}),
    navigator.serviceWorker.register('images/sw-images.js', { scope: 'images/' })
  ])
  .then(() => console.log('All right!'))
  .catch(error => console.error(error)); 
</script>
<a href="content.html">./content.html</a>
<a href="images/content.html">./images/content.html</a>
person Salva    schedule 26.02.2016
comment
Я знаю, что это странно, но для меня конкретный обслуживает общий URL-адрес. Это похоже на то, что сервис-работник, зарегистрированный для / image, перехватывает /. В чем может быть причина? - person biswpo; 29.02.2016
comment
Вы использовали эту установку? Могу я взглянуть на код? - person Salva; 29.02.2016
comment
Я добавил свой код в часть своего вопроса, пожалуйста, посмотрите. Что происходит сейчас: открывается новая вкладка разработчиков для первого зарегистрированного ПО (в хроме) и приостанавливается на первой строке. Вторая - работает нормально.Но первый не работает.Приходится вручную нажимать на него, чтобы активировать. - person biswpo; 01.03.2016
comment
Возможно, кто-то из сервисных работников не регистрируется. Вы можете увидеть, какой SW зарегистрирован в chrome: // serviceworker-internals / в Chrome. Проверь там, что прописаны оба sw. Если нет, покажите нам конечные точки и области действия сервис-воркеров. - person Salva; 01.03.2016
comment
Я не понимаю, что вы имеете в виду, когда говорите щелкнуть вручную, извините. Вы можете объяснить? - person Salva; 02.03.2016
comment
Мне пришлось провести несколько циклов тестирования, пока я не понял, что на самом деле означает только один активен для каждой области. Я попытался реализовать 2 сервис-воркера для обработки запросов одностраничного приложения (A) для кэширования статических файлов и (B) для обработки запросов API данных (с api / в их URL-адресе). Однако в приложении это не сработает. Приложение находится в корне, и все запросы XHR и выборки будут обрабатываться работником службы кеширования. Только если я сделаю запрос через DOM (например, iframe или img) или из файла в папке / api, рабочий сервис API действительно сработает. Интересно, кому пришла в голову эта идея ... - person Pat Mächler; 31.05.2017
comment
Подробнее о моем комментарии см. В моем репо по адресу github.com/valioDOTch/minimal-pwa - person Pat Mächler; 31.05.2017
comment
Вот дальнейшие обсуждения этого в репозитории W3C: github.com/w3c/ServiceWorker/issues/ 921 и github.com/w3c/ServiceWorker/issues/1085. Так что есть причина, по которой он был разработан таким образом, но в некоторых случаях с этим сложно работать. Например. в настоящее время я реализую ExtJS SPA и намереваюсь использовать новую прогрессивную конфигурацию SenchaCmd (которая создает программный код с использованием библиотеки sw-preache), охватывая все запросы API другим программным обеспечением. Теперь мне нужно найти какое-то странное решение для этого, например, перегрузить addEventListener в моем ПО или что-то подобное ... - person Pat Mächler; 31.05.2017