Question

这曾经对我有用，但是在几个月前就停止了，我已经重新定位了自己，无法再解决这个问题了。我在这里做什么错了？

调用服务工作者模板，没问题：

texts_to_sequences()

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

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'];

激活Services Worker进行自动缓存过渡，没问题：

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

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

有什么想法吗？

Answer 1

用此代码替换您的提取事件代码。对于每个请求，都会调用您的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文件。如果没有网络，这将使您的应用程序完全脱机。

Answer 2

这是我最后编写的最适合我的提取代码：

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;
    }
  })());
});

这按特定顺序完成了我需要的一切。它首先检查缓存，如果找到则将其返回。下一步检查网络，如果找到它首先将其缓存，然后将其返回。或者，它会显示一个自定义的离线页面，并带有一个大的“重新加载”按钮，以鼓励访问者重返在线后再试一次。

但是要意识到的最重要的一点是，以这种方式进行操作可以使我显示一个页面及其所有资源，无论是否具有网络访问权限。

服务人员离线页面无法加载

2 个答案: