前言
在 Web 应用程序的开发中，推送通知是一项很重要的功能。FCM (Firebase Cloud Messaging) 是 Google 提供的跨平台消息推送平台，可以快速可靠地向 Android、iOS 和 Web 应用程序发送推送通知。
在本文中，我们将介绍如何使用 npm 包 fcm-web-push 来实现 Web 端的推送通知功能。本文的示例代码使用了 Node.js 和 Express。
安装
要使用 fcm-web-push，首先需要在项目中安装该包。在命令行中执行以下命令：
npm install fcm-web-push
配置 Firebase
使用 fcm-web-push，需要先在 Firebase 控制台中创建一个项目。创建完成后，请在项目设置中获取该项目的 Web 应用程序的配置信息，包括apiKey，authDomain，databaseURL，projectId，messagingSenderId 等信息。
生成 VAPID 密钥
fcm-web-push 使用 VAPID（浏览器推送身份验证）来验证发送者的身份。要使用 VAPID，需要为 Web 应用程序生成一对公钥和私钥。在本示例中，我们将 VAPID 密钥直接存储在代码中。在生产环境中，应将其存储在安全的位置，例如数据库或环境变量中。
const vapidKeys = webpush.generateVAPIDKeys(); const publicKey = vapidKeys.publicKey; const privateKey = vapidKeys.privateKey;
订阅用户
要向用户发送推送通知，需要先将用户的浏览器订阅到 Firebase 中。在本示例中，我们在客户端中调用浏览器提供的 subscribe 方法来订阅用户。
-- -------------------- ---- -------
--------------------------------------------------------- -
------------------------------------
---------------- -----
--------------------- --------------------------------
------------------------------ -
----------------- -- ------------- --------------
-- ---- --- ------------ ------- -- --- ------ ----- - ---- -------
------------------- -
------- -------
----- -----------------------------
-------- -
--------------- ------------------
-
---
------------------------ -
-------------------- -- --------- --- ----- -- -------
---
---在订阅用户之后，将用户订阅信息发送到服务器端，以便后续使用。
发送推送通知
要发送一个推送通知，需要获取用户的订阅信息。在本示例中，我们将订阅信息存储在内存中，以便后续使用。
const subscriptions = new Set();
app.post('/subscribe', (req, res) => {
subscriptions.add(req.body);
res.sendStatus(200);
});当需要发送推送通知时，可以遍历所有订阅，将消息发送给所有订阅用户。以下代码演示了如何发送推送通知：
-- -------------------- ---- -------
----- ------- - ----------------
------ ---- ---------
----- ---- ---- - --- ----------
----- ------------------------------
---
---------------------------------- -- -
-------------------------------------- -------- -
---- --
-------------- -- -
--------------------- -- ---- ------------- -- -------
---
---结语
本文介绍了如何使用 npm 包 fcm-web-push 实现 Web 端的推送通知功能。通过本文的学习，您可以掌握如何使用 fcm-web-push 实现浏览器消息推送，并且可以根据需要进行修改和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005515f81e8991b448ce7de