Service Worker save App：'install' 事件的事件处理程序必须在 worker 脚本的初始评估中添加

Question

应用无法下载。在 Lighthouse 中，我遇到了 service worker 或 manifest 失败的问题。

我收到两个警告，我不明白:

install 事件的事件处理程序必须添加到工作脚本的初始评估中。
fetch 事件的事件处理程序必须添加到工作脚本的初始评估中。

应用程序网址： @Vimal Patel

站点： https://www.kuehroint.com/archenkanzel/archenkanzel-wimbachbruecke.html Service Worker .sw https://www.kuehroint.com/archenkanzel/sw.js（警告） 清单杰森 https://www.kuehroint.com/archenkanzel/manifest.json

我认为这个脚本没有被使用。 https://www.kuehroint.com/archenkanzel/service-worker.js

代码注释中的控制台警告：

self.addEventListener('install', function(event) {
 // Perform install steps
 var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = ['archenkanzel-wimbachbruecke.html'    ,
'     ../xcss/bergtouren.css',
'../icons/kuehr.jpg' 

];

 
self.addEventListener('install', function(event) {  /*<-- Event handler of 'install' event must be added on the initial evaluation of worker script */
 // Perform install steps
 event.waitUntil(
   caches.open(CACHE_NAME)
     .then(function(cache) {
       console.log('Opened cache');
       return cache.addAll(urlsToCache);
     })
 );
});

self.addEventListener('fetch', function(event) { /*<-- Event handler of 'fetch' event must be added on the initial evaluation of worker script.*/
 event.respondWith(
   caches.match(event.request)
     .then(function(response) {
       // Cache hit - return response
       if (response) {
         return response;
       }
       return fetch(event.request);
     }
   )
 );
});
});

Answer 1

目前您的 service worker 没有正确安装。以下是您的 service worker Link

中的几个问题

您已多次声明“安装”事件。
第一个“安装”事件函数没有正确关闭。它在最后关闭。这是无效的 javascript.

解决方法:-

删除您的第一个安装事件（第 2 行）。
确保您的服务工作者函数是有效的 javascript 函数。

还要确保您添加到缓存列表中的每个文件都应该 return 200 响应，否则您的安装事件将失败。

Service Worker save App：'install' 事件的事件处理程序必须在 worker 脚本的初始评估中添加

Service Worker save App: Event handler of 'install' event must be added on the initial evaluation of worker script

service-worker