使用 workbox.js 网络首次缓存 index.html
Network first caching of index.html using workbox.js
我已经使用 Google 的 workbox-build 包将服务工作者集成到我们使用 ReactJS 构建的单页应用程序中。
我在 index.html 的预缓存方面遇到了一些麻烦,具体来说,每次我们发布新版本时,Service Worker 都会提供过时的 index.html。由于它提供的是过时的 index.html,因此找不到主 JavaScript 文件,因为它是基于构建进行版本控制的。
</div><script type="text/javascript" src="/static/js/main.fa34a3ce.js"></script>
我还尝试从预缓存中删除 index.html,并将其放在运行时缓存中,并使用网络优先设置。但是好像没有被service worker缓存。
runtimeCaching: [
{
urlPattern: /\/$/,
handler: 'networkFirst',
options: {
cacheName: 'my-cache-index'
}
}
]
您很可能 运行 遇到了常见的双重缓存情况,请参阅此 Cache Control and upcoming changes in Chrome Fresher Service Workers。
我tried very hard设置网络优先预缓存策略,但我失败了。我放弃了尝试并实施了以下策略:首先缓存,但在简单的页面重新加载时应用更新。
要实现它,只需将以下选项添加到您的 Workbox 服务工作者构建器(例如 Webpack 插件):
skipWaiting: true
或者,如果您自己编写 Service Worker,请将以下行添加到您的 Service Worker 代码中:
workbox.core.skipWaiting();
此外,您可以在更新应用程序时向用户显示警报,and/or 自动重新加载页面:
// Your service worker registration code
// ...
const registration = await navigator.serviceWorker.register(serviceWorkerUrl);
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
if (confirm('App\'s been updated. Restart to apply the update?')) {
location.reload();
}
} else {
// The service worker has been installed for the first time
}
}
};
};
默认情况下,当上面的代码为运行时,会检查更新。您可以通过调用以下方式手动触发更新检查:
// An appendix to the previous code block
registration.update();
很遗憾,有no straightforward way to find out没有更新
我已经使用 Google 的 workbox-build 包将服务工作者集成到我们使用 ReactJS 构建的单页应用程序中。
我在 index.html 的预缓存方面遇到了一些麻烦,具体来说,每次我们发布新版本时,Service Worker 都会提供过时的 index.html。由于它提供的是过时的 index.html,因此找不到主 JavaScript 文件,因为它是基于构建进行版本控制的。
</div><script type="text/javascript" src="/static/js/main.fa34a3ce.js"></script>
我还尝试从预缓存中删除 index.html,并将其放在运行时缓存中,并使用网络优先设置。但是好像没有被service worker缓存。
runtimeCaching: [
{
urlPattern: /\/$/,
handler: 'networkFirst',
options: {
cacheName: 'my-cache-index'
}
}
]
您很可能 运行 遇到了常见的双重缓存情况,请参阅此 Cache Control and upcoming changes in Chrome Fresher Service Workers。
我tried very hard设置网络优先预缓存策略,但我失败了。我放弃了尝试并实施了以下策略:首先缓存,但在简单的页面重新加载时应用更新。
要实现它,只需将以下选项添加到您的 Workbox 服务工作者构建器(例如 Webpack 插件):
skipWaiting: true
或者,如果您自己编写 Service Worker,请将以下行添加到您的 Service Worker 代码中:
workbox.core.skipWaiting();
此外,您可以在更新应用程序时向用户显示警报,and/or 自动重新加载页面:
// Your service worker registration code
// ...
const registration = await navigator.serviceWorker.register(serviceWorkerUrl);
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
if (confirm('App\'s been updated. Restart to apply the update?')) {
location.reload();
}
} else {
// The service worker has been installed for the first time
}
}
};
};
默认情况下,当上面的代码为运行时,会检查更新。您可以通过调用以下方式手动触发更新检查:
// An appendix to the previous code block
registration.update();
很遗憾,有no straightforward way to find out没有更新