渐进式 Web 应用程序上的缓存版本控制答案

【问题标题】：Cache Versioning on Progressive Web Apps渐进式 Web 应用程序上的缓存版本控制
【发布时间】：2019-03-08 20:36:05
【问题描述】：

目前 Service Worker 缓存的最佳做法是什么？

在为多个项目使用 Service Worker 和缓存之后，我们在管理项目的缓存资产时遇到了一些维护难题。

在大多数情况下，我们使用的是静态缓存（很可能是我们头痛的原因），我们的 sw.js 代码非常标准，如下所示：

var cacheName = 'v1:static';

// cache static assets during install phase
self.addEventListener('install', function (e) {
    e.waitUntil(
        caches.open(cacheName).then(function (cache) {
            return cache.addAll([
                './',
                './css/style.css',
                './css/vendor.css',
                './js/build/script.min.js',
                './js/build/vendor.min.js'
            ]).then(function () {
                self.skipWaiting();
            });
        })
    );
});

self.addEventListener('fetch', function (event) {        
    event.respondWith(
        caches.match(event.request).then(function (response) {
            if (response) {
                // retrieve from cache
                return response;
            }
            // fetch as normal
            return fetch(event.request);
        })
    );
});

一旦我们发布了新版本的应用程序，问题就开始了，我们需要使用户的缓存无效。

推荐什么方法来更新缓存？我知道sw-precache 或手动更新 cacheName 变量（或者可能通过任务运行器）的开发人员。还有其他选择吗？有没有办法只使一个文件而不是整个缓存失效？

谢谢

【问题讨论】：

通过/path/to/script.js?v=1.2.3 加载脚本并且 v 参数链接到项目版本号的情况并不少见。如果您的缓存最终会过期（它应该过期），那么您无需为删除旧条目而烦恼。
您提到要注意sw-precache，它适用于您所描述的用例。你有理由不使用它吗？（我是作者，很好奇有没有你担心的缺点。）
@JeffPosnick 我认为它很好地达到了它的目的（并且允许您在不知道引擎盖下发生了什么的情况下实现预缓存）；但由于服务人员相对较新，我个人现在更喜欢编写大部分引导代码。

标签： javascript service-worker progressive-web-apps

【解决方案1】：

我建议您对项目进行资产评估。从动态资产中确定静态资产。一旦你确定了纯静态的，预缓存它。

有两种方法可以做到这一点。 1) 使用sw-toolbox 或 2) 手动更新 service worker 文件的版本号，以便浏览器进行更新。

我知道您在使缓存和所有内容无效时所经历的痛苦。您可能想尝试/实施sw-toolbox。

sw-toolbox方法

const OFFLINE_URL = '/pages/offline/';

importScripts('sw-toolbox.js');

self.toolbox.precache([
    <PATH_TO_STATIC_ASSET>
    'manifest.json',
    OFFLINE_URL,
    '/'
]);

self.toolbox.router.default = self.toolbox.networkFirst;

self.toolbox.router.get('/(.*)', function (req, vals, opts) {
    return self.toolbox.networkFirst(req, vals, opts)
        .catch(function (error) {
            if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) {
                return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts);
            }
            throw error;
        });
    });

Google Service Worker 样板 - link

这个也很简单。唯一的缺点是，在每次部署时，您必须更新 CACHE_VERSION 以使安装的 service-worker 自动更新。

还要注意还有Workbox。我还没有玩太多，所以我的方法可能已经过时了。他们说这是预缓存和工具箱的后代

【讨论】：

【解决方案2】：

我认为最简单的方法是更新 Service Workers JS 文件中的 CACHE_NAME 以便再次安装。

【讨论】：