PWA（Progressive Web App）是一种新型的 Web 应用程序，它将传统 Web 应用和原生应用的优点结合在了一起。它具有应用程序的体验，可以离线访问，支持消息推送等特点，为用户提供了更加完美的使用体验。其中，Push API 是 PWA 中实现消息推送的重要组成部分。
Push API 是什么
Push API 是用于向 Web 应用程序推送消息的 JavaScript API，可以实现不依赖浏览器标签的消息推送服务，消息会在用户关闭浏览器时与 Web 应用程序分离，直到用户再次打开。
Push API 主要由以下两部分组成：
- 推送服务：负责将消息推送到客户端。
- Service Worker：在前台和后台执行逻辑，并处理推送消息。
Push API 的应用场景
Push API 可以应用于多种场景中，其中最常见的应用场景包括：
- 新闻、社交等频繁更新内容的应用程序，可以通过消息推送提醒用户。
- 电商等购物应用程序可以通过消息推送推送促销信息和特别优惠信息。
- 金融、股票等实时更新的应用程序可以通过消息推送推送行情信息。
- 游戏等应用程序可以通过消息推送提醒用户下一次游戏时间等信息。
如何使用 Push API 实现消息推送
使用 Push API 实现消息推送需要先进行相关的注册和配置步骤，具体步骤如下：
1. 创建推送服务
首先需要在后台创建推送服务，推送服务需要向每个客户端推送一些唯一标识符，以便客户端可以收到消息。Google 提供了 Firebase Cloud Messaging（FCM）作为推送服务。在 Firebase 控制台中新建一个项目，然后启用 FCM，即可创建一个推送服务。在创建推送服务时，需要分别生成服务器密钥和 Web API Key，这两个 Key 都是用于和客户端建立连接的。
2. 实现 Service Worker
在实现 Service Worker 之前，需要确保浏览器是否支持 Service Worker。Service Worker 主要用于：
- 拦截网络请求，可以将一些网络请求缓存到本地。
- 在后台接收和处理来自推送服务器的消息，可以更新应用程序。
- 用于离线访问，如果用户断开网络连接，仍然可以访问应用程序。
一个常见的 Service Worker 代码如下：
-- -------------------- ---- -------
----------------------------- --------------- -
----------------- ------------ ---------- -------
----------------
---------------------------------------- ------------ ---------- -
----- ------------------
----- ------------------------------------
--
--
---
------------------------------------------ --------------- -
------------------------- --------- -------
---------------------------
----------------
----------------------------------------------
--
---代码中的 push 事件和 notificationclick 事件分别处理推送消息和用户点击通知的操作。在 push 事件中，可以使用 showNotification 方法显示消息通知。在 notificationclick 事件中，可以使用 openWindow 方法打开新窗口，并关闭该通知。
3. 请求用户授权
在 PWA 中实现消息推送需要用户的授权，可以使用 Notification.requestPermission 方法发起请求。在 Service Worker 中，代码如下：
-- -------------------- ---- -------
----------------------------------------------- ---------- -
----------------- ------------ ------ ----- -----------
--------------------------------------------------------------------------- -
---------------------------------------------------- -
------------------------ -------------
-------------------- -
-------------------------- -------- ---
--
---
---
----------------------------------------------- --------------- -
----------------- ------------ ------ ----- ---------- -------
----------------
-----------------------------------------
---------------- -----
--------------------- --------------------------------------
------------------------------ -
------------------------- ------------ --------------
---------------------------------------------- -
------- -------
----- -----------------------------
-------- -
--------------- ------------------
-
-------------------------- -
------------------------- --------
------------------------ -
-------------------- ------ ----------- -------
--
------------------------ -
-------------------- ------------- -------
--
--
---
-------- -------------------------------- -
----- ------- - ------------- - ------------------- - -- - ---
----- ------ - ------------- - ----------------------- ------------------ -----
----- ------- - --------------------
----- ----------- - --- ---------------------------
--- ---- - - -- - - --------------- ---- -
-------------- - ----------------------
-
------ ------------
-在上面的代码中，subscribe 方法需要传入一个具有用户可见性的标准和一个用作公钥的公共服务器密钥。在 Service Worker 中，使用 pushsubscriptionchange 事件来处理推送消息和用户更改通知权限等情况。
总结
本文详细介绍了 PWA 中的 Push API 技术，包括推送服务、Service Worker 和用户授权等。通过使用 Push API 技术，可以实现消息推送功能，提高应用程序服务质量，为用户提供更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652f8df67d4982a6eb0b6193