Web Push API 是一种在浏览器中推送消息的方式，它通过一些简单的 JavaScript API 来让你的 PWA 应用程序发送推送消息，而无需依赖于本地推送解决方案。在本文中，我们将介绍如何使用 Web Push API 来在 PWA 中推送通知，并实现在后台运行时推送通知。
Web Push API 基础
Web Push API 是一种基于浏览器的网页推送服务，通过该服务，用户可以订阅用来发送推送通知的服务器推送服务，并在后台接收诸如新邮件、新消息等通知。要使用此 API，你需要知道以下基础知识：
注册 Service Worker
Web Push API 依赖于 Service Worker，即网页在后台运行的 JavaScript。使用 Service Worker，网页可以像后台应用程序一样注册事件、预缓存文件等。要注册 Service Worker，需要在 HTML 中包含以下代码：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-- ----
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-- ------
-------------------------- ------------ ------- -- -----
---
---
-在这里，我们首先检查浏览器是否支持 Service Worker，然后加载 Service Worker 脚本并进行注册，注册成功后将输出一个消息。
订阅通知
使用 Web Push API，用户可以订阅你的应用程序的推送服务。要订阅通知，请使用以下代码：
-- -------------------- ---- -------
---------------------------------------------------------------------- -
----------------------------------------------------------------- ---------------------------------- -
-- ----
-------------------------- -----------------------
------------------------ -
-- ----
------------------------- --------- -------
---
---在这里，我们获取了 Service Worker 注册对象，并使用 pushManager 对象来订阅推送通知服务。订阅成功后，将输出一个消息。
发送通知
使用 Web Push API，你可以在服务器端发送一条推送通知给订阅者。以下是发送推送通知的基本代码：
-- -------------------- ---- -------
--------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
------ ------ -------
----- ----- -- - ---- --------------
----- ----------------
---- ---
--
---在这里，我们使用 fetch API 发送请求，向服务器端发送一条要推送的通知，通知包括标题、正文、图标和链接。
PWA 中的 Web Push API
到目前为止，我们已经了解 Web Push API 的基础知识和使用方法。现在让我们看看如何在 PWA 应用程序中使用 Web Push API。
安装 PWA
首先，你需要创建一个 PWA 应用程序。你可以使用 Google 的 Lighthouse 工具来检查你的 PWA 应用程序是否符合标准。
实现推送通知
在 PWA 应用程序中，你需要实现一个响应推送通知的 Service Worker。以下是实现推送通知的基本代码：
-- -------------------- ---- -------
----------------------------- --------------- -
----------------
----------------------------------------- ------- -
----- ----- -- - ---- ------------ ---- -- --- -----
----- ----------------
---- --------
--
--
---在这里，我们注册了一个 'push' 事件处理函数，当服务端向客户端推送消息时自动触发。我们可以通过self.registration.showNotification()方法来生成推送消息。
订阅通知
接下来，你需要在客户端订阅 PWA 应用程序的推送通知。以下是基本代码：
-- -------------------- ---- -------
-----------------------------
---------------------------- -
------ -------------------------------------------
--
---------------------------- -
-- -------------- -
-- -----
- ---- -
------ ---------------------------------------------------- ---------------------------------- -
-- ------
---
-
--
-------------------- -
-- ------
---在这里，我们首先从客户端获取 Service Worker 注册对象，然后使用 pushManager 对象来获取订阅，并注册新的订阅。如果订阅已经存在，则不进行任何操作。最后，我们将捕获任何订阅错误。
推送通知
当你要向客户端推送消息时，你可以使用以下基本代码：
-- -------------------- ---- -------
--------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
------ ------ -------
----- ----- -- - ---- ------------ ---- -- --- -----
----- ----------------
---- --------
--
---在这里，我们向服务器端发送一条要推送的通知，通知包括标题、正文、图标和标签。
总结
到目前为止，我们已经了解了 Web Push API 的基础知识，并在 PWA 应用程序中实践了它。使用 Web Push API，你可以更加方便地向客户端发送推送消息，并在 PWA 应用程序中实现更优秀的用户体验。如果你想进一步了解 Web Push API，可以查看 MDN 上的官方文档。
完整代码示例：
-- -------------------- ---- -------
----------------------------- --------------- -
----------------
----------------------------------------- ------- -
----- ----- -- - ---- ------------ ---- -- --- -----
----- ----------------
---- --------
--
--
---
-----------------------------
---------------------------- -
------ -------------------------------------------
--
---------------------------- -
-- -------------- -
-- -----
- ---- -
------ ---------------------------------------------------- ---------------------------------- -
-- ------
---
-
--
-------------------- -
-- ------
---
--------------------------- -
------- -------
-------- -
--------------- ------------------
--
----- ----------------
------ ------ -------
----- ----- -- - ---- ------------ ---- -- --- -----
----- ----------------
---- --------
--
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7576c48841e98943d84e1