如何在ServiceWorker更新后刷新页面？ [英] How to refresh the page after a ServiceWorker update?
问题描述
我咨询过很多关于服务工作者的资源：
I've consulted a lot of resources on Service Workers:
- 更新您的ServiceWorker
- ServiceWorker：Web平台的革命
- Jake Archibald的可爱 SVGOMG 。
- Updating your ServiceWorker
- ServiceWorker: Revolution of the Web Platform
- Jake Archibald's lovely SVGOMG.
但是，在我的生活中，我无法弄清楚如何在安装新的ServiceWorker后更新页面。无论我做什么，我的页面都停留在旧版本上，只有硬刷新（Cmd-Shift-R）才能修复它。没有组合1）关闭标签，2）关闭Chrome，或3） location.reload（true）将提供新内容。
However, I can't for the life of me figure out how to update the page after a new ServiceWorker has been installed. No matter what I do, my page is stuck on an old version, and only a hard refresh (Cmd-Shift-R) will fix it. No combination of 1) closing the tab, 2) closing Chrome, or 3) location.reload(true) will serve the new content.
我有一个超级简单的示例应用，主要基于SVGOMG。在安装时，我使用 cache.addAll（）缓存一堆资源，并且我还执行 skipWaiting（） if当前版本的主要版本号与活动版本号不匹配（基于IndexedDB查找）：
I have a super simple example app mostly based on SVGOMG. On installation, I cache a bunch of resources using cache.addAll(), and I also do skipWaiting() if the current version's major version number doesn't match the active version's number (based on an IndexedDB lookup):
self.addEventListener('install', function install(event) {
event.waitUntil((async () => {
var activeVersionPromise = localForage.getItem('active-version');
var cache = await caches.open('cache-' + version);
await cache.addAll(staticContent);
var activeVersion = await activeVersionPromise;
if (!activeVersion ||
semver.parse(activeVersion).major === semver.parse(version).major) {
if (self.skipWaiting) { // wrapping in an if while Chrome 40 is still around
self.skipWaiting();
}
}
})());
});
我正在使用一个由semver启发的系统，主要版本号表示新的ServiceWorker可以'对于旧的热交换。这适用于ServiceWorker端 - 从v1.0.0到v1.0.1的颠簸导致工作程序立即安装在刷新上，而从v1.0.0到v2.0.0，它等待选项卡关闭并重新打开已安装。
I'm using a semver-inspired system where the major version number indicates that the new ServiceWorker can't be hot-swapped for the old one. This works on the ServiceWorker side - a bump from v1.0.0 to v1.0.1 causes the worker to be immediately installed on a refresh, whereas from v1.0.0 to v2.0.0, it waits for the tab to be closed and reopened before being installed.
回到主线程，我在注册后手动更新了ServiceWorker–否则页面甚至得不到备忘录，即可以使用新版本的ServiceWorker（奇怪的是，我发现在ServiceWorker文献中很少提到这一点）：
Back in the main thread, I'm manually updating the ServiceWorker after registration – otherwise the page never even gets the memo that there's a new version of the ServiceWorker available (oddly I found very few mentions of this anywhere in the ServiceWorker literature):
navigator.serviceWorker.register('/sw-bundle.js', {
scope: './'
}).then(registration => {
if (typeof registration.update == 'function') {
registration.update();
}
});
然而，提供给主线程的内容始终停留在旧版本的页面上（我的版本是1.0.0），无论我是否将版本增加到1.0.1或2.0.0。
However, the content that gets served to the main thread is always stuck on an old version of the page ("My version is 1.0.0"), regardless of whether I increment the version to 1.0.1 or 2.0.0.
我有点难过。我希望找到一个优雅的semver-y解决方案来进行ServiceWorker版本控制（因此我使用 require（'./ package.json'）。version ），但在我目前实现时，用户永远停留在旧版本的页面上，除非他们硬刷新或手动清除所有数据。 ：/
I'm kind of stumped here. I was hoping to find an elegant semver-y solution to ServiceWorker versioning (hence my use of require('./package.json').version), but in my current implementation, the user is perpetually stuck on an old version of the page, unless they hard-refresh or manually clear out all their data. :/
推荐答案
发现问题–您需要避免ServiceWorker JS文件本身上的任何缓存标头。将缓存设置为 max-age = 0 立即解决了问题： https://github.com/nolanlawson/serviceworker-update-demo/pull/1
Found the issue – you need to avoid any cache headers on the ServiceWorker JS file itself. Setting the cache to max-age=0 immediately solved the problem: https://github.com/nolanlawson/serviceworker-update-demo/pull/1
为Jake Archibald干预让我直截了当： https://twitter.com/jaffathecake/status/689214019308224513
Cheers to Jake Archibald for setting me straight: https://twitter.com/jaffathecake/status/689214019308224513
这篇关于如何在ServiceWorker更新后刷新页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
