Web App 如何通过 PWA 技术实现本地推送
PWA 技术是在移动 Web 开发领域中越来越受欢迎的解决方案，它通过像 Native App 一样的离线缓存、Web Push 通知、及 Add to Home Screen 等特性，带来了更好的用户体验。
其中，Web Push 技术为我们提供了一种新的方式来跟用户进行互动，也成为了 PWA 技术中最受欢迎的一种特性之一。
那么，本文主要就是带领大家来了解如何通过 PWA 技术实现 Web App 中的本地推送，并给出示例代码。
一、Web Push 技术简介
Web Push 技术是一种基于浏览器的通知服务，可以让 Web 应用程序发送通知消息到用户设备上，即使用户没有打开应用程序也能够收到通知。这种通知消息可以包含标题、图标、描述等信息，一般用来提示用户更新、新内容出现等事件。
例如，我们可以在 Gmail 邮箱中，即使不打开应用程序，也能够收到新邮件的通知。这种通知是 Web Push 技术在背后帮我们完成的。
二、如何在 Web App 中使用 Web Push
实现 Web Push 主要需要以下步骤：
- 向浏览器请求订阅通知
在 Web App 中，我们需要向浏览器请求订阅通知。这个订阅的过程一般会弹出一个类似“Are you sure you want to subscribe to notifications？”的提示框，提醒用户是否同意接收通知。
- 向服务端发送订阅信息
当用户同意接收通知后，需要将用户的订阅信息发送到我们的服务端存储起来，这些信息包括唯一的订阅 ID 和消息订阅地址等。
- 服务端推送消息
在服务端有新消息需要推送的时候，会根据订阅信息发送给相应用户的浏览器，浏览器在接收到消息后会弹出通知框，通知用户。
以上就是基本的 Web Push 技术实现流程，接下来我们来看如何将其应用到我们的 Web App 中。
三、如何实现本地推送
在以上的流程中，服务端推送消息的时候，我们可以通过以下的方式来实现本地推送：
- 使用 Web Notification API
在服务端推送消息到浏览器后，浏览器会自动通过 Web Notification API 弹出通知框，其实现过程比较简单：
-- -------------------- ---- -------
-------- ------------------ -
------------------------------------------------------ -
--------------------
-- ------- --- --------- -
----------------------- ------- -------- ----- - ---------
-------
-
-- ------- --- ---------- -
---------------- ---------- ------- --- -------------
-------
-
--------------------------------------------------------- -
---------------------------------------- -------- -
----- ------ -------
----- ------------------------------------------------
-------- ----- ---- ---- ---- ---- ---- -----
---- ------------------
---
---
---
-以上代码中，我们通过 navigator.serviceWorker.ready 来获取当前设备的 Service Worker，然后发送一个通知消息，showNotification 方法中可以配置通知的标题、内容、图标等。调用 Notification.requestPermission 方法会弹出请求浏览器授权的对话框。
注意，Web Notification API 发送的通知框只会展示一次，不会像 Native App 那样在系统通知栏中反复出现，因此 Web App 推送消息的适用场景需要更加谨慎。
- 使用第三方库
另外，我们也可以使用一些第三方的推送服务，例如 OneSignal、Pusher 等。这些服务会提供一些 JavaScript API 帮助我们完成 Web Push 订阅、消息推送等功能。
如使用 OneSignal，我们需要在页面头部加入一段 JavaScript 代码：
-- -------------------- ---- -------
----------------------- -
------ --------------
------------- ------
------------- -
------- -----
--
-------------- -
---------- -
-------- -----
-------------- ----- ---- -- ---- --- ------------- --- --- ------ ---- --- ----------
----------------- --------
----------------- --- -------
-
-
----其中，appId 为在 OneSignal 注册应用时生成的应用 ID，autoRegister 为是否自动注册订阅，notifyButton 为提示用户的订阅按钮，promptOptions 为根据需要改变弹出界面。
在用户允许订阅通知后，我们可以使用第三方库的 API 发送一条推送消息：
OneSignal.push(["sendNotification", {
"headings": {"en": "News Update"},
"contents": {"en": "Check out our latest news at the news section!"},
"include_player_ids": ["PLAYER_ID_1", "PLAYER_ID_2"]
}]);include_player_ids 为指定要发送推送的用户 ID。
我们也可以使用 Pusher，在 Web App 中轻松集成实时通信功能：
-- -------------------- ---- -------
-- -- ------ ---
------ ------ ---- -----------
--- ------ - --- ---------------------- -
-------- -------------------
---------- ----
--
-- ------
--- ------- - ------------------------------------------------
-- ----
------------------------ -------------- -
-----------------
--以上代码中，我们通过 pusher.subscribe 方法订阅一个私有频道，绑定 my-event 事件出发后，执行 console.log 输出事件传递的数据。
四、总结
本文主要介绍了 Web App 如何通过 PWA 技术实现本地推送。我们首先了解了 Web Push 技术的基本原理，然后介绍了 Web App 中如何应用 Web Push 技术实现本地推送，最后简要介绍了使用第三方推送服务的一些细节。
通过本文的学习，相信大家已经可以掌握 Web App 中使用 PWA 技术实现推送消息的方法，并能够灵活运用到自己的开发过程当中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ad345648841e989495cdcf