缓存更新上的Service Worker重新加载页面

Question

我正在使用React Service Worker脱机插件为网站创建一个具有持久缓存的Service Worker。

我想告诉用户什么时候cach中存储了新版本，并建议刷新页面，但我不知道如何引用服务工作以及应该听什么事件（服务工作由npm“离线插件”自动创建）。

今天的标准流量：

1. 网站管理员发布网站（V1）
2. 用户访问网站
3. 他查看网站（V1），而服务人员将页面存储在持久缓存中
4. 网站管理员发布新版本（V2）
5. 当web工作者在后台加载新版本（V2）时，用户重新访问站点，从持久缓存中看到旧版本
6. 当用户刷新页面时，他将看到网站版本2

新流量应为：

Answer 1

您应该查看以下链接：服务人员生命周期-更新

您还可以通过运行以下操作手动更新service worker：

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

您可以在服务人员的install事件中判断新版本已准备就绪（但尚未激活）
您知道服务人员的activate事件的处理程序中加载了新版本。

Answer 2

服务工作者是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，这样你可以更好地理解功能。这插件可以帮助你缓存。