如何解决服务人员离线页面无法加载
这曾经对我有用,但是在几个月前就停止了,我已经重新定位了自己,无法再解决这个问题了。我在这里做什么错了?
调用服务工作者模板,没问题:
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)
有什么想法吗?
解决方法
用此代码替换您的提取事件代码。对于每个请求,都会调用您的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;
}
})());
});
这按特定顺序完成了我需要的一切。它首先检查缓存,如果找到则将其返回。下一步检查网络,如果找到它首先将其缓存,然后将其返回。或者,它会显示一个自定义的离线页面,并带有一个大的“重新加载”按钮,以鼓励访问者重返在线后再试一次。
但是要意识到的最重要的一点是,以这种方式进行操作可以使我显示一个页面及其所有资源,无论是否具有网络访问权限。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。