离线重新加载后工作箱删除缓存

问题描述

我必须能够在离线模式下使用整个应用程序（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 (将#修改为@）

service-worker vue.js workbox