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

Question

我正在使用 React+Service Worker+离线插件来创建一个具有网站持久缓存的 Service Worker。

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

今天的标准流程：

1. 站长发布网站（V1）
2. 用户访问网站
3. 他看到网站 (V1)，而 Service Worker 将页面存储在持久缓存中
4. 站长发布新版本（V2）
5. 用户重新访问站点时会看到持久缓存中的旧版本，同时 Web Worker 在后台加载新版本 (V2)。
6. 当用户刷新页面时，他将看到网站版本 2

新流程应该是：

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

Answer 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();
  }
});

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