服务工作者，用于缓存脱机文件

问题描述

我们希望使网站可以脱机使用，我们从App Cache开始，但发现Service Worker已停止使用它。

我在我创建的测试站点上找到了设置服务工作者的帮助，但是它似乎仍然无法正常工作。它注册了服务工作者等，但似乎没有缓存任何东西。

这是服务工作者js的代码。有什么想法吗？

js代码的屏幕截图

解决方法

尝试一下：

1. 加载Service Worker页面。

   if(navigator.serviceWorker){
      window.addEventListener('load',() => {
        navigator.serviceWorker
        .register('/sw.js')
        .then(console.log('[ServiceWorker] Registered Successfully'))
        .catch(err => console.log(`[ServiceWorker] Error: ${err}`));
       });
   } else {
       console.log('Service Worker not supported.');
   }
   

2. 在sw.js中，添加一个版本。

   const cacheName='cache-2020.10.06-01';
   

3. 在sw.js中，添加了fetch事件。

   self.addEventListener('fetch',(event) => {
     event.respondWith(async function() {
   
       const cache = await caches.open(cacheName);
       const cachedResponse = await cache.match(event.request);
       const networkResponsePromise = fetch(event.request);
   
       event.waitUntil(async function() {
         const networkResponse = await networkResponsePromise;
         await cache.put(event.request,networkResponse.clone());
       }());
   
       // Returned the cached response if we have one,otherwise return the network response.
       return cachedResponse || networkResponsePromise;
     }());
   });
   

这基本上可以满足您的要求。就我个人而言，如果我所请求的内容尚未缓存并且没有网络访问权限，则尝试通过显示脱机页面来使其更进一步。但是到目前为止，我尝试过的所有示例都未能证明该功能。我认为自编写这些示例以来，API中的某些内容可能已发生变化。

GL