[PWA] Show Notifications when a Service Worker is Installed or Updated

最新推荐文章于 2025-09-06 14:11:03 发布

weixin_30610755

最新推荐文章于 2025-09-06 14:11:03 发布

阅读量44

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/9255560.html

本文介绍如何使用Service Worker在新版本应用安装及激活时通知用户。通过注册Service Worker并监听其状态变化，在后台更新完成时显示提示消息，告知用户可刷新页面以激活最新版本。

Service Workers get installed and activated in the background, but until we reload the page they don’t take full control in the app. Showing a notification is a good way to let the user know that there is a new version of the app.

In this lesson I’ll show you how you can show a notification when a new service worker is installed and activated.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(reg => {
    reg.onupdatefound = () => {
      const sw = reg.installing;

      sw.onstatechange = () => {
        if (sw.state === 'installed') {
          if (navigator.serviceWorker.controller) {
            app.message = 'New version is available. Reload to activate it.'
            app.show=true
          } else {
            app.message = 'Content is now available offline'
            app.show=true
          }
        }
      }
    }
  })
}