前言
Progressive Web App（PWA）已经成为了前端开发中的热门话题，其中最受欢迎的特性就是它可以实现离线使用。但是，在现实世界中，我们经常需要使用在线的应用程序，而后台消息推送功能可以帮助我们快速获取重要信息。
在本文中，我们将探讨如何使用 PWA 实现后台消息推送。我们将了解如何注册 Service Worker 并向服务器请求推送许可，如何在后台接收和处理推送消息以及如何在应用程序中显示它们。
什么是后台消息推送
现代 Web 应用需要实时通知用户更新或事件，这就是后台消息推送的作用。后台消息推送从 Web 开发的角度来看，是服务器向客户端发送通知消息的方法。这可以让用户和开发人员更加方便快捷地获取信息。
准备工作
在开始实现后台消息推送之前，我们需要进行一些准备工作。
创建一个服务器
我们需要一个能够向客户端发送通知的服务器。这通常需要一个可靠的服务器环境和实时消息推送的能力。在此，我们将使用 Firebase 的示例代码来实现。
一个基本的 PWA
我们需要一个基本的 PWA，以便我们可以通过它来接收和处理推送消息。 我们可以使用以下命令来创建一个现代的 React 应用程序：
npx create-react-app my-app --template cra-template-pwa
然后，您可以将以下代码添加到 src/index.js 中：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ------ - -- ------------------------- ---- ------------------------------ ---------------- ------------------ ---- -- -------------------- ------------------------------- -- -------------------------------------展开代码
这将确保我们的应用程序正确注册 Service Worker。
安装 Firebase
我们需要使用 Firebase 将消息从服务器推送到客户端。 我们可以使用以下命令将 Firebase 添加到应用程序中：
npm install firebase配置 Firebase
使用 Firebase 实现后台消息推送，我们需要创建一个 Firebase 项目并具有正确的配置。 其中包括启用 Firebase Cloud Messaging（FCM），创建一个 Web 应用程序并获取必要的凭据。 在此简单介绍如何完成此操作：
转到 Firebase 控制台（console.firebase.google.com），创建新的 Firebase 项目。
在“设置”选项卡中，单击“常规”选项卡，以查看 Firebase 项目的配置。
在“常规”选项卡中，单击“添加应用程序”，然后选择“Web”。
为您的应用程序提供一个易于识别的名称，然后单击“注册应用程序”。
在“添加 Firebase SDK”页面上，将 Firebase 配置添加到应用程序，并获取公钥。将配置和公钥添加到您的应用程序源代码中。
注册 Service Worker 推送
我们需要去注册 Service Worker 推送，以便我们可以接收来自服务器的消息推送。
首先，我们需要导入 Firebase 和刚刚获取的密钥，然后初始化 Firebase 应用：
-- -------------------- ---- ------- ------ -------- ---- --------------- ------ --------------------- ----- -------------- - - ------- --------- ----------- ------------------------------- ---------- --------------- -------------- --------------------------- ------------------ ------------- ------ ------------------------------ -------------- ---------- -- --------------------------------------- ----- --------- - ---------------------展开代码
然后，我们可以检查用户是否已允许我们向他们发送推送通知。我们使用以下函数来检查用户是否已授权：
-- -------------------- ---- ------- ----- ------------------- - -- -- - -------------------------------------------------- -- - -- ----------- --- ---------- - ------------------------- ---------- ----------- ----------- - ---- - ------------------- -- --- ---------- -- ---------- - --- --展开代码
如果它们没有授权，我们可以调用以下函数来向用户请求授权：
const requestUserPermission = async () => await Notification.requestPermission().then((permission) => { if (permission !== 'granted') { throw new Error('Permission not granted.'); } });
一旦用户授权，我们就可以获得一个设备令牌。该设备令牌将用于将推送消息发送到特定设备。我们使用以下函数来获取该令牌：
const getToken = async () => await messaging.getToken({ vapidKey: 'your-vapid-key-here' });
然后，我们需要在我们的 Service Worker 程序中监听消息推送事件。 我们使用以下代码来添加此功能：
self.addEventListener('push', (event) => { const title = event.data.json().notification.title; const options = { body: event.data.json().notification.body, }; event.waitUntil(self.registration.showNotification(title, options)); });
这个函数将在您运行的应用程序中显示一个新的通知。
现在，我们已经准备好在我们的前端应用程序中接收和处理消息了！
接收和处理推送消息
在后台消息推送到达我们的前端应用程序时，我们需要开发代码来接收和处理它们。我们可以使用以下代码来监听消息推送事件：
-- -------------------- ---- ------- ------------ -- - ----- ------------- - --------- -- - -------------------- ----------- --------- -- ----------------------------------- ------ -- -- ------------------------------------ -- ----展开代码
这将启用我们的应用程序来接收来自服务器的消息推送，并在控制台中记录它们。
我们可以使用以下代码在前端应用程序中显示推送消息的通知：
self.addEventListener('push', (event) => { const title = event.data.json().notification.title; const options = { body: event.data.json().notification.body, }; event.waitUntil(self.registration.showNotification(title, options)); });
请注意，我们已经在前面的步骤中将此代码添加到我们的 Service Worker。
小结
在本文中，我们展示了如何使用 PWA 实现后台消息推送。我们了解了如何注册 Service Worker 并向服务器请求推送许可，以及如何在后台接收和处理推送消息。此外，我们还展示了如何在应用程序中显示推送消息。在实际的应用程序中，后台消息推送可以帮助我们快速获取重要信息，帮助用户快速地接收到公告、通知、政策等内容，从而提升用户的体验感和使用情绪。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc3e36a231b2b7eddb8c0f
