推荐答案
// www.javascriptcn.com code example
// 注册 Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// 通知用户有更新可用
alert('新版本可用，请刷新页面以更新。');
}
}
};
};
})
.catch(error => {
console.error('Service Worker 注册失败:', error);
});
}本题详细解读
1. 注册 Service Worker
首先，我们需要在页面中注册 Service Worker。Service Worker 是 PWA 的核心技术之一，它可以在后台运行，拦截网络请求、缓存资源等。通过注册 Service Worker，我们可以监听其更新事件。
2. 监听更新事件
在 Service Worker 注册成功后，我们可以通过 registration.onupdatefound 事件来监听是否有新的 Service Worker 被安装。当检测到有新的 Service Worker 时，我们可以进一步监听其状态变化。
3. 检测新版本
当 Service Worker 的状态变为 installed 时，表示新版本已经安装完成。此时，我们可以通过检查 navigator.serviceWorker.controller 是否存在来判断当前页面是否由 Service Worker 控制。如果存在，说明有新的版本可用。
4. 通知用户
一旦检测到新版本可用，可以通过弹窗、Toast 通知等方式告知用户。示例中使用 alert 来简单通知用户，实际项目中可以使用更友好的 UI 组件来提示用户刷新页面以应用更新。
5. 刷新页面
用户收到通知后，可以选择刷新页面以加载新版本。刷新后，新的 Service Worker 将接管页面，用户将体验到更新后的内容。
通过以上步骤，我们可以有效地通知用户 PWA 有更新可用，并引导用户刷新页面以应用更新。