Question

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

我想告诉用户什么时候新版本存储在cach中并建议刷新页面但我不知道如何引用Service Workerand我应该听哪个事件（Service Worker是由npm自动创建的）＆＃34;离线插件＆＃34;。）

今天的标准流程：

网站管理员发布网站（V1）
用户访问网站
他看到网站（V1），而Service Worker将页面存储在持久缓存中
网站管理员发布新版本（V2）
当web worker在后台加载新版本（V2）时，用户重新访问从持久缓存中看到旧版本的站点。
当用户刷新页面时，他会看到网站版本2

新流程应该是：

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

Answer 1

服务人员是网络工作者的专业形式注册sw时，例如在serviceWorkerRegistry.js中，您可以访问多个事件。
e.g。

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插件可以帮助您缓存。

Answer 2

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

您还可以通过运行以下内容手动更新服务工作者：

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

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

服务工作者重新加载缓存更新页面

2 个答案: