管理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'
            ]);
        })
    );
});

当然还有从缓存返回的标准fetch事件侦听器,或者如果项目不存在则运行网络请求.

但是,如果从上面的示例中a.js,并且只a.js更新了 - 如何让服务工作者更新该文件,但只更新该文件; 如何确保用户下次浏览我的页面时,他们不会从服务工作者那里拉出现在陈旧的文件版本？

我能想象的最好的方法是在这些文件网址中添加缓存破坏程序

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

然后更新我正在使用的任何模块加载器来使用相同的当前散列/缓存buster请求这些文件,然后在SW安装事件中迭代当前缓存键并删除任何陈旧的东西,并添加任何缺少的东西.

这将似乎解决这两个问题:当一个文件被更新,这是发送的网络请求将不匹配现已过时服务工作者东西,所以在同一个网络后备会发生; 并且Service Worker的安装事件中的选择性缓存插入不会尝试将事物添加到已存在且当前的缓存中.

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

但我不禁想到有一种更简单的方法.在那儿？

您对理想情况应该发生的事情以及确保高效可靠地更新缓存资产的难度的理解是可靠的.

虽然您可以使用自己的方法,但现有的工具可以自动执行指纹识别每个文件的过程,然后生成管理缓存资产的服务工作文件.我开发了其中一个,sw-precache.offline-plugin是覆盖类似基础的另一种选择.