Сервисный работник зарегистрирован и активирован, но не работает в автономном режиме

В приложении UI5 я зарегистрировал своего сервис-воркера в index.html:

$(document).ready(function() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('service-worker.js', { scope: './' })
      .then(function(registration) {
        console.log("Service Worker Registered");
      })
      .catch(function(err) {
        console.log("Service Worker Failed to Register", err);
      })
  }
});

Кроме того, у меня есть файл service-worker.js в корневой папке, чтобы работник службы мог кэшировать все элементы под ним. Этот файл содержит следующий код:

// Set a name for the current cache
var cacheName = 'v2'; 

// Default files to always cache
var cacheFiles = [
    './',
    './inicio.html?I_APLICACION=CAPCGENA02',
    './resources/sap-ui-core.js',
    './resources/sap/ui/core/themes/base/fonts/SAP-icons.ttf',
    './resources/sap-ui-core.js',
    './resources/sap/ui/core/library-preload.js',
    './resources/sap/m/library-preload.js',
    './resources/sap/ui/unified/library-preload.js',
    './resources/sap/ui/comp/library-preload.js',
    './resources/sap/ui/table/library-preload.js',
    './resources/sap/ui/fl/library-preload.js',
    './resources/sap/tnt/library-preload.js',
    './resources/sap/ui/unified/themes/sap_belize/library-parameters.json',
    './resources/sap/ui/table/themes/sap_belize/library-parameters.json',
    './resources/sap/ui/comp/themes/sap_belize/library-parameters.json',
    './resources/sap/tnt/themes/sap_belize/library-parameters.json',
    './resources/sap/ui/layout/library-preload.js',
    './resources/sap/ui/unified/themes/sap_belize/library.css',
    './resources/sap/ui/table/themes/sap_belize/library.css',
    './resources/sap/ui/comp/themes/sap_belize/library.css',
    './resources/sap/tnt/themes/sap_belize/library.css',
    './css/style.css',
    './css/fonts/ttf/CMEEMEN18.ttf',
    './images/temporal/chart.PNG',
    './Component.js',
    './Component-preload.js',
    './manifest.json',
    './api/api.reformation.data.js',
    './api/ApiManager.js',
    './api/ApiStructure.js',
    './api/ibd.api.login.data.js',
    './controller/Home.controller.js',
    './controller/Login.controller.js',
    './controller/Menu.controller.js',
    './controller/fragment/ManagePartes.js',
    './controller/fragment/FilterDialogController.js',
    './controller/structure/Container.controller.js',
    './controller/structur
    './database/apiBBDD.js',
    './database/bbdd.js',
    './i18n/i18n.properties',
    './i18n/i18n_en.properties',
    './i18n/i18n_es.properties',
    './i18n/i18n_en_US.properties',
    './i18n/i18n_es_ES.properties',
    './manager/dataManager/DataManager.js',
    './manager/functionalityManager/FunctionalityManager.js',
    './manager/mappingManager/MappingManager.js',
    './manager/parserManager/ReformationParser.js',
    './manager/sessionManager/SessionManager.js',
    './manager/structureManager/ElementManager.js',
    './manager/structureManager/StructureManager.js',
    './manager/viewManager/ViewManager.js',
    './singleton/Singleton.js',
    './utils/Consts.js',
    './utils/Funcionality.js',
    './utils/FunctionalityEvent.js',
    './utils/MaskedPassword.js',
    './utils/Utils.js',
    './view/Home.view.xml',
    './view/Login.view.xml',
    './view/Menu.view.xml',
    './view/fragment/DialogConfirm.fragment.xml',
    './view/fragment/DialogEnd.fragment.xml',
    './view/fragment/DialogError.fragment.xml',
    './view/fragment/DialogTag.fragment.xml',
    './view/fragment/DialogWaiting.fragment.xml',
    './view/fragment/HistoryDialog.fragment.xml',
    './view/fragment/HistoryNoticeDialog.fragment.xml',

]


self.addEventListener('install', function(e) {
    console.log('[ServiceWorker] Installed');

    // e.waitUntil Delays the event until the Promise is resolved
    e.waitUntil(

        // Open the cache
        caches.open(cacheName).then(function(cache) {

            // Add all the default files to the cache
            console.log('[ServiceWorker] Caching cacheFiles');
            //return cache.addAll(cacheFiles);
            return cache.addAll(cacheFiles.map(url => new Request(url, {credentials: 'same-origin'})));
        })
    ); // end e.waitUntil
});


self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activated');

    e.waitUntil(

        // Get all the cache keys (cacheName)
        caches.keys().then(function(cacheNames) {
            return Promise.all(cacheNames.map(function(thisCacheName) {

                // If a cached item is saved under a previous cacheName
                if (thisCacheName !== cacheName) {

                    // Delete that cached file
                    console.log('[ServiceWorker] Removing Cached Files from Cache - ', thisCacheName);
                    return caches.delete(thisCacheName);
                }
            }));
        })
    ); // end e.waitUntil

});


self.addEventListener('fetch', function(e) {
    console.log('[ServiceWorker] Fetch', e.request.url);

    // e.respondWidth Responds to the fetch event
    e.respondWith(

        // Check in cache for the request being made
        caches.match(e.request)


            .then(function(response) {

                // If the request is in the cache
                if ( response ) {
                    console.log("[ServiceWorker] Found in Cache", e.request.url, response);
                    // Return the cached version
                    return response;
                }

                // If the request is NOT in the cache, fetch and cache

                var requestClone = e.request.clone();
                fetch(requestClone)
                    .then(function(response) {

                        if ( !response ) {
                            console.log("[ServiceWorker] No response from fetch ")
                            return response;
                        }

                        var responseClone = response.clone();

                        //  Open the cache
                        caches.open(cacheName).then(function(cache) {

                            // Put the fetched response in the cache
                            cache.put(e.request, responseClone);
                            console.log('[ServiceWorker] New Data Cached', e.request.url);

                            // Return the response
                            return response;

                        }); // end caches.open

                    })
                    .catch(function(err) {
                        console.log('[ServiceWorker] Error Fetching & Caching New Data', err);
                    });


            }) // end caches.match(e.request)
    ); // end e.respondWith
});

При всем этом я правильно установил и активировал своего сервис-воркера. И если я перейду на вкладку Cache Storage, у меня будет кешированная информация:

Кэш-память

Мое соединение защищено (HTTPS), но когда я перехожу в автономный режим, запросы возвращаются с кеш-диска, а не от сервисного работника.

Я предполагаю, что это потому, что он берет его из автоматического кеширования браузеров, но если я нажму на параметр «Отключить кеш» в Chrome, он не загрузит автономную страницу.

кто-нибудь знает, почему это произошло?


javascript service-worker sapui5
person Angel Silvan    schedule 20.02.2018    source источник
comment
Вы видите знак from service worker при осмотре navigator.serviceWorker.controller? В противном случае ваша страница не контролируется работником службы. Даже если ваш SW все еще активен, вы должны проверить, попадает ли ваша страница в область действия SW в chrome://serviceworker-internals/.   -  person ashxvi    schedule 20.02.2018
comment
Как я могу проверить navigator.serviceWorker.controller? Я поместил его в консоль javascript, но он возвращает ноль. Я проверил область действия в chrome: // serviceworker-internals / и убедился, что моя страница находится в области действия ПО.   -  person Angel Silvan    schedule 20.02.2018
comment
Просмотрите фрагменты из serviceworke.rs/immediate-claim_service-worker_doc.html I думаю, вам нужно добавить clients.claim() в прослушиватель активации, чтобы ваш Service Worker был доступен для страниц с той же областью действия.   -  person ashxvi    schedule 20.02.2018
comment
@AngelSilvan Помогло ли уменьшение XHR синхронизации, как это предлагается в ответе ниже?   -  person Boghyon Hoffmann    schedule 31.05.2018
comment
Не совсем, к сожалению, не удалось сократить все синхронные вызовы.   -  person Angel Silvan    schedule 12.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вот ответ на "Кто-нибудь работал над внедрением Service Worker в SAPUI5?"
И цитата из MDN:

[Service Worker] разработан как полностью асинхронный; как следствие, такие API, как синхронный XHR [...] не могут использоваться внутри сервис-воркера.

Итак, в настоящее время Service Worker не перехватывает синхронизируемые XHR и UI5 отправляет множество XHR синхронизации, что объясняет, почему эти файлы не перехватываются.

Поэтому постарайтесь максимально сократить XHR синхронизации, например объяснено здесь.

  1. Создайте файл предварительной загрузки компонентов

  2. По возможности установите везде async: true. Например.

    • Для компонентов

      sap.ui.component({
  manifestUrl: "...",
  async: true,
})

    • Корневой вид (в дескрипторе приложения)

      rootView : {
  viewName: "...",
  type: "XML",
  async: true,
  ...
},

  3. Загружать библиотеки асинхронно через конфигурацию начальной загрузки preload со значением "async". Например.:

    data-sap-ui-preload="async"

  4. Предварительная загрузка библиотек с включенным xx-waitForTheme. Например.:

    data-sap-ui-libs="sap.m, sap.ui.core, sap.f"
data-sap-ui-xx-waitForTheme="true"

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

person Boghyon Hoffmann    schedule 20.02.2018