Service Worker save App：必须在工作脚本的初始评估中添加“安装”事件的事件处理程序

如何解决Service Worker save App：必须在工作脚本的初始评估中添加“安装”事件的事件处理程序

该应用程序无法下载。在 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（警告） Manifest Jason 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);
     }
   )
 );
});
});

解决方法

目前您的 Service Worker 安装不正确。以下是您的 Service Worker Link

中的几个问题

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

解决方案：-

删除您的第一个安装事件（第 2 行）。
确保您的 Service Worker 函数是有效的 javascript 函数。

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