Service Worker 在缓存更新时重新加载页面答案

【问题标题】：Service Worker reload page on cache updateService Worker 在缓存更新时重新加载页面
【发布时间】：2017-01-06 09:42:50
【问题描述】：

我正在使用 React+Service Worker+offline-plugin 为网站创建一个具有持久缓存的 Service Worker。

我想告诉用户什么时候有新版本存储在cach中并建议刷新页面但我不知道如何引用Service Worker以及我应该听什么事件（Service Worker是由npm自动创建的“离线-插件”）。

今天的标准流量：

网站管理员发布网站 (V1)
用户访问网站
当 Service Worker 将页面存储在持久缓存中时，他看到了网站 (V1)
站长发布新版本（V2）
当 Web Worker 在后台加载新版本 (V2) 时，用户重新访问网站时会看到来自持久缓存的旧版本。
当用户刷新页面时，他将看到网站版本 2

新流程应该是：

V2 在后台加载完成
弹出消息通知用户刷新页面以获取新版本。

【问题讨论】：

没有足够的细节。顺便说一句，当您从 webworker 获得结果时，您可以使用 onmessage 事件，您可以在单击警报重新加载页面时显示警报
您好，我已经更新了描述。

标签： javascript web-worker service-worker offline-caching

【解决方案1】：

Service Worker 是一种特殊形式的 webworker。
当您注册一个软件时，例如在 serviceWorkerRegistry.js 中，您将可以访问多个事件。
例如

serviceWorkerRegistry.js:

if (!navigator.serviceWorker) return;

navigator.serviceWorker.register('/sw.js').then(function(reg) {
    if (!navigator.serviceWorker.controller) {
      return;
    }

    if (reg.waiting) {
      console.log("inside reg.waiting");
      return;
    }

    if (reg.installing) {
      console.log("inside reg.installing");
      return;
    }

    reg.addEventListener('updatefound', function() {
      console.log("inside updatefound");
      let worker = reg.installing;
      worker.addEventListener('statechange', function() {

        if (worker.state == 'installed') {
          console.log('Is installed');
          // Here you can notify the user, that a new version exist.
              // Show a toast view, asking the user to upgrade.
              // The user accepts.
              // Send a message to the sw, to skip wating.
              worker.postMessage({action: 'skipWaiting'});

        }
      });
    });
  });

sw.js:
// You need to listen for a messages
self.addEventListener('message', function(event) {
  if (event.data.action === 'skipWaiting') {
    self.skipWaiting();
  }
});

现在离线插件的问题是，它会为你创建 sw，这样就更难理解 sw 在做什么了。
我会说，最好创建自己的 sw，这样您可以更好地理解功能。 this插件可以帮你缓存。

【讨论】：

【解决方案2】：

您应该查看以下链接： Service Worker life cycle - updates

您还可以通过运行以下命令手动更新您的 service worker：

navigator.serviceWorker.register('/sw.js').then((reg) => {  
  // sometime later…     
  reg.update(); 
});

您可以在 Service Worker 的 install 事件中得知您已准备好新版本（但尚未激活）。
你知道你在 service worker 的 activate 事件的处理程序中加载了一个新版本。

【讨论】：