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

Question

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

我想要在新版本存储在缓存中时告诉用户并建议刷新页面，但我不知道如何引用Service Worker以及应该监听哪个事件（Service Worker由npm "offline-plugin"自动创建）。

今天的标准流程：

1. Webmaster发布网站（V1）
2. 用户访问网站
3. 当Service Worker将页面存储在持久缓存中时，他会看到网站（V1）
4. Webmaster发布新版本（V2）
5. 用户重新访问网站，从持久缓存中看到旧版本，同时网络工作程序在后台加载新版本（V2）。
6. 当用户刷新页面时，他将看到网站版本2

新流程应该是：

6. V2在后台加载完成
7. 弹出消息提示用户刷新页面以获取新版本。

- Avi Zloof

---

当你从WebWorker得到结果时，可以使用onmessage事件来显示警报。在单击警报时重新加载页面。 - Muhammad Asif Javed

嗨，我已经更新了说明。 - Avi Zloof

Answer 1

Service worker是一种专门的Web Worker。
当您注册一个Service Worker，例如在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，这样你可以更好地理解其功能。 这个 插件可以帮助你进行缓存。

- Hosar

Answer 2

你应该查看以下链接： Service Worker生命周期 - 更新

你也可以通过运行类似下面的命令来手动更新你的service worker：

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

在 Service Worker 的 install 事件中，您可以知道您已经准备好了一个新版本（但尚未激活）。
在服务工作者的 activate 事件处理程序中，您知道已加载了一个新版本。

- Rubinsh