将“更新可用，请刷新”提示添加到PWABuilder缓存-第一服务工作者

Question

我首先让我的网站离线与服务工作者。当更新的内容可用时，我希望提示用户刷新页面。我希望用户知道他们正在查看过时的竞争，这样他们就可以通过刷新页面获得最新的内容。

这些实现就是一个很好的例子：

1. Mozilla的服务工作者演示
2. 这篇文章中的第三种方法。

我使用的是PWABuilder提供的缓存第一服务工作者。它运行良好，但不会提示用户进行可用的更新。

我试图从上面的文章中复制代码，但没能让它起作用。

以下是我目前使用的服务人员的回购信息。

我试图添加到服务工作者脚本中的代码：

addEventListener('message', messageEvent => {
  if (messageEvent.data === 'skipWaiting') return skipWaiting();
});

我试图添加到网页中的脚本：

/ reload once when the new Service Worker starts activating
var refreshing;
navigator.serviceWorker.addEventListener('controllerchange',
  function() {
    if (refreshing) return;
    refreshing = true;
    window.location.reload();
  }
);
function promptUserToRefresh(reg) {
  // this is just an example
  // don't use window.confirm in real life; it's terrible
  if (window.confirm("New version available! OK to refresh?")) {
    reg.waiting.postMessage('skipWaiting');
  }
}
listenForWaitingServiceWorker(reg, promptUserToRefresh);

如果我只是将此代码添加到服务工作者和网页中，那么服务工作者的功能就会很好。但是更新提示不起作用。

我在控制台中得到了这个错误：

Uncaught ReferenceError: reg is not defined
    at (index):231

Answer 1

如果仔细查看错误消息(在控制台中显示)，您会发现它清楚地告诉您没有定义一个名为reg的变量。换句话说，在代码中的某个地方，您试图引用一个名为"reg“的变量，但是"reg”并不存在。

似乎你问题中的代码并不是全部，但我怀疑问题就在这里：

listenForWaitingServiceWorker(reg, promptUserToRefresh);

无论如何，错误消息告诉您在html文件的第231行发生问题，所以请检查。