如何将推送通知集成到您的 PWA 中

在我们今天的教程中，我们将使用 Firebase 将推送通知集成到 PWA 中，或者更具体地说，使用其中的云消息传递功能，该功能支持使用 HTTPS 请求发送消息。

渐进式 Web 应用程序和推送通知

由于 Progressive Web App 是一个不断变化的运动，因此看到该技术本身已经与它的本地应用程序对等（功能方面）就不足为奇了。

 推荐阅读：PWA vs Native：哪个更适合你？

通知触发器使开发人员能够安排通知，即使用户的设备处于飞行模式。

Jon Krafcik，2019 年 Chrome 开发者峰会

有了所有这些根本性的变化，如果不利用它为 PWA 带来更多收入，那将是一种浪费。 它甚至不是太复杂的东西，因为您可以使用本教程轻松设置自己的推送通知功能。

 推荐阅读：电子商务渐进式 Web 应用程序 (PWA) 的 9 个必备功能

如何将推送通知集成到您的 PWA 中

在我们今天的教程中，我们将使用Firebase将推送通知集成到 PWA 中，特别是其中的云消息传递功能，它可以使用 HTTPS 请求发送消息。

先决条件

• 一个 Firebase 帐户（因为您将在 Firebase 中创建一个项目）
• 渐进式 Web 应用程序。 为了简化演示，我们将使用 create-react-app，它是可以使用命令创建的基本 PWA

第 1 步：创建基本 PWA

由于我们将使用 create-react-app 创建一个基本的 PWA，让我们先下载 NodeJS。 安装完 NodeJS 后，打开NodeJS 命令提示符并运行以下命令。

在您指定的目录中创建一个简单的 React 应用程序：

 npx create-react-app your-pwa-directory

将当前工作目录更改为您新创建的 React 应用程序：

 cd 你的 pwa 目录

将 Firebase JavaScript 库添加到项目中：

 npm install firebase --save 

第 2 步：创建您的push-notification.js

下一步是创建负责所有通知处理的模块。 在<your-pwa-directory>\src中，创建一个名为push-notification.js的文件。

首先，让我们创建一个初始化 Firebase 并传递项目密钥的函数。 您可以通过进入 Firebase > 项目概述 → 项目设置并单击此图标来找到项目的密钥：

这会将您定向到另一个包含 PWA 的 Firebase SDK 的页面：

现在我们有了项目的密钥，让我们将以下代码添加到您的push-notification.js中。

 从'firebase'导入firebase；
导出 const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    数据库URL：“XXXXXXXXXXXXX”，
    项目ID：“XXXXXXXXXXXX”，
    storageBucket: "XXXXXXXXXXXX",
    messagesSenderId: "XXXXXXXXXXXX",
    appId：“XXXXXXXXXXXX”
  });
}

有了这个，您已经创建了负责所有通知处理的函数，您现在需要导入并调用它。 像这样编辑你的index.js ：

 从“反应”导入反应；
从 'react-dom' 导入 ReactDOM；
导入'./index.css'；
从'./App'导入应用程序；
从 './serviceWorkerRegistration' 导入 * 作为 serviceWorkerRegistration；
从'./reportWebVitals'导入reportWebVitals；
从'firebase'导入firebase；
从'./push-notification'导入{initializeFirebase}；
ReactDOM.render(<App />, document.getElementById('root'));
初始化Firebase();

第 3 步：创建服务工作者

Service Workers 是 Progressive Web App 背后的技术名称，它支持其离线功能、推送通知和资源缓存。

SimiCart，所有你需要知道的关于渐进式 Web 应用程序

接收onMessage事件需要服务工作者，因此允许将通知发送到用户的设备。 默认情况下，Firebase 会自动查找名为firebase-messaging-sw.js的文件。

让我们将firebase-messaging-sw.js添加到提供文件的目录中。 由于我们是一个create-react-app项目，这个firebase-messaging-sw.js将进入我们的公共文件夹：

 importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    数据库URL：“XXXXXXXXXXXXX”，
    项目ID：“XXXXXXXXXXXX”，
    storageBucket: "XXXXXXXXXXXX",
    messagesSenderId: "XXXXXXXXXXXX",
    appId：“XXXXXXXXXXXX”
});
常量消息 = firebase.messaging();

如果您还没有听说过 PWA Service Worker，我们有一篇独家文章供您了解有关这项惊人技术的所有信息。

第 4 步：请求用户权限以发送通知

这是隐私的时代，您不想通过发送不需要的和未经授权的通知来惹恼您的用户！

要请求您的用户的许可，只需将其添加到您的push-notification.js ：

 从'firebase'导入firebase；
 
导出 const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXX",
    数据库URL：“XXXXXXXXXXXXX”，
    项目ID：“XXXXXXXXXXXX”，
    storageBucket: "XXXXXXXXXXXX",
    messagesSenderId: "XXXXXXXXXXXX",
    appId：“XXXXXXXXXXXX”
  });
}
 
导出 const askForPermissionToReceiveNotifications = async () => {
  尝试 {
    常量消息 = firebase.messaging();
    等待消息传递.requestPermission();
    常量令牌 = 等待消息传递.getToken();
    console.log('你的令牌是：', token);
    
    返回令牌；
  } 捕捉（错误）{
    控制台.错误（错误）；
  }
}

因为这个函数需要从某个地方调用，所以我们只需点击一个按钮就可以添加它。 编辑/src/目录中的app.js文件，如下所示：

 从'./logo.svg'导入标志；
导入'./App.css'；
从'./push-notification'导入{ askForPermissionToReceiveNotifications }；

函数应用程序（）{
  返回 （
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          编辑 <code>src/App.js</code> 并保存以重新加载。
        </p>
        <一个
          className="应用链接"
          href="https://reactjs.org"
          目标="_空白"
          rel="noopener noreferrer"
        >
          学习反应
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          点击接收通知
        </按钮>
      </标题>
    </div>
  );
}

导出默认应用程序；

现在让我们开始我们的项目，你应该会看到一个点击接收通知按钮，如下所示：

单击按钮，您应该会看到一个弹出窗口，请求您的许可：

单击允许并检查浏览器的控制台。 您应该会看到一条消息，通知您您的令牌：

现在将此令牌保存在其他地方，因为您将在下一步中需要它。

第5 步：使用 Postman 发送推送通知

在接下来的步骤中，我们将使用 Postman 通过 Firebase 的云消息服务发送通知。

在 Postman 中，使用以下信息创建一个POST请求：

• 请求网址：https://fcm.googleapis.com/fcm/send

• Headers ：在 POST 请求的标头中，您需要具有以下键：

授权： key= SERVER_KEY

内容类型：应用程序/json

注意： SERVER_KEY可以在 Firebase 设置中的Cloud Messaging选项卡下找到

• Body ：使用以下代码填充 POST 请求的正文：

 {
    “通知”： {
        "title": "SimiCart",
        "body": "测试推送通知",
        "click_action": "http://localhost:3000/",
        “图标”：“https://i.imgur.com/5zO5cce.png”
    }
    “到”：“USER_TOKEN”
}

将USER_TOKEN替换为您在第 4 步中获得的令牌（通过单击Click to receive notifications 按钮）。不要忘记将 Body type 选择为raw和JSON 。

现在单击发送，您应该会在右下角看到一条通知弹出：

注意：这些通知仅在应用程序处于后台或最小化时出现。

恭喜！ 你的 PWA 现在可以发送通知了！

结论

我们希望在本指南之后，您现在可以自信地设置自己的推送通知功能。 作为一项新技术，Progressive Web Apps 对于不精通技术的用户来说肯定是一件复杂的事情，这就是为什么有现成的解决方案提供商（例如 SimiCart）可以凭借我们多年的 PWA 经验来满足您的所有需求。