什么是 fire-push？
fire-push 是一款基于 Firebase Cloud Messaging（FCM）的 npm 包，可以让前端开发者轻松地在 Web 应用程序中实现即时通知功能。FCM 是 Google 提供的基于云端的消息传递平台，可以帮助开发者将消息发送到移动应用程序、网络应用程序和 IoT 设备等。fire-push 将 FCM 集成到 Web 应用程序中，并提供了简单易用的 API。
如何使用 fire-push？
1. 安装
npm install fire-push
2. 初始化
在 Web 应用程序中使用 fire-push，需要先进行初始化。
import FirePush from 'fire-push';
// 创建一个 FirePush 实例
const firePush = new FirePush({
apiKey: 'YOUR_API_KEY',
messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
projectId: 'YOUR_PROJECT_ID',
});在这里，apiKey、messagingSenderId、projectId 是 FCM 的配置信息，在 Firebase 控制台中可以找到。
3. 发送通知
要发送通知，需要先获取用户的 FCM token。在 Web 应用程序中，可以使用 Service Worker 来获取 FCM token。以下示例展示了如何使用 fire-push 来发送推送通知。在这里，我们假设已经获取到了要推送的目标用户的 FCM token。
-- -------------------- ---- -------
----- ------- - -
------------- -
------ ---- ---------
----- ------ ------ --- ---- - --- ------- ---- -------
------------- ------------------------
--
--
----- ----- - -----------------
---------------------------------- --------
---------------- -- -
------------------------- ------- ----------
--
-------------- -- -
-------------------- ------- --------------- -------
---这个示例将发送一条格式为 { "notification": {"title": "New Message", "body": "Hello there, you have a new message from John.", "click_action": "http://localhost:3000"} } 的通知到一个目标 FCM token。通知可以包含其他信息，如数据负载等。可以在 Firebase 控制台中查看更多有关 FCM 通知的信息。
4. 接收通知
当应用程序在后台运行时，FCM 可以显示通知并触发播放声音、震动等提醒用户。当应用程序在前台运行时，应用程序可以根据需要响应通知。以下示例展示了如何在 Web 应用程序中响应通知。
-- -------------------- ---- -------
-- -- ------- ------
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------------------
-------------------- -- -
-------------------- ------ ------------- --------------
--
-------------- -- -
-------------------- ----------- ------- --------- -------
---
---
-
-- ------
------------------------------------------ ------- -- -
---------------------------
----------------
---------------------------------------------------
--
---在这里，代码注册了一个 Service Worker，在收到推送通知时，可以触发 notificationclick 事件来处理通知。在这个示例中，我们点击通知后会打开到指定 URL 的新窗口。
结论
fire-push 提供了简单、易用的 API 来使用 FCM 实现 Web 应用程序的推送通知功能。通过将 fire-push 集成到应用程序中，开发者可以轻松地个性化地向用户发送通知、提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005583a81e8991b448d56b8