我们正在使用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模块会以某种方式失败。
在page.html中。
我预计这会起作用,并且会预先缓存
我们面临的问题是如何将URL的变化部分(“2019-05-15/f00ba5”)传递给service worker,并使Workbox预缓存资产列表。
我们正在使用Workbox,我们尝试使用workbox-window从网页向SW发送消息,直到这里......它工作了!
但现在,由于SW知道哈希值,我们不知道如何利用它,因为如果我们从事件监听器中调用workbox.precaching.precacheAndRoute()方法,导入workbox.precaching模块会以某种方式失败。
在page.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
数组中的文件。
version.json
的文件,其中包含要获取的文件以及哈希值以确定是否有差异。与其每次部署时杀死和安装/激活新软件,我更喜欢这种方法。 - ekans