Javascript 服务人员脱机页面赢得'；t载荷

这曾经对我有用，但在几个月前就停止了，我已经修修补补了，再也无法解决这个问题了。我做错了什么

调用服务人员模板，没有问题：

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.');
}

const cacheName='2020.10.06-01';

var cacheFiles = ['/offline.html'];

addEventListener('install', e => {
   e.waitUntil(
       caches.open(cacheName).then(cache => {
           return cache.addAll(cacheFiles);
       })
   );
});

addEventListener('activate', e => {
   e.waitUntil(
       caches.keys().then(keyList => {
           return Promise.all(keyList.map(key => {
               if(key !== cacheName) {
                   return caches.delete(key);
               }
           }));
       })
   );
});

addEventListener('fetch', e => {
    e.respondWith(async function() {
        try {
           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match(e.request);
           const networkResponsePromise = fetch(e.request);

           e.waitUntil(async function() {
              const networkResponse = await networkResponsePromise;
              await cache.put(e.request, networkResponse.clone());
           }());

           // Returned the cached response if we have one, otherwise return the network response.
           return cachedResponse || networkResponsePromise;
        } catch (error) {
           console.log('Fetch failed; returning offline page instead.', error);

           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match('/offline.html');
           return cachedResponse;
        }
    }());
});

设置缓存版本并预加载缓存，没有问题：

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.');
}

const cacheName='2020.10.06-01';

var cacheFiles = ['/offline.html'];

addEventListener('install', e => {
   e.waitUntil(
       caches.open(cacheName).then(cache => {
           return cache.addAll(cacheFiles);
       })
   );
});

addEventListener('activate', e => {
   e.waitUntil(
       caches.keys().then(keyList => {
           return Promise.all(keyList.map(key => {
               if(key !== cacheName) {
                   return caches.delete(key);
               }
           }));
       })
   );
});

addEventListener('fetch', e => {
    e.respondWith(async function() {
        try {
           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match(e.request);
           const networkResponsePromise = fetch(e.request);

           e.waitUntil(async function() {
              const networkResponse = await networkResponsePromise;
              await cache.put(e.request, networkResponse.clone());
           }());

           // Returned the cached response if we have one, otherwise return the network response.
           return cachedResponse || networkResponsePromise;
        } catch (error) {
           console.log('Fetch failed; returning offline page instead.', error);

           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match('/offline.html');
           return cachedResponse;
        }
    }());
});

已安装服务工作人员，没有问题：

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.');
}

const cacheName='2020.10.06-01';

var cacheFiles = ['/offline.html'];

addEventListener('install', e => {
   e.waitUntil(
       caches.open(cacheName).then(cache => {
           return cache.addAll(cacheFiles);
       })
   );
});

addEventListener('activate', e => {
   e.waitUntil(
       caches.keys().then(keyList => {
           return Promise.all(keyList.map(key => {
               if(key !== cacheName) {
                   return caches.delete(key);
               }
           }));
       })
   );
});

addEventListener('fetch', e => {
    e.respondWith(async function() {
        try {
           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match(e.request);
           const networkResponsePromise = fetch(e.request);

           e.waitUntil(async function() {
              const networkResponse = await networkResponsePromise;
              await cache.put(e.request, networkResponse.clone());
           }());

           // Returned the cached response if we have one, otherwise return the network response.
           return cachedResponse || networkResponsePromise;
        } catch (error) {
           console.log('Fetch failed; returning offline page instead.', error);

           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match('/offline.html');
           return cachedResponse;
        }
    }());
});

已为自动缓存翻转激活服务工作程序，没有问题：

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.');
}

const cacheName='2020.10.06-01';

var cacheFiles = ['/offline.html'];

addEventListener('install', e => {
   e.waitUntil(
       caches.open(cacheName).then(cache => {
           return cache.addAll(cacheFiles);
       })
   );
});

addEventListener('activate', e => {
   e.waitUntil(
       caches.keys().then(keyList => {
           return Promise.all(keyList.map(key => {
               if(key !== cacheName) {
                   return caches.delete(key);
               }
           }));
       })
   );
});

addEventListener('fetch', e => {
    e.respondWith(async function() {
        try {
           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match(e.request);
           const networkResponsePromise = fetch(e.request);

           e.waitUntil(async function() {
              const networkResponse = await networkResponsePromise;
              await cache.put(e.request, networkResponse.clone());
           }());

           // Returned the cached response if we have one, otherwise return the network response.
           return cachedResponse || networkResponsePromise;
        } catch (error) {
           console.log('Fetch failed; returning offline page instead.', error);

           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match('/offline.html');
           return cachedResponse;
        }
    }());
});

正在从缓存或网络中提取，没有问题：

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.');
}

const cacheName='2020.10.06-01';

var cacheFiles = ['/offline.html'];

addEventListener('install', e => {
   e.waitUntil(
       caches.open(cacheName).then(cache => {
           return cache.addAll(cacheFiles);
       })
   );
});

addEventListener('activate', e => {
   e.waitUntil(
       caches.keys().then(keyList => {
           return Promise.all(keyList.map(key => {
               if(key !== cacheName) {
                   return caches.delete(key);
               }
           }));
       })
   );
});

addEventListener('fetch', e => {
    e.respondWith(async function() {
        try {
           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match(e.request);
           const networkResponsePromise = fetch(e.request);

           e.waitUntil(async function() {
              const networkResponse = await networkResponsePromise;
              await cache.put(e.request, networkResponse.clone());
           }());

           // Returned the cached response if we have one, otherwise return the network response.
           return cachedResponse || networkResponsePromise;
        } catch (error) {
           console.log('Fetch failed; returning offline page instead.', error);

           const cache = await caches.open(cacheName);
           const cachedResponse = await cache.match('/offline.html');
           return cachedResponse;
        }
    }());
});

但是，如果我试图请求的页面/资源不在缓存中，并且网络不可用，它将拒绝显示我的“offline.html”页面。（我知道它在缓存中）

---

有什么想法吗？

用这个替换您的获取事件代码。对于每个请求，将调用fetch事件，它将检查是否在缓存文件列表中找到了您的请求，然后它将从那里提供文件，否则它将进行fetch调用以从服务器获取文件

self.addEventListener("fetch", function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                if (response) {
                    return response;
                }
                return fetch(event.request);
            })
    );
});

---

此外，缓存文件列表中不需要单独的“offline.html”文件。而是将主应用程序html文件以及相关css和js文件添加到该列表中。这将使您的应用程序在没有网络的情况下完全脱机。

下面是我最后编写的获取代码，它非常适合我：

self.addEventListener('fetch', (event) => {
  event.respondWith((async() => {

    const cache = await caches.open(cacheName);

    try {
        const cachedResponse = await cache.match(event.request);
        if(cachedResponse) {
            console.log('cachedResponse: ', event.request.url);
            return cachedResponse;
        }

        const fetchResponse = await fetch(event.request);
        if(fetchResponse) {
            console.log('fetchResponse: ', event.request.url);
            await cache.put(event.request, fetchResponse.clone());
            return fetchResponse;
        }
    }   catch (error) {
        console.log('Fetch failed: ', error);
        const cachedResponse = await cache.match('/en/offline.html');
        return cachedResponse;
    }
  })());
});

这是我需要的一切，以非常具体的顺序。它首先检查缓存，如果找到，则返回缓存。它接下来检查网络，如果发现，它会先缓存它，然后返回它。或者，它会显示一个自定义的脱机页面，并带有一个大的重新加载按钮，以鼓励访问者在重新联机时重试

但最重要的是要意识到，这样做可以让我在有或没有网络访问的情况下显示一个页面及其所有资源

更新：为了应对2020年3月至8月期间在所有浏览器中实施的CORS安全要求的变化，我不得不对“fetch”事件做一个小的更改

更改自：

const fetchResponse = await fetch(event.request);

致：