处理React中的推送通知-DEV365 开发者社区

要阅读更多类似的文章，visit my blog

通知是良好用户体验的重要组成部分。您可以正确使用通知更新用户有关您的产品和优惠。

今天，我们将看到如何在ReactJS Web应用程序中接收通知。我认为您已经有一个基本的React应用程序要遵循。我们将在通知部分使用 firebase 。

步骤1.安装firebase

您应该安装所需的依赖项

yarn add firebase

现在，转到您的firebase console-> create a project->抓住您的firebase项目配置详细信息。您可以从here

中了解更多信息

步骤2.将服务工作者添加到项目

要接收通知，我们需要在我们的申请中有一个服务工作者。

a 服务工作者是您的浏览器在后台运行的脚本，与网页分开，打开不需要网页或用户交互的功能的大门。

由于我们希望在没有任何用户交互的情况下收到一份通知，因此我们需要拥有服务工作者。创建一个。。。

进入您的公共文件夹（其中包含index.html文件的文件夹）
创建一个名为 firebase-messaging-sw.js
添加以下代码，并用您的配置值替换配置对象的值

importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js')

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID"
}

firebase.initializeApp(config)
const messaging = firebase.messaging()

// IF WE WANT TO HANDLE BACKGROUND NOTIFICATION WE HAVE TO ADD THE FOLLOWING BLOCK OF CODE AS WELL

messaging.setBackgroundMessageHandler(function (payload) {

    console.log('[firebase-messaging-sw.js] Received background message ', payload)

    const notificationTitle = payload.data.title
    const notificationOptions = {
        body: payload.data.body,
        icon: '/firebase-logo.png'
    }

    return self.registration.showNotification(notificationTitle, notificationOptions)
})

self.addEventListener('notificationclick', (event) => {
    console.log(event)
    return event
})

步骤3.注册服务工作者

在呈现应用程序之前，请在app.js（或任何其他组件/钩子）内添加以下代码。它将注册服务工作者以处理背景通知。

export default function App () {

    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
            .register('firebase-messaging-sw.js')
            .then(function(registration) {
                console.log('[SW]: SCOPE: ', registration.scope);
                return registration.scope;
            })
            .catch(function(err) {
                return err;
            });
    }

    return <div> </div>
}

运行应用程序后，您可以从浏览器和应用程序>“服务工作者”下转到DEV工具，以查看服务工作者是否已激活。

步骤4.添加实用程序功能

现在，我们准备在浏览器中接收通知。但是我们需要2件事。

用户的权限，如果他想查看通知或不查看
设备令牌以识别我们的设备（我们必须在某个地方保存）

现在在您的app.js文件中添加以下代码以获取用户权限和设备令牌

import React from 'react';
import firebase from 'firebase';

export default function App () {

  /// ... registration of service worker


  useEffect(() => {
    firebase        
    .messaging()        
    .requestPermission()        
    .then(() => firebase.messaging().getToken())
    .then((deviceToken) => {
      console.log(deviceToken)      // save this token somewhere   
    })        
    .catch((err) => {console.log(err)})
  },[])


  return <div> App </div>

}

但是，如果您想保持代码清洁，则可以创建一个具有所有必要逻辑的通知useFirebaseNotification.js的自定义挂钩，这将是这样的。。。

import firebase from 'firebase'
export const useFirebaseNotificationProvider = () => {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
            .register('./firebase-messaging-sw.js')
            .then(function (registration) {
                console.log('Registration successful, scope is:', registration.scope)
            })
            .catch(function (err) {
                console.log('Service worker registration failed, error:', err)
            })
    }

    firebase
        .messaging()
        .requestPermission()
        .then(() => firebase.messaging().getToken())
        .then((firebaseToken) => {
            console.log(firebaseToken)
        })
        .catch((err) => {
            console.log(err)
        })

    firebase.messaging().onMessage((payload) => {
        console.log('payload is ', payload)
    })
}

此挂钩将注册您的服务工作者并索取许可并为您获取设备令牌。

从您的app.js
调用此挂钩

export default function App () {
  useFirebaseNotification()
  return <div> App </div>
}

更干净吗？

步骤5.从后端发送通知

我们都准备在我们的前端接收通知。我们将收到我们的应用程序是否在前景中的通知。

如果您有一个后端申请表，则可以在其中处理通知，可以从较早地获取设备令牌并发送通知。

或者您也可以从Firebase控制台发送通知。

从您的后端（也应该连接到firebase，但本教程的范围之外）您可以使用以下代码发送通知。来自nodejs

import admin from 'firebase-admin';

const payload = {
    title: 'title',
    body: 'body',
    data: {
        title: 'title',
        body: 'body'
    },
    tokens: [DEVICE_TOKEN]
};

function sendNotificaiton() {
  admin
    .messaging()
    .sendMulticast(payloadWeb)
    .then(response => {
        console.log(response.responses);
    });
}

sendNotificaiton();

希望您可以在浏览器中看到通知。现在收到通知后，您可以执行各种自定义内容。

今天。希望您发现这很有帮助。祝你有美好的一天！

通过LinkedIn或我的Personal Website与我联系。