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

Question

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

• 更新ServiceWorker
• ServiceWorker:Web平台的革命
• 杰克阿奇博尔德可爱的SVGOMG.

但是,我不能为我的生活找出如何在安装新的ServiceWorker后更新页面.无论我做什么,我的页面都停留在旧版本上,只有硬刷新(Cmd-Shift-R)才能修复它.1)关闭标签,2)关闭Chrome或3)的组合location.reload(true)不会为新内容提供服务.

我有一个超级简单的示例应用程序,主要基于SVGOMG.在安装时,我使用缓存一堆资源cache.addAll(),skipWaiting()如果当前版本的主要版本号与活动版本的编号不匹配(基于IndexedDB查找),我也会这样做:

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

欢呼杰克阿奇博尔德让我直截了当:https://twitter.com/jaffathecake/status/689214019308224513

Answer 2

外部：使用 chrome://serviceworker-internals/ 停止并取消注册 Service Worker

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