如何使用Google Firebase向Web应用程序添加推送通知

在网站或web应用程序中显示推送通知是与用户交互的好方法。推送通知告诉用户有关重要事件的信息，为用户提供定制内容，并允许用户通过单击与应用程序交互。但是，由于推送通知工具的选择范围很广，因此选择正确的工具可能很困难。

大多数推送通知服务都是付费的，仅为有限数量的订阅者和有限的功能提供免费计划。这就是为什么在本文中，我们将讨论允许您无限制地免费配置推送通知的Google Firebase平台。

您可以使用本文作为使用Firebase向web应用程序添加web推送通知的分步指南。

内容：

什么是推送通知？它们是如何工作的？

用于在web应用程序中启用推送通知的工具

向web应用程序添加推送通知

步骤1：创建firebase项目

第2步：创建服务工作者

步骤3:设置消息订阅

步骤4：发送通知

结论

什么是推送通知？它们是如何工作的？

推送通知从服务器推送后在用户屏幕上弹出。与传统通知不同，推送通知即使在目标应用程序在后台运行时也会显示。

推送通知允许你在应用服务器和网站或客户端之间建立实时通信，而不需要重新加载网页。例如，推送通知可以帮助用户接收定制的内容，并通过点击弹出窗口来选择及时更新。

现代web应用程序和网站应支持推送技术，因为它允许您：

• 提醒用户重要事件，如即将到来的销售或更新
• 提醒用户在线商店中废弃的购物车或提供折扣代码
• 快速接收用户操作的确认
• 显示可点击的图标和文本
• 允许用户与您的网站或应用程序交互，而无需返回

让我们来看看推送通知工作流程。

当web应用程序启动时，客户端用户界面(UI)向消息服务器发送一个包含用户数据的请求。然后，消息服务器将所有必要的用户数据保存在其数据库中，为用户生成一个会话ID令牌，并将该令牌发送给客户机的UI，后者又将该令牌发送给应用程序后端。web应用程序的后端将使用令牌向用户发送通知。

1. UI向邮件服务器发送注册请求。
2. 消息服务器返回具有唯一令牌（会话ID）的响应。
3. UI与应用程序的后端共享令牌。
4. 后端可以通过调用消息服务器通知端点在任何时候使用令牌引发通知事件。然后消息服务器将向客户端UI推送新事件。

用于在web应用程序中启用推送通知的工具

有很多工具用于为Web应用程序配置推送通知。最受欢迎的是：

• 网络推手．此工具可免费获得多达10,000名订阅者。超过这一点，价格从每月28美元开始。WebPushr提供WordPress插件，并支持所有流行的浏览器，如Chrome，Firefox，Safari（麦克斯），Microsoft Edge和Opera。
• Pushnami.．该平台提供了Web推送通知功能，每位订阅价值0.01美元。Pushnami支持所有主要浏览器（Chrome，Firefox，Safari，Microsoft Edge和Opera）和Android设备。
• OneSignal. 此工具允许您通过桌面和移动浏览器发送消息。它支持所有主要浏览器，包括Chrome、Firefox、Safari、MicrosoftEdge和Opera。OneSignal提供了一个功能有限的免费计划，每封邮件最多可向10000名收件人发送通知。付费计划从每月9美元开始。
• Pushbots．该工具提供了推送通知功能，并为多达1,000名订户提供免费计划，不需要信用卡或其他承诺。商业计划的起价为每月29美元，最多可容纳5000名用户。Pushbots还为WordPress提供了SDK，支持Chrome、Firefox和Safari等主流浏览器。
• 谷歌重火力点．这是创建移动和Web应用程序的全面平台，该平台也可用于发送推送通知。Firebase允许您分组500条消息并在一个API调用中发送它们。无论用户数量多少，该工具都是免费的，但它只支持Firefox、Chrome和Edge（版本17+）。不幸的是，它不支持IE11或Safari。您可以在官方网站上查看Firebase JavaScript SDK的支持环境网站．

在本文中，我们使用Firebase作为消息服务器。Firebase提供了很多功能，包括服务器、数据库、主机、，云重火力点消息（FCM）服务器和身份验证。让我们看看它的优点和缺点。

现在让我们探索如何将推送通知添加到带有Firebase的Web应用程序。

向web应用程序添加推送通知

在本文中，我们将分四个步骤向您展示如何使用Firebase在web应用程序中启用推送通知：

步骤1：创建Firebase项目

首先在Firebase平台中构建一个新项目。以下是你需要做的:

1.用Firebase注册。您可以使用您的Google帐户。

2.去医院重火力点控制台页面．

3.单击创建项目（或添加项目，如果您以前使用过Firebase）。

4.指定项目名称，选择一个位置，然后等待创建项目。

5.等待应用程序控制台打开。

6.单击按钮以创建Web项目。

7.输入您的web应用程序的名称，并等待配置文件生成。它看起来像这样:

8.复制配置代码。在以下步骤中，您将需要它。

笔记：您的web应用程序或网站必须支持HTTPS协议。否则，您将无法启动推送通知。

第2步：创建服务工作者

A.服务人员是一个在后台与网站分开运行的脚本。使用推送通知时，服务人员负责为浏览器处于后台模式的情况配置后台通知处理程序。在所有情况下，要使推送通知起作用，web页面应该处理onMessage打回来。

笔记：在下面的示例中，我们使用index.html页面。

现在您已经有了Firebase配置文件，您可以将服务工作者和Firebase SDK添加到客户端的UI中：

1.将以下内容添加到Web应用程序的HTML代码中，并将其放在要初始化消息的位置：

这段代码负责添加JS脚本。您可以在步骤1生成的配置文件代码中找到它。

2.在web应用程序的根目录中，创建一个服务工作者并将其命名firebase-messaging-sw.js. 您需要此服务人员来接收和处理传入的消息。

3.服务工作人员的内容结构将如下所示：

       

        
使用严格的;importScripts(“https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js”);importScripts(“https://www.gstatic.com/firebasejs/8.2.4/firebase-messaging.js”);const FIREBASE_CONFIG = {apiKey: ""， authDomain: ""， projectId: ""， storageBucket: ""， messagingSenderId: ""， appId: ""， measurementId: ""};//初始化service worker中的firebase。firebase.initializeApp (FIREBASE_CONFIG);自我。addEventListener('push'， function (event) {var data = event.data.json();const title = data.Title;data.Data.actions = data.Actions; const options = { body: data.Message, data: data.Data }; event.waitUntil(self.registration.showNotification(title, options)); }); self.addEventListener('notificationclick', function (event) {}); self.addEventListener('notificationclose', function (event) {});
       

4.更新FIREBASE_CONFIG根据您的配置文件设置常量。

5.注册这个新firebase-messaging-sw.js应用程序中的服务人员。

让我们详细探讨新创建的服务人员的结构：

• ImportScripts.-添加脚本到web应用程序的部分
• firebase.initializeApp（firebase\u配置）-使用给定参数初始化Firebase的方法
• 自我。addEventListener('push'， function (event){…}）-接收到新通知时在客户端发生的事件。通常，向客户机显示通知发生在该方法的主体中。
• event.waituntil（self.registration.shownotification（标题，选项））-事件，该事件负责显示通知窗口。title参数保存通知的标题和选项参数包含一组可以包含的参数身体,数据和行动．
• self.adeventlistener（'notificationClick'，函数（事件）{...}）-当用户单击通知时触发的事件
• self.addEventListener（'notificationclose'，函数（事件）{…}）- 当用户关闭通知时触发事件

步骤3:设置消息订阅

现在，让我们配置UI和Firebase消息服务器之间的消息订阅:

• 这个firebase.initializeApp（firebase\u配置）服务工作者中的行负责在消息服务器中注册客户端。这个FIREBASE_配置参数负责Firebase配置参数。基本上，该行负责邮件服务器中的用户注册。
• 你也需要.GetToken firebase.messaging () ()行以接收令牌（会话ID），稍后将其发送到后端并保存到数据库以生成新通知。

我们可以从逻辑上分割.GetToken firebase.messaging () ()线路分为两个操作：

1. firebase.messaging（）-呼叫消息（）Firebase对象的方法检索a消息传递提供访问FCM功能的服务。
2. gettoken（）- 调用此方法的消息传递服务允许您接收令牌（会话ID）。

步骤4：发送通知

在此步骤中，所有元素都已准备就绪。让我们探索您在您已经了解其令牌时究竟如何向最终用户发送通知。

首先，您需要获得一个服务密钥。为此，您需要执行以下步骤：

1. 打开Firebase控制台。
2. 转到项目设置。
3. 打开云消息部分。
4. 复制服务器密钥字段的内容。

让我们使用邮递员平台来练习发送推送通知。以下是你需要做的:

1.设置POST请求类型。

2.输入以下URL：https://fcm.googleapis.com/fcm/send

3.添加两个标题：

• 授权：服务器密钥，这是您先前复制的密钥
• 内容类型：应用程序/ JSON

4.添加身体选项，其中用户令牌是Firebase在步骤3中的用户注册期间检索到的令牌。请求将如下所示：

       

        
{“通知”：{“标题”：“通知标题”，“body”：“通知正文”}“到”：“用户令牌（会话ID）”}
       

5.最后，您可以发送请求。

之后，服务器将推送通知，通知将显示在用户屏幕上。

注:在客户端首次尝试接收通知期间，web浏览器将请求用户获得接收通知的权限。看起来是这样的：

如果用户拒绝接收通知，则在下一次尝试发送推送通知时，消息将不会显示。在这种情况下，显示推送通知的唯一方法是用户更改网页配置中的相应权限。

如您所见，使用Firebase云消息服务器作为消息服务器来配置推送通知是简单明了的。您可以在中找到有关其功能的更多信息重火力点文档．

结论

配置和使用推送通知是一个非常简单的过程，不需要太多资源。同时，它涵盖了大量客户端 - 服务器交互。

使用Firebase实现Web应用程序中的推送通知快速且简单。此外，使用此工具的连续使用推送通知不会影响您的Web应用程序或网站维护的成本，这对于您的项目预算是一个很棒的服务。

在Apriorit，我们有一支经验丰富的web应用程序开发团队准备帮助您使用任何复杂性的项目。联系我们开始讨论您未来的Web解决方案。