如何使用 Firebase (FCM) 发送 Web 推送通知？

已发表: 2021-12-29

为了促进其在 Web、IOS 和 Android 上的通知服务，Firebase 使用云服务。 Firebase 云消息传递 (FCM)通过为每个设备生成唯一令牌并随后使用这些令牌向相应设备发送消息来运行。 为了发送网络推送通知，Firebase 使用 javascript 生成令牌。

在此博客中，您将了解有关如何实现网络推送通知 firebase的所有信息。

什么是 Firebase 云消息传递？

什么是 Firebase 云消息传递

Firebase Cloud Messaging 是 Google 的免费移动通知服务。 它允许第三方应用程序开发人员从 Google Cloud Messaging (GCM) 服务器向其用户发送通知。 这使您能够实时通知用户可用于同步的各种数据。

它将用户应用程序的消息上游发送到 FCM 服务器，将 FCM 服务器的消息下游发送到用户的应用程序。 您可以使用 FCM 来吸引、保留和重新定位您的用户，无论他们身在何处。

使用 firebase 发送网络推送通知有什么好处？

以下是从 firebase 发送网络推送通知的好处。

  • 免费开始：您无需向 Google 付费即可使用 FCM 推送通知服务。 此外，它很容易扩展。  
  • 无需担心权限：由于 FCM 库使用清单合并，它会自动添加所需的任何权限。 这减少了您需要付出的努力。
  • 简化注册： FCM 用于将消息传递到设备的地址称为“注册令牌”。 这个过程现在已经异步了。 Google 图书馆会自动为您分配一个令牌。 因此，当您请求令牌时，您会收到一个注册令牌。 要开始消息传递，您只需将此令牌发送到您的服务器。
  • 易于实施：实施 FCM 既快速又简单。 由于其直观的 API 在单个 SDK 中可用，您可以立即解决客户的问题，而无需构建复杂的基础架构。
  • 分析：您可以从 Firebase 免费获得无限制的分析。 您可以获得有关用户应用使用情况、广告点击次数等的宝贵数据。 其他 Firebase 功能可与 Firebase Analytics 配合使用。 所以，你可以对所有事情采取行动。
  • 跨平台支持：由于 API 在用于 C++、JavaScript、Android 和 iOS 的单个 SDK 中可用，因此您可以将其扩展到各种平台，而无需更改您的基础架构。
  • 常见主题消息传递：当您想要通知对特定主题感兴趣的用户时，您只需将消息发布到 FCM。 FCM 会将其发送给所有订阅该主题的用户。 最好的事情是它对主题消息传递没有任何限制。
  • 不同的主题消息传递： FCM 还允许客户细分向他们发送相关消息。 例如，如果您向您的用户发送与交通相关的通知，那么您在城市 A 中的用户将仅收到与其所在城市相关的交通信息，而在城市 B 中的用户将仅收到与其所在城市相关的交通信息。

如何使用 Firebase 发送网络推送通知？

以下是帮助您实施网络推送通知 Firebase 的分步说明。

1.注册 Firebase 应用

注册-Firebase-App
  1. 访问此链接 https://console.firebase.google.com/u/0/ 并按“添加项目”标签。
  2. 给项目名称并选择国家。 然后按“创建项目”选项卡。 Google 将检查项目名称的可用性和唯一性。
  3. 现在点击“接受条款和条件”标签继续。 您的项目将在
  4. 几秒钟。
  5. 现在将您的 Android/IOS/Web/Unity 应用程序添加到您的项目中。 由于此博客专注于Web 推送通知 Firebase ，您需要单击显示为 </> 的 Web 图标继续。
  6. 给你的应用一个昵称。 此昵称仅供用户使用。 因此，您可以使用此功能来促进更好地区分项目中的应用程序以供内部使用。
  7. 如果您的项目未在 HTTPS 服务器上运行，请为其添加托管。 如果没有，请跳过此步骤。
  8. 现在点击“注册应用程序”。  
  9. 现在您的应用已注册，您将收到一个Firebase SDK，它是一个代码。 复制此代码

向下。 它将在接下来的部分中使用。 如果您现在不复制它，您可以从“设置”部分中检索它。

2. 将 Firebase 添加到您的项目中

将firebase添加到您的项目
  1. 转到仪表板。 在侧边栏上，您会找到“设置”图标。 点击它。 在显示的菜单中，单击项目设置。
  2. 当设置页面（常规设置）打开时，向下滚动到页面底部并复制为所选 CDN 显示的代码。
  3. 最后在您的 HTML 文件中包含以下代码。 还包括用于 firebase 消息传递的 CDN 脚本。

< script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js” > </script>

<script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js” > </script>

3、运营Firebase服务

1. 对于顶部提到的代码，添加底部给出的代码，在你找到 // Initialize Firebase 之后。

// 初始化 Firebase

firebase.initializeApp(firebaseConfig);const 消息传递=firebase.messaging(); //自定义函数运行firebase服务

  getStartToken(); //如果在浏览器中打开与项目相同的选项卡，则此代码从服务器/您的应用程序接收消息并将消息打印到控制台

messing.onMessage(function(payload){console.log(“onMessage”,payload);});

2. 您可以将底部的代码写入 HTML 页面中的单独 js 文件中，也可以将其附加到 <script> 标记中顶部的代码中。

messing.getToken()是一个用于使用 Firebase SDK 检索令牌的函数。 如果找到令牌，则将其发送到服务器进行存储，否则通过 RequestPermission() 函数寻求用户的许可。

setTokenSentToServer()是另一个函数，它利用本地存储分配 1 作为 sendTokenToServer 的值，以防令牌已经发送到服务器，0 以防令牌由于发送到服务器时发生错误而未发送到服务器服务器或从 firebase SDK 中检索。

4. 从项目发送通知

从项目发送消息

现在您需要从项目发送通知的所有内容都已准备就绪，以下是有关如何向您知道其令牌的最终用户发送通知的详细信息 -

1. 最初，您需要接收服务密钥。 执行以下步骤-

  • 打开 Firebase 控制台
  • 点击项目设置
  • 点击“云消息”
  • 您将在服务器密钥字段中找到一个代码。 复制它。

2.发送推送通知

让我们使用邮递员平台从 Firebase 发送网络推送通知。 以下是您需要做的事情是-

3.设置POST请求类型。

4.输入网址：https://fcm.googleapis.com/fcm/send

5. 单击标题部分。

您需要填写两个标题，即授权和内容类型。

· 授权：粘贴您复制的服务器密钥。

· 内容类型：application/JSON（JavaScript Object Notation）

6. 现在点击打开正文部分。 粘贴 Firebase 在用户注册时检索到的用户令牌。

7. 现在发送请求。 您将能够从服务器向您的用户发送推送通知。

请注意，当您向用户发送第一个推送通知时，网络浏览器将请求他/她允许接收您的通知。 只有当他/她授予许可时，您才能持续发送推送。 您可以按照我们的推送通知提示确保您的用户授予他/她的权限。

总结您现在已经明白，使用 Firebase 发送网络推送通知并不像看起来那么困难。 它不需要很多资源，也不需要太多时间。 此外，使用 网络推送通知 Firebase不会影响您的网站维护或网络应用程序的费用。 如果您仍需要有关其功能的更多详细信息，请阅读 Firebase 文档。

参观产品

另请阅读：

  • Web 推送通知的 7 个被高估的因素
  • 网络推送通知 | 直接电子邮件营销策略
  • 营销人员需要知道的 41 个 Web 推送通知统计信息
  • 2022 年 15 款最佳推送通知软件和工具{比较}
  • Web 推送通知如何比其他营销媒介更有效？