ServiceWorker更新后如何刷新页面？

Question

我查阅了很多关于 Service Workers 的资源：

Updating your ServiceWorker
ServiceWorker: Revolution of the Web Platform
杰克·阿奇博尔德的可爱 SVGOMG。

但是，我一辈子都想不出在安装新的 ServiceWorker 后如何更新页面。无论我做什么，我的页面都停留在旧版本上，只有硬刷新 (Cmd-Shift-R) 才能修复它。 1) 关闭选项卡、2) 关闭 Chrome 或 3) location.reload(true) 的任何组合都不会提供新内容。

我有一个 super simple example app 主要基于 SVGOMG。在安装时，我使用 cache.addAll() 缓存了一堆资源，如果当前版本的主版本号与活动版本号不匹配（基于 IndexedDB 查找），我也会执行 skipWaiting()：

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 的碰撞会导致 worker 在刷新时立即安装，而从 v1.0.0 到 v2.0.0，它会等待选项卡关闭并重新打开，然后再重新打开安装。

回到主线程，我在注册后手动更新 ServiceWorker——否则页面甚至都不会收到有可用新版本 ServiceWorker 的备忘录（奇怪的是，我在ServiceWorker 文献):

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

但是，无论我是将版本增加到 1.0.1 还是 2.0.0，提供给主线程的内容总是卡在旧版本的页面上 ("My version is 1.0.0")。

我在这里有点难过。我希望为 ServiceWorker 版本控制找到一个优雅的 semver-y 解决方案（因此我使用 require('./package.json').version），但在我当前的实现中，用户永远停留在页面的旧版本上，除非他们硬刷新或手动清除所有数据。 :/

Answer 1

外部：使用 chrome://serviceworker-internals/

停止并注销服务工作者

来自 service worker 本身的内部：https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim and https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

Answer 2

发现问题 – 您需要避免在 ServiceWorker JS 文件本身上 any 缓存 headers。设置缓存为max-age=0立马解决了问题：https://github.com/nolanlawson/serviceworker-update-demo/pull/1

为 Jake Archibald 让我直截了当干杯：https://twitter.com/jaffathecake/status/689214019308224513

Answer 3

在 Chrome Canary 中，您可以进行各种 Service Worker 分析和管理，例如取消注册，在“应用程序”选项卡中清除：

将其与 chrome://devices/ 配对以使用您的物理设备进行调试。

ServiceWorker更新后如何刷新页面？

How to refresh the page after a ServiceWorker update?

javascript

service-worker

progressive-web-apps