Javascript 如何在ServiceWorker更新后刷新页面？

我咨询了很多关于服务人员的资源：

• 杰克·阿奇博尔德很可爱

然而，我一辈子都不知道如何在安装了新的ServiceWorker之后更新页面。无论我做什么，我的页面都会被旧版本卡住，只有硬刷新（Cmd-Shift-R）才能修复它。1）关闭选项卡，2）关闭Chrome，或3）

location.reload（true）

的组合都不能用于新内容

我有一个主要基于SVGOMG的。安装时，我使用

cache.addAll（）

缓存大量资源，如果当前版本的主要版本号与活动版本号不匹配（基于IndexedDB查找），我也会执行

skipWaiting（）

：

我使用的是一个受semver启发的系统，其中主版本号表示新的ServiceWorker无法热交换为旧的。这在ServiceWorker端起作用-从v1.0.0到v1.0.1的通气会导致刷新时立即安装worker，而从v1.0.0到v2.0.0，它会等待选项卡关闭并重新打开，然后再安装

回到主线程中，我在注册后手动更新ServiceWorker–否则页面甚至都不会收到关于ServiceWorker有新版本可用的备忘录（奇怪的是，我发现ServiceWorker文献中很少提到这一点）：

但是，提供给主线程的内容总是停留在页面的旧版本上（“我的版本是1.0.0”），无论我是将版本增加到1.0.1还是2.0.0

---

我有点被难住了。我希望找到一个优雅的semver-y版本控制解决方案（因此我使用了

require（'./package.json'）.version

），但在我当前的实现中，用户永远停留在旧版本的页面上，除非他们硬刷新或手动清除所有数据/

外部：使用停止并注销服务工作人员chrome://serviceworker-internals/

---

来自ServiceWorker本身的内部：和

发现了问题–您需要避免ServiceWorker JS文件本身上的任何缓存头。将缓存设置为

max age=0

立即解决了问题：

---

为杰克·阿奇博尔德（Jake Archibald）为我的直白干杯：

在Chrome Canary中，您可以进行各种服务人员分析和管理，如取消注册，在应用程序选项卡中清除：

---

配上chrome://devices/ 使用物理设备进行调试。

不太。。。我已经在这里这么做了：更改max age=0是否有任何负面影响？谢谢，我也遇到了同样的问题。我正在使用http服务器npm包，读了这篇文章后了解到，默认情况下，它将max age设置为2600。使用

-c-1

启动服务器会禁用该功能，以便您的服务人员的行为更加可预测。例如，

http服务器-c-1-p8081

@JamieMason在

serviceWorker

文件中的哪一行添加

max age=0

@AnthonyWinzlet max age是web服务器在提供文件时返回的头，在本例中，是服务器将文件发送到客户端时返回的服务工作者js文件。它不是在服务工作者文件本身中设置的，而是在托管/服务它的服务器端设置的。请参阅：。我找不到您为确保已安装新的Service Worker而执行的步骤。您声称但未确保它确实已安装。

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();
      }
    }
  })());
});

navigator.serviceWorker.register('/sw-bundle.js', {
  scope: './'
}).then(registration => {
  if (typeof registration.update == 'function') {
    registration.update();
  }
});