Javascript 服务人员已注册并激活，但未'；无法在脱机模式下工作

在UI5应用程序中，我已在index.html中注册了我的服务人员：

此外，我在根文件夹中有文件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
});

有了这些，我就可以正确地安装和激活我的服务人员了。如果我转到“缓存存储”选项卡，我会缓存信息：

我的连接是安全的（HTTPS），但当我处于脱机模式时，请求会从缓存磁盘返回，而不是从服务工作者返回

我猜这是因为它是从浏览器的自动缓存中获取的，但是如果我在Chrome中单击“禁用缓存”选项，它不会加载脱机页面

有人知道为什么会这样吗？

以下是对
引用自：

[Service Worker]设计为完全异步；因此，诸如同步XHR之类的API不能在服务工作者内部使用

所以目前，UI5确实发送了许多同步XHR，这就解释了原因

因此，尽量减少同步XHR

创建组件预加载文件

尽可能设置everywhere

async:true

。例如

• 组件

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

• 根视图（应用程序内描述符）

通过引导配置

以值
“async”
预加载

，异步加载库。例如：

data-sap-ui-preload="async"

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

使用启用的

xx waitForTheme

预加载库。例如：

data-sap-ui-preload="async"

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

---

我也明白了。避免通过延迟加载控件，因为碎片是通过这种方式同步获取的。

检查

navigator.serviceWorker.controller

时，您是否看到

来自service worker

标记？否则，您的页面不受服务人员控制。即使您的软件仍然处于活动状态，您也必须在

chrome://serviceworker-internals/

。如何检查navigator.serviceWorker.controller？我将它放在javascript控制台上，但它返回空值。我已经检查了范围chrome://serviceworker-internals/ 我已经验证了我的页面在软件的范围内。请查看我认为您必须添加

clients.claim（）的代码片段

激活您的侦听器，以便您的服务人员可以访问具有相同作用域的页面。@AngelSilvan没有按照以下帮助中的建议减少同步XHR？不完全是，很遗憾，我无法减少所有同步调用。