PWA 实现 Push Notification 的方法及在浏览器中的展示-JavaScript中文网-JavaScript教程资源分享门户

伴随着移动设备的普及，Web 应用逐渐成为人们生活必备的组成部分。PWA（Progressive Web Apps）作为 Web 应用的一种新形态，正在逐渐被广泛认可和使用。其中，Push Notification 作为衔接 Web 应用和用户的桥梁，也在 PWA 中扮演着重要的角色。本文将会介绍 PWA 实现 Push Notification 的方法以及在浏览器中的展示，并附有代码示例。

实现 Push Notification

PWA 实现 Push Notification 主要依赖于两个 API：Push API 和 Notification API。

其中，Push API 负责推送消息给用户的浏览器，而 Notification API 则负责在浏览器中展示通知消息。两者的相互配合才能实现完整的 Push Notification。

Push API

Push API 提供了向用户浏览器推送消息的能力。具体而言，它提供了以下两个主要对象：

PushManager：推送管理器，负责管理订阅信息以及推送消息。
PushSubscription：推送订阅，代表了浏览器对某个服务器的消息推送订阅。

下面是一个简单的 PushManager 示例：

// 初始化 PushManager
navigator.serviceWorker.ready.then(registration => {
  registration.pushManager.getSubscription().then(subscription => {
    if (subscription) {
      // 已经订阅过
      console.log(subscription);
    } else {
      // 没有订阅过，发起订阅请求
      registration.pushManager.subscribe({ userVisibleOnly: true })
        .then(newSubscription => {
          console.log(newSubscription);
        })
        .catch(error => {
          console.warn(error);
        });
    }
  });
});

上述代码中，通过 navigator.serviceWorker.ready 获取到 Service Worker 的 registration，再通过 registration.pushManager 获取到 PushManager。随后，使用 pushManager.getSubscription() 来检查是否已经订阅过。如果已经订阅过，直接用 console.log() 输出订阅信息；否则，使用 pushManager.subscribe() 来发起订阅请求，并将 userVisibleOnly 设置为 true，表示当前仅推送可见的通知。

Notification API

Notification API 负责在浏览器中展示通知消息。为了保证用户体验和隐私安全，现代浏览器对通知消息的展示和交互都有了更加精细的规定。

在 Chrome（版本 80+）和 Edge（版本 84+）中，通知消息必须经过用户的许可才能展示。具体而言，需要在页面中请求 permission，用户授权后才能进行展示：

// 请求 permission
Notification.requestPermission().then(permission => {
  console.log(permission);
});

// 展示通知
if (Notification.permission === "granted") {
  new Notification("Hello, world!", {
    body: "This is a test notification.",
    icon: "/images/icon-192x192.png"
  });
}

在 Safari 中，通知消息必须是 HTTPS 环境下的 Web App，且必须经过用户的许可或者具有合法的交互操作。

在浏览器中的展示

Push Notification 通知消息在浏览器中的展示分为三种情况：用户当前在浏览器页面内、用户当前在系统使用其他应用程序、用户当前处于系统锁屏状态。各种情况下的通知消息展示方式如下：

用户当前在浏览器页面内

推送消息时，如果用户的浏览器页面有打开，则当前页面会同时收到消息并在通知栏中展示通知。

用户当前在系统使用其他应用程序

如果用户当前不在浏览器页面，则系统将自动弹出通知消息，通知用户有新消息到达。

用户当前处于系统锁屏状态

如果用户当前处于系统锁屏状态，则通知栏会展示消息摘要和应用程序图标，同时会提供通知预览功能：

总结

本文介绍了 PWA 如何实现 Push Notification 的方法以及在浏览器中的展示方式，并附有代码示例。在实现 Push Notification 的过程中，需要注意考虑用户体验和隐私安全等方面的问题。推送消息时，尽量给用户提供有价值的内容，最大程度地避免对用户造成骚扰。同时，为了确保用户的隐私安全，推送消息也需要满足浏览器的要求和规定。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ae146dadd4f0e0ff7a0c8c