如何使用服务工作者预缓存名称在每次部署时都会更改的资产?

诱惑

我们正在使用 Workbox 来预缓存“下一个”页面的一些资产,但我们的资产 URL 包含部署的日期和哈希值。例如“/css/2019-05-15/f00ba5/home.css”。

我们面临的问题是如何将 URL 的变化部分(“2019-05-15/f00ba5”)传递给 service worker,并使 Workbox 预缓存资产列表。

我们正在使用 Workbox 并尝试使用 workbox-window 将消息从网页发送到 SW,直到这里......它起作用了!

但是现在 SW 知道了哈希值,我们不知道如何利用它,因为如果我们从事件侦听器内部调用 workbox.precaching.precacheAndRoute() 方法,workbox.precaching 模块的导入会以某种方式失败.

在页面.html

<script type="module">
    import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/4.0.0/workbox-window.prod.mjs';

    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
        const wb = new Workbox('/service-worker.js');
        wb.messageSW({type: 'hash', payload: "12345"});
        wb.register();
    })
}
</script>

在 service-worker.js 中

const file1 = "/css/{hash}/home.css";
const file2 = "/js/{hash}/home.js";
const file3 = "/img/{hash}/hero.jpg";

addEventListener('message', (event) => {
    if (event.data.type === 'hash') {
        // TODO: replace {hash} with event.data.payload in file1, 2, 3
        const precacheManifest = [ file1, file2, file3 ];
        workbox.precaching.precacheAndRoute(precacheManifest);
    }
});

我收到错误

workbox-sw.js:1 Unable to import module 'workbox-precaching' from 'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js'.
loadModule @ workbox-sw.js:1
get @ workbox-sw.js:1
(anonymous) @ service-worker.js:39
workbox-sw.js:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-precaching.prod.js' failed to load.
at Object.loadModule (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js:1:954)
at Object.get (https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js:1:727)
at https://brioni.f31.lcl/service-worker.js:39:13
loadModule @ workbox-sw.js:1
get @ workbox-sw.js:1
(anonymous) @ service-worker.js:39
framework.js:1441 STORE::LazyLoad.Init

我希望它能工作并预缓存precacheManifest数组中的文件

杰夫波斯尼克

您遇到的特定错误是由于importScripts()在 Service Worker 安装发生后对 callimg 的限制,这是通过workbox-sw在后台发生的Workbox 文档中对其进行了更详细的描述,以及完成相同操作的替代方法。

话虽如此,使用workbox-precaching“动态”并不是一个好的选择。workbox-precaching文档中所述,您应该使用构建工具(如workbox-cliworkbox-webpack-plugin)来生成此列表并自动将预缓存清单插入您的服务工作线程文件中。由于更新的预缓存清单而对 Service Worker 文件进行的更改将触发 Service Worker 更新生命周期事件,进而确保您的预缓存资产保持最新。

如果您不想使用构建工具并提前生成预缓存清单,那么设置路由规则并使用运行时缓存策略比缓存更合适。您可以使用workbox-window的URL列表传递你想在运行时缓存。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

刷新时激活更新的服务工作者

如何卸载服务工作者?

离线时服务工作者未注册

如何列出服务工作者已经存储在浏览器缓存中的博客帖子?

服务工作者和软件预缓存的“新版本可用”

WebView:以编程方式清除服务工作者缓存

如何使用新部署的站点版本(Firebase)从用户的浏览器中删除在先前部署中注册的服务工作者?

使用CSRF令牌缓存请求时,如何减少服务工作者缓存的大小

具有SSL证书缓存的服务工作者

PWA服务工作者缓存/更新预期行为

服务工作者将文件从API调用添加到预缓存

用户在网站上时,可以使用服务工作者显示通知吗?

注销时如何清除服务工作者缓存?

延迟加载或预加载Angular模块并使用服务工作者来缓存结果?

如何根据服务工作者中的某些标志缓存响应

服务工作者可以获取和缓存跨域资产吗?

如何在服务工作者中刷新图片

通常,服务工作者应预缓存哪些文件?

从Create React App注册服务工作者时如何更新页面

PWA-服务工作者(反应)如何工作?

如何防止服务工作者删除缓存,PWA

如何由服务工作者更新缓存的资源

使用工作箱和服务器端呈现的 SPA 缓存服务工作者

服务工作者,它是如何工作的?

服务工作者从磁盘缓存中缓存资源

服务工作者在反应中缓存的路由

服务工作者缓存与 VuexPersistence

角度缓存 - 我们应该使用服务工作者吗?

服务工作者缓存破坏谷歌地图 api