javascript - 管理 Service Worker 缓存

Question

我目前正在试验的 service worker 代码部分如下所示

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            return cache.addAll([
                '/react-redux/node_modules/react/dist/react-with-addons.js',
                '/react-redux/node_modules/react-dom/dist/react-dom.js',
                '/react-redux/a.js'
            ]);
        })
    );
});

当然是使用从缓存返回的标准获取事件监听器，或者如果该项目不存在则运行网络请求。

但是，如果在上面的示例中，a.js 并且只有 a.js 被更新了——我如何让 service worker 更新该文件，但只有那个文件；以及我如何确保用户下次浏览我的页面时，他们不会从 service worker 中提取文件的现在过时版本？

例如，我能想到的最好的方法是向这些文件 url 添加缓存破坏器

'/react-redux/node_modules/react/dist/react-with-addons.js?hash=1MWRF3...'

然后使用相同的当前哈希/缓存破坏器更新我用来请求这些文件的任何模块加载器，然后在 SW 安装事件中迭代当前缓存键并删除任何陈旧的内容，并添加任何丢失的内容.

这似乎可以解决这两个问题:更新文件时，发送的网络请求将与现在过时的 Service Worker 中的任何内容都不匹配，因此会发生相同的网络回退;并且 Service Worker 的安装事件中的选择性缓存插入不会尝试将已经存在和当前的内容添加到缓存中。

当然，Service Worker 代码会随着这些哈希值的变化而变化(在构建过程中自动发生)，因此当文件发生变化时也会让 SW 重新安装。

但我忍不住想到有更简单的方法。有吗？

Answer 1

您对理想情况下应该发生的事情的理解，以及确保高效可靠地更新缓存 Assets 的困难，是正确的。

虽然您可以采用自己的方法，但现有工具可以自动完成对每个文件进行指纹识别的过程，然后生成用于管理缓存 Assets 的服务 worker 文件。我开发了其中之一，sw-precache . offline-plugin是涵盖类似领域的另一种选择。