我首先使用服务人员使我的网站脱机。我想在更新内容可用时提示用户刷新页面。我希望用户知道他们正在查看过时的竞争,因此他们可以通过刷新页面来获取最新内容。
这些实现是一个很好的例子:
本文中的方法#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