如楼上说的一致,Service worker 可用帮助缓存。如果需要快速生成可用的 Service Worker ,使用 Google 的 workbox-cli 可用直接指定要缓存的文件类型,帮你创建好 sw.js ,几乎可用不用手写代码。
https://developer.chrome.com/docs/workbox/modules/workbox-cli/留意一下,采用这种方法的话,如果静态文件有更新,每一次也要充新生成一下 sw.js 。在用户完全退出页面后可自动完成更新。
(如果要强制在页面刷新的时候就丢掉旧的 Service Worker 并载入新的静态文件 (即 skip waiting),可在检测已有新的 service worker 在等待的时候,向新安装的那个 postMessage 来实现,具体参考谷歌的文档就好)
因为这个 [页面刷新时不会立即应用更新] 可能是个坑,所以我就多啰嗦了一点。下面是我以前写过的一个解决此问题的例子,要是会用到的话可用参考下。
```
window.addEventListener('load', async () => {
try {
let reg = await navigator.serviceWorker.register('/sw.js');
if (reg) {
// listen for update
reg.addEventListener('updatefound', () => {
let worker = reg.installing;
worker.addEventListener('statechange', () => {
if (worker.state === 'installed') {
worker.postMessage({
type: "SKIP_WAITING"
});
}
});
});
// one update already installed
if (reg.waiting) {
reg.waiting.postMessage({
type: "SKIP_WAITING"
});
}
}
} catch (err) {
console.log(err);
}
});
```