伴随着移动设备的普及，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 示例：
-- -------------------- ---- ------- -- --- ----------- ----------------------------------------------- -- - ------------------------------------------------------------ -- - -- -------------- - -- ----- -------------------------- - ---- - -- ------------ ------------------------------------ ---------------- ---- -- --------------------- -- - ----------------------------- -- ------------ -- - -------------------- --- - --- ---展开代码
上述代码中，通过 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，用户授权后才能进行展示：
-- -------------------- ---- ------- -- -- ---------- ------------------------------------------------ -- - ------------------------ --- -- ---- -- ------------------------ --- ---------- - --- -------------------- -------- - ----- ----- -- - ---- --------------- ----- -------------------------- --- -展开代码
在 Safari 中，通知消息必须是 HTTPS 环境下的 Web App，且必须经过用户的许可或者具有合法的交互操作。
在浏览器中的展示
Push Notification 通知消息在浏览器中的展示分为三种情况：用户当前在浏览器页面内、用户当前在系统使用其他应用程序、用户当前处于系统锁屏状态。各种情况下的通知消息展示方式如下：
用户当前在浏览器页面内
推送消息时，如果用户的浏览器页面有打开，则当前页面会同时收到消息并在通知栏中展示通知。
用户当前在系统使用其他应用程序
如果用户当前不在浏览器页面，则系统将自动弹出通知消息，通知用户有新消息到达。
用户当前处于系统锁屏状态
如果用户当前处于系统锁屏状态，则通知栏会展示消息摘要和应用程序图标，同时会提供通知预览功能：
总结
本文介绍了 PWA 如何实现 Push Notification 的方法以及在浏览器中的展示方式，并附有代码示例。在实现 Push Notification 的过程中，需要注意考虑用户体验和隐私安全等方面的问题。推送消息时，尽量给用户提供有价值的内容，最大程度地避免对用户造成骚扰。同时，为了确保用户的隐私安全，推送消息也需要满足浏览器的要求和规定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ae146dadd4f0e0ff7a0c8c
