什么是 PWA
PWA 即是 Progressive Web App（渐进式 Web 应用），是一种全新的网页应用模式。通过使用最新的 Web 技术，PWA 实现了近乎原生应用的体验，如快速响应、离线缓存、推送通知等。
PWA 中的 Push 服务
Push API 是 PWA 中提供的一种推送通知服务，可以通过浏览器本地系统发出提示、声音、振动等来让用户知道自己有未读信息。Push API 有两个主要的角色：
- Push 服务，负责向 Push API 发送数据（即 Push 消息）
- Service Worker，负责推送消息到浏览器通知区域，或者在必要时唤醒前端应用。
PWA 中如何使用 Push 服务
以下是 PWA 中利用 Push 服务提供触发事件的步骤：
- 注册 Service Worker
通过以下代码 snippet 注册 Service Worker：
-- -------------------- ---- -------
------------------ -- -----------
------------------------------------------ -
------ ---
----------- -- -
-------------------- ------ --------------
------------ -- -
-------------------- ------ ------------ ------- - - -----
---
-其中，scope 参数是 Service Worker 掌管的路径。一般情况下，我们使用 '/'，标识整个站点。
- 订阅 Push 服务
在 Service Worker 注册成功后，我们需要让用户订阅 Push 服务以便接收消息。以下是订阅 Push 服务代码：
-- -------------------- ---- -------
------------------------------------------ ------- -----
------------------ -- -
------------------------------------
---------------- -----
--------------------- -------------------------------------
-------------------- -- -
----------------- -- ----------- - - ------------------------------
-------------- -- -
------------------- ------------ ------ -- -------
---
---userVisibleOnly 参数设置了是否在消息出现时弹出通知，并且 applicationServerKey 参数则是用于接收通知的公钥。
其中 urlBase64ToUint8Array 方法将使用者全局唯一的 publicVapidKey 值进行解码解析，返回 Uint8Array 类型的 Base64 URL 编码值。
- 发送 Push 消息
在用户订阅 Push 服务后，就可以发送 Push 消息了。以下是发送 Push 消息的代码：
-- -------------------- ---- -------
----- ---- - --------------------------------
------------------------------ -- -- -
-- ---- ------- ---- --- -- ------
------------------ -
------- -------
----- ----------------
-------- -------- ---- --------
------------- ------------
---
-------- -
--------------- ------------------
-
---
---在上面的代码中，我们通过点击 .send 按钮来触发发送事件。向服务器端发送请求，消息响应为 Trigger push event!。
发送 Push 消息，意味着向 Push 服务发送请求，请求的内容是消息及订阅地址。以下是向 Push 服务发送请求代码：
-- -------------------- ---- -------
--------------------- ----- ----- ---- -- -
----- ------------ - ----------------------
----- --- - -----------------
----- ------- - ---------------------- ----- -------------- -------- ------
-------------------------------------- -------- ----------- -- -
------------------------------ ----- ----- --------- -----------------
------------ -- -
------------------ --------- -- -----
---
---在代码中，webpush 模块有助于与 Push 服务 通信，发送消息的操作可以使用相同的样式模板。注意，这里需要将消息内容 JSON.stringify。
总结
PWA 应用中的 Push 服务可以让你的应用实现通知功能，为用户提供更好的体验。使用 Push 服务进行推送，可以让你对用户的喜好和需求有更深入、更精细的了解，推送更多的有价值的内容。
在使用 Push 服务时，还需要注意 Push 事件的有效期、每个应用程序的 Push 配额、可用的硬件资源等因素，因此这需要开发人员谨慎地考虑 Push 服务的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486ea1448841e989458c275