如何解决离线重新加载后工作箱删除缓存
我必须能够在离线模式下使用整个应用程序(Vue SPA),因此我需要预先缓存应用程序外壳程序(用于客户端导航的index.html)和所有其他资产
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
workbox.precaching.precacheAndRoute([
{ url: '/index.html',revision: '383796' },{ url: '/manifest.json',revision: '383896' }
])
const handler = workbox.precaching.createHandlerBoundToURL('/index.html')
const navigationRoute = new workbox.routing.NavigationRoute(handler)
workbox.routing.registerRoute(navigationRoute)
// 1. css
workbox.routing.registerRoute(
new RegExp('\.css$'),new workbox.strategies.CacheFirst({
cacheName: 'styles-cache'
})
)
// 2. js
workbox.routing.registerRoute(
new RegExp('.*.js'),new workbox.strategies.CacheFirst({
cacheName: 'js-cache'
})
)
// 3. images
workbox.routing.registerRoute(
new RegExp('\.(png|svg|jpg|jpeg)$'),new workbox.strategies.CacheFirst({
cacheName: 'images-cache'
})
)
如果我重新加载页面且该页面处于脱机状态,则该应用程序仍然可以正常运行并导航,但该应用程序不再更新。由于CacheFirst
策略,SW不会替换旧代码。
为解决这个问题,我在install
阶段添加了一个清理代码:
self.addEventListener('install',function (event) {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => caches.delete(cacheName))
)
})
);
});
因此,每次更新软件时都会更新该应用程序,但是现在当我离线加载页面时,它会显示:
无法访问此网站
位于http:// localhost:8080 / home的网页 可能暂时关闭或可能已永久移至新 网址。
ERR_FAILED
和cache storage
为空。如果我将install
更改为activate
,则结果是相同的,离线重新加载后该应用程序将无法再使用。当我再次上线时,将下载并缓存代码。
如果安装一次,为什么每次都删除高速缓存?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。