1

我首先使用服务人员使我的网站脱机。我想在更新内容可用时提示用户刷新页面。我希望用户知道他们正在查看过时的竞争，因此他们可以通过刷新页面来获取最新内容。

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

  1. Mozilla 的 Service Worker 演示

  2. 本文中的方法#3 。

我正在使用 PWABuilder 提供的缓存优先服务工作者。它运行良好，但不会提示用户提供可用更新。

我试图从上面的文章中复制代码，但无法让它工作。

这是我目前使用的 service worker 的 repo。

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

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
4

1 回答 1

0

好吧，您的问题不一定与 Service Worker 有太大关系 :) 如果您仔细查看错误消息（显示在控制台中），您会发现它清楚地告诉您一个名为 reg is not defined 的变量。换句话说，在代码中的某个地方，您试图引用一个名为“reg”但“reg”不存在的变量。

似乎粘贴在您问题中的代码并不是全部，但我怀疑问题出在此处：

listenForWaitingServiceWorker(reg, promptUserToRefresh);

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

于 2019-06-12T15:21:59.933 回答