简介
Web 推送通知是一种基于浏览器的推送技术，可以让网站向用户发送消息而无需打开网站。这项技术基于 W3C 标准，目前主流的浏览器都已经支持这一功能。本文将介绍如何在 Hapi.js 中实现 Web 推送通知。
实现步骤
步骤一：获取订阅信息
Web 推送通知需要先获取用户的订阅信息，才能向用户发送消息。获取订阅信息的过程分为以下几步：
- 使用 serviceWorker.register() 方法注册 service worker。
- 在 service worker 中监听 pushManager.subscribe() 方法，获取订阅信息。
- 将订阅信息发送至服务器，保存在数据库中。
步骤二：向客户端发送消息
获取用户订阅信息后，我们就可以向客户端发送消息了。发送消息的过程分为以下几步：
- 在服务器端生成消息。
- 使用 web-push 模块将消息发送至客户端。
- 客户端接收到消息后，触发 service worker 中的 push 事件。
- 在 push 事件中展示消息。
代码实现
服务器端代码
安装 web-push 和 hapi 模块：
npm install web-push hapi
生成 VAPID 公钥和私钥：
web-push generate-vapid-keys --json
VAPID（Voluntary Application Server Identification）是一种基于 HTTP 的消息提示协议，是 Web 推送通知的一种安全机制，用于保护消息的发送和接收。在 Web 推送服务端，需要使用 VAPID 认证来确保消息的来源和安全性。
在服务器端代码中，定义路由和控制器：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - --------------------
----- ------ - --- ------------- ----- ---- ---
----- --------- - -
---------- ------------------
----------- ------------------
--
------------------------
--------------------------------
--------------------
--------------------
--
--------------
------- -------
----- -------------
-------- ---------- -- -- -
----- ------------ - -------------------------
-- ---- ------------ -- --------
------ ------------- -------
-
---
--------------
------- -------
----- --------
-------- ---------- -- -- -
----- ------- - ----------------
------ ---- ---- ------
----- ----- -- - --- ---- ---- ---------
---- ---------------------
---
----- ------- - -
---- ---------------
--
-- --- ------------- ---- --------
----- ------------- - --
----------- ------------------------------------------
----------------- -----
------- -
--------- ------
------- -----
-
---
--- ---- ------------ -- -------------- -
--- -
----- -------------------------------------- -------- ---------
- ----- ------- -
---------------------
-
-
------ --------- ------
-
---
---------------客户端代码
在客户端代码中，先注册 service worker，然后在 service worker 中监听 pushManager.subscribe() 方法获取订阅信息，并将订阅信息发送至服务器。
-- -------------------- ---- -------
-- ---------------- -- ---------- -
---------------------------------------------------------------------------------- -
-- --------- --- ---- -------------
------------------------------------
---------------- -----
--------------------- ------ -- ------ --- ---- ------
------------------------------ -
-- ---- ------------ -- ------
------------------- -
------- -------
----- ---------------- ------------- ------------ ---
-------- -
--------------- ------------------
-
---
---
---
-在 service worker 中，监听 push 事件，接收消息。
-- -------------------- ---- -------
----------------------------- --------------- -
------------------------------------------------------- ---- ------ -
----- ----- -- - --- ---- ---- ---------
----- ------------
----- - ---- --------------------- -
----
---
------------------------------------------ --------------- -
---------------------------
----------------
-----------------------------------------------
--
---总结
实现 Web 推送通知并不复杂，只需要遵循一定的流程即可。在 Hapi.js 中，我们可以使用 web-push 模块来实现服务器端的推送功能，同时使用 service worker 实现客户端的消息接收和展示。
此外，在使用 Web 推送通知时，一定要注意安全性问题，确保消息的来源和接收都是可信的，避免被恶意攻击。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f64cd968c7c53b016b734