Question

我咨询过很多关于服务工作者的资源：

Updating your ServiceWorker
ServiceWorker: Revolution of the Web Platform
Jake Archibald的可爱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。这适用于ServiceWorker端 - 从v1.0.0到v1.0.1的颠簸导致工作程序立即安装在刷新上，而从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，提供给主线程的内容始终停留在旧版本的页面上（“我的版本是1.0.0”）

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

Answer 1

发现问题 - 您需要在ServiceWorker JS文件本身上避免任何缓存标头。将缓存设置为max-age=0可立即解决问题：https://github.com/nolanlawson/serviceworker-update-demo/pull/1

欢呼Jake Archibald让我直截了当：https://twitter.com/jaffathecake/status/689214019308224513

Answer 2

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

停止和取消注册服务工作者

来自服务工作者本身的内部：https://developer.mozilla.org/en-US/docs/Web/API/Clients/claim和https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting

Answer 3

在Chrome Canary中，您可以执行所有类型的服务工作者分析和管理，例如取消注册，在“应用程序”选项卡中清除：

将其与chrome：// devices /配对，以便与物理设备一起调试。

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

3 个答案: