随着 PWA 技术的逐渐普及，Web 推送通知已经成为了吸引用户并提高用户留存率的重要手段之一。本文将详细介绍 PWA 的 Web 推送通知的实现方式，并提供示例代码和深度学习资料供读者参考。
什么是 Web 推送通知
Web 推送通知是一种在浏览器外部展示的消息，可以展示在用户的操作系统通知栏中，无论用户当前是否浏览网站。Web 推送通知的目的是为了向用户推送相关信息，如新消息、重要通知、活动信息等。
与传统的浏览器通知不同的是，Web 推送通知不需要用户一直保持浏览器的打开状态，当用户关闭浏览器时，Web 推送通知仍然可以在操作系统通知栏中发出提醒。这种方式大大提高了用户的便利性和留存率。
PWA 的 Web 推送通知实现方式
对于 PWA 应用，Web 推送通知是实现的重要功能之一。
第一步：注册推送服务
在向用户发送 Web 推送通知之前，你需要先在服务器端注册一个推送服务。这个服务通常是由一个独立的推送服务器来负责维护的。推送服务器可以通过实现不同的协议，如 Websocket、 HTTP2 等来与浏览器进行通信。
常见的推送服务器有 Firebase Cloud Messaging、Pusher、OneSignal 等。在本文中，我们将以 Firebase Cloud Messaging 为例，介绍如何实现 Web 推送通知。
第二步：请求推送许可
当一个用户首次访问你的 PWA 应用时，你需要请求用户许可，让用户允许你的应用向他们推送通知。为了请求许可，你需要使用浏览器的 Notification API。
Notification API 的用法非常简单，只需要在 JavaScript 中调用 Notification.requestPermission() 函数来请求许可：
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
console.log(permission);
});
}在用户点击允许之前，permission 的值是 'default'。 在用户允许时，permission 的值是 'granted'，否则是 'denied'。
第三步：订阅推送服务
一旦用户允许了你的应用推送通知，你需要订阅推送服务并获取一个订阅对象。这个订阅对象包含了一些关键信息，如订阅 ID、公钥、私钥等。
具体来说，订阅服务的步骤如下：
在客户端上调用
navigator.serviceWorker.register()注册 Service Worker。在
ServiceWorkerRegistration.showNotification()函数中定义你要展示的通知信息。使用
ServiceWorkerRegistration.pushManager.subscribe()函数订阅推送服务，并存储订阅对象以备后续使用：-- -------------------- ---- ------- -------------------------------------------------------------- -- - ------------------------------------------------- ---------------- ----- --------------------- -------------------------------------------------- -- -------------------- -- - -- ------- ------------ ------ -- ------------ -- - ----------------- ------------ -------- ----- --- ---
第四步：向订阅对象发送推送通知
订阅推送服务后，你需要在服务器端调用推送服务的 API，将推送通知发送给订阅对象。推送通知可以是一个简单的文本消息、一条 HTML 消息或者一条包含自定义数据的 JSON 消息。
在 Firebase Cloud Messaging 中，你需要调用 messaging.send() 函数向订阅者发送推送消息：
-- -------------------- ---- -------
----------------
--- ----------------------
------------- -
------ ---------
----- ----- -- - ---- ---------------
----- ----------------------------------
------------- ------------------------
-
---第五步：处理推送通知
当用户收到推送通知时，他们可以选择单击它来打开你的 PWA 应用程序。为了处理这个事件，你需要使用 Service Worker 的 notificationclick 事件来监听用户单击通知的操作。
self.addEventListener('notificationclick', (event) => {
event.notification.close();
// 在这里插入你的逻辑
// 通常你会在这里打开你的 PWA 应用
});示例代码
下面是一个简单的示例代码，演示如何使用 Firebase Cloud Messaging 发送 Web 推送通知：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- ------------ ----------------
-------
------
------- ---- ------------ -------------
------- ---------------------------------------
------- ------------------------------------------------------------------------
------- ------------------------------------------------------------------------------
--------
----- -------------- - -
------- -----------------
----------- ---------------------
---------- --------------------
-------------- ------------------------
------------------ -------------------
------ ----------------
-------------- -----------------------
--
---------------------------------------
----- --------- - ---------------------
----------------------------- -- -
-------------------- --------- -- ---------
----- ----------------- - ---------------------------
----- ------------------- - -
----- --------------------------
----- --------------------------
------------- ---------------------------------
--
----------------------------------------------------- ---------------------
---
-------- --------------- -
-----------------------------
-------- -- -
----------------------- -----------
------ ---------------------
--
------------- -- -
--------------------- -------
-- -----------
--
------------ -- -
----------------------- --------- -----
---
-
----- --------------- - -------------------------------------------
----------------------- - --------------
---------
-------
-------总结
Web 推送通知是 PWA 技术中一个重要而且非常实用的功能。本文介绍了 Web 推送通知的实现方式，包括注册推送服务、请求许可、订阅推送服务、发送推送通知以及处理推送通知等步骤，并提供了一个基于 Firebase Cloud Messaging 的示例代码。
了解 PWA 的 Web 推送通知不仅可以为你的项目提供更好的用户体验，也可以帮助您在日益竞争的市场中更好地脱颖而出。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470863e968c7c53b0ea8666