什么是 PWA？
PWA 是 Progressive Web App（渐进式 Web 应用程序）的缩写。它是一种可以像本地应用一样运行的 Web 应用程序，同时又具备了 Web 应用程序的优势，比如可以在各种设备上通过浏览器来访问，无需像 Native 应用那样需要用户去下载安装等等。PWA 还可以像 Native 应用一样提供体验更好的响应速度、离线访问以及推送通知等功能。目前 PWA 已经成为了前端开发的一个趋势和发展方向。
Web Push API
Web Push API 是一种新的技术，使 Web 应用程序可以在后台运行并向用户推送通知。Web Push API 可以在支持 Service Worker 的浏览器中使用，这包括 Chrome、Firefox、Opera 和 Safari。
实现 PWA 消息推送的流程
1. 生成 VAPID 公钥和私钥
首先，我们需要在服务端生成一个 VAPID 公钥和私钥，通过公钥我们可以推送消息给客户端。可以使用 web-push 这个库来生成 VAPID 公钥和私钥：
npx web-push generate-vapid-keys
执行完上述命令之后，会生成一个 VAPID 公钥和一个 VAPID 私钥，分别为：
Public Key: BJdhU83df6IqCV6hxTrbLnclY_YDXQBHPg12d01XLzZ1X9ZJGHLpLbjHSJ1lrFyW8rYwJIdZZNmfOx7xJkB4AL4 Private Key: cO_fN5j5Q5W-TPMw39Bjbm0u3IHqVEVPWchX0xa2c0M
2. 注册 Service Worker
在客户端需要注册 Service Worker，代码如下：
// index.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('service-worker.js')
.then(() => console.log('Service Worker registered successfully.'))
.catch(error => console.log('Error registering Service Worker:', error));
}3. 接受推送通知
客户端需要监听 Push 事件，并展示推送消息：
-- -------------------- ---- -------
-- -----------------
----------------------------- -------- ------- -
----- ---- - ------------------
----- ------------ - ---------------------------------------------- -
----- -------------
----- ----------
---
------------------------------
---4. 获取订阅信息
获取客户端订阅信息，并将订阅信息传给服务端，代码如下：
-- -------------------- ---- -------
-- --------
----- ------------------------ - ------------ -- -
-- ----- - ------------ --------
--
-- ---------------- -- --------- -- ------------- -- ------- -
------------------------------- -- -- -
-----------------------
------------------------------
------------------ -- -
------------------------
------------------
------------------ -- -
-- ------------- --- ----- -
-- ------
---------------------------------------
- ---- -
-- -------
----- -------------------- - ----------------------
------------------------------------------------------------------------------------------
--
------------------------
------------
---------------- -----
--------------------- ---------------------
--
------------------ -- ----------------------------------------
-
--
------------ -- -------------------- ------- ------------- -- --------
--
------------ -- -------------------- ----------- ------- ------- -- --------
---
-在获取订阅信息时，客户端需要判断是否已经订阅，如果已经订阅，就直接将订阅信息发送给服务端。如果尚未订阅，则需要调用 pushManager.subscribe() 方法来订阅，并将订阅信息发送给服务端。
5. 推送消息
服务端通过保存客户端的订阅信息来实现消息推送功能。在推送消息时，服务端需要向客户端发送一个通知，向客户端的订阅信息发送消息，代码如下：
-- -------------------- ---- -------
-- -------
----- ------- - --------------------
-- ----- -----
----- ---------------- -
------------------------------------------------------------------------------------------
----- ----------------- - ----------------------
-- -------
----- ------------ - -
--------- -----------------
----- -
----- -------------
------- ---------------
--
--
-- -- ----- -----
------------------------
-----------------
-----------------
------------------
--
-- ----
-------
------------------------------- ----------------
------ --------
-------- ---------
----- ------------
---
------------------
--------------------总结
通过 Web Push API，我们可以将推送通知的功能实现到 PWA 应用中。在实现消息推送的过程中，需要注意保护用户隐私，同时确保客户端和服务端之间的订阅关系是正确的，以便实现准确有效的消息推送。如果你正在构建一个 PWA 应用，并且需要进行消息推送功能的实现，那么 Web Push API 将是一个非常棒的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae0c3f48841e9894a0190d