我目前正在尝试的服务工作者代码部分如下所示:
当然,使用标准的fetch事件监听器从缓存中返回,或者如果该项不存在,则运行网络请求。
但是,如果仅更新了上面的示例中的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也会发生。
但是我不禁想,是否有更简单的方法呢?
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文件,如何让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也会发生。
但是我不禁想,是否有更简单的方法呢?
sw-precache
在构建完成后会查看本地存在的文件名,并使用基于这些文件名的 URL 来填充其缓存。通常情况下,不需要特别调整客户端加载器。如果您遇到问题,请通过 https://github.com/GoogleChrome/sw-precache/issues 告知我们。 - Jeff Posnick