Web Push Notification 是一种基于浏览器的消息推送系统，它可以让网站的用户在浏览器关闭的情况下，也能够接收到站内提醒。这对于 PWA 应用来说，是一种非常实用的功能，能够提高用户的体验度，增强用户的黏性。
本文将介绍如何在 PWA 应用中，使用 Web Push Notification。你将学到如何操作 service worker，如何使用 web push API 和如何处理推送事件。
1. 准备工作
在开始之前，我们需要准备好一些必要的条件：
- 一个支持 HTTPS 的网站
- 一个服务端
- 一个 VAPID 公钥/私钥对
其中，HTTPS 是必要的条件，因为 Web Push Notification 只在 HTTPS 网站中工作。服务端通过推送 API 将消息发送给浏览器，VAPID 公钥/私钥对是用于身份认证的。
2. 注册 Service Worker
Service Worker 是 Web Push Notification 的基础，它可以让我们在用户离线时依然能够接收到消息。我们需要在 PWA 应用中注册 service worker，并且监听 push 事件。
-- -------------------- ---- -------
------------------------------------------------------
---------------------------- -
-------------------- ------ ------------ ------------ -------------
------------------------------------
---------------- -----
--------------------- --------------------------------
--
---------------------------- -
----------------- -- ------------- --------------
---
--
---------------------- -
-------------------- ------ ------------ --------- -------
---上述代码中，我们注册了一个 service worker，并向其订阅 push 事件。订阅时，我们需要指定 applicationServerKey，它是 VAPID 公钥的二进制格式。
3. 向服务端发送 Push Subscription 对象
当我们订阅 Push 事件后，浏览器会生成一个 Push Subscription 对象，它包含了一些必要的信息，如 endpoint，auth 和 p256dh 等。我们需要将该对象发送到服务端，以便服务端向浏览器发送消息。
fetch('/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(subscription)
})4. 向推送服务器发送消息
在得到 Push Subscription 对象后，我们可以向推送服务器发送消息。推送服务器有 Google Cloud Messaging，Mozilla Notification Group 等，我们可以根据自己的需要选择。
以下是向 Mozilla Notification Group 发送消息的示例代码：
-- -------------------- ---- -------
----- -------- - ----------------------
----- ---- - -----------------------
----- ------ - -------------------------
----- --------------------- - -------------- -- -
----- ------- - ------------- - ------------------- - -- - ---
----- ------ - ------------- - --------
-------------- ----
-------------- -----
----- ------- - --------------------
----- ----------- - --- ---------------------------
--- ---- - - -- - - --------------- ---- -
-------------- - ----------------------
-
------ ------------
--
----- ------- - -
------ ---------
----- --- -------
--
----- ------- - -
--------------- -------------------
---------------- -------- -----------------------------
--
----- ---- - ----------------
------------- -
------ --------------
----- -------------
----- -----------
--
---------- --------
---
---------------------------------------------------------- -
------- -------
-------- --------
----- ----
---------------- -- -
----------------------
-------------- -- -
-------------------
---5. 处理推送事件
当浏览器接收到消息时，会触发 push 事件，我们需要在 service worker 中监听该事件，并做出响应。
以下是处理推送事件的示例代码：
-- -------------------- ---- -------
----------------------------- --------------- -
----------------- ----------- -------
----- ----- - ---------
----- ------- - -
----- ------------------
----- -----------
--
--------------------------------------------------------- ----------
---上述代码中，我们监听了 push 事件，并在收到消息后，通过 showNotification 方法展示消息。
6. 总结
本文介绍了如何在 PWA 应用中使用 Web Push Notification。虽然实现过程中有一些繁琐的细节，但理解了基本原理后，我们还是可以很容易地实现该功能。Web Push Notification 能够提高用户体验度，增强 PWA 应用的黏性，是一种非常实用的功能。如果你的应用还没有添加该功能，不妨试一试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c286c183d39b48816807a9