首发于公众号 前端混合开发，欢送关注。

推送告诉已成为构建挪动利用时须要思考的重要性能。因为它们相似于短信，但发送不须要任何费用，许多企业当初更喜爱应用推送告诉向利用用户发送信息和警报。

在这篇文章中，咱们将看到如何在React Native利用中创立和发送推送告诉。

什么是推送告诉？

推送告诉是从应用程序发送到已装置该利用的用户的音讯或警报。次要有两种类型的告诉：

  • 前台告诉：当应用程序正在关上并运行时发送给用户的告诉
  • 后盾告诉：无论应用程序是否以后关上，都会发送

推送告诉在挪动利用开发世界中十分风行，起因有很多。例如:

  • 使公司可能以较低的老本推广产品和优惠
  • 晋升整体用户体验
  • 能够更快地提供交易收据
  • 转化更多用户
  • 牢靠的，因为用户在关上手机时总是会收到离线音讯

这些劣势使得推送告诉对简直所有类型的挪动利用都十分有用，从手机游戏到电商利用等等。

React Native 中的推送告诉架构

在咱们深刻理解如何在 React Native 利用中实现推送告诉的技术细节之前，了解React Native推送告诉的工作原理可能会有所帮忙。这里有一个图表，简化了告诉服务如何与设施进行通信：

当波及到在React Native中设置推送告诉时，有几种设置形式：

  • 原生平台特定的告诉服务（FCM/APNS）
  • Expo推送告诉服务和其余云服务
  • 像Notifee这样的React Native库

上面咱们更深刻地理解这些办法，而后深刻咱们的演示。

原生平台特定的告诉服务（FCM/APNs）

Android和iOS平台都提供了用于接管推送告诉的原生平台特定API

  • 实用于安卓设施的Firebase云消息传递（FCM）
  • 苹果推送告诉服务(APNs)实用于iOS设施

咱们能够应用React Native Firebase库来在Android上集成FCM，应用 push-notification-ios 库来在iOS上集成APNs。

React Native Firebase 库也提供了一种通过 FCM 在iOS上发送推送告诉的办法。能够从Node.js服务器通过 firebase-admin 和 node-apn 向注册的挪动设施发送近程告诉

Expo推送告诉和其余云服务

FCM 和 APNs 都是特定平台的原生推送告诉服务。如果咱们间接应用这些原生推送告诉服务，咱们通常须要在利用的前端和后端应用不同的库。

因为这可能会带来不便，因而有几个云服务提供了应用对立源代码同时解决FCM和APNs的办法。一些风行的推送告诉服务包含：

  • Amazon Simple Notification Service (SNS)
  • OneSignal
  • Azure Notification Hubs Azure

这些告诉服务在原生推送告诉零碎之上提供了一个形象层，通过一个托管的两头推送告诉服务器，正如你在之前显示的图表中看到的那样。

其余的React Native库，比方react-native-push-notification

像 Notifee 和 react-native-notifications 这样的库提供了原生模块，能够通过对立的库API轻松接管近程告诉并显示本地告诉。

你能够间接应用 FCM/APNs 或者应用这些库的托管推送告诉服务。然而，请记住，咱们必须在 Expo 中应用裸工作流来应用这些库，因为这些库不蕴含在 Expo 应用程序中。

演示：如何在 React Native 中设置推送告诉

要在React Native应用程序中应用推送告诉，咱们首先须要注册应用程序以获取推送告诉令牌。这个令牌是一个长字符串，能够惟一标识每个设施。而后，咱们将在服务器上的数据库中存储该令牌，发送告诉，并解决咱们发送的已接管到的告诉。

在咱们深入研究之前，咱们将向一个曾经开发的我的项目增加推送告诉。这个我的项目是一个用于发售二手物品的电子商务React Native应用程序。应用现有的我的项目将使咱们可能专一于咱们演示的推送告诉方面。

要将我的项目的源代码下载到你的电脑中，请在你的终端运行以下命令：

git clone https://github.com/codezri/Done-With-It-App.git

接下来，咱们将装置我的项目所需的依赖项，并启动React Native开发服务器：

yarn install yarn start

上述命令装置依赖项并启动Expo开发服务器，因而你能够通过在Android或iOS上应用Expo利用来测试你的应用程序。带有工作后端的示例利用如下所示：

接下来，咱们将从React Native Expo获取推送告诉令牌，以开始接管应用程序的告诉。

获取推送告诉令牌

记住，要在React Native应用程序中应用推送告诉，咱们首先须要注册应用程序以获取推送告诉令牌。在这里，咱们将应用Expo中的告诉API。

为了做到这一点，让咱们进入 navigation 目录和 AppNavigator 组件。在这里，咱们将从Expo中获取一个令牌。让咱们从上面的Expo获取 Notifications 函数：

import * as Notifications from 'expo-notifications';

上述性能帮忙咱们申请用户权限以发送推送告诉，并为特定设施接管一个独特的 Expo 告诉令牌。

当初，咱们将在 AppNavigator 组件中编写一个 async function ，它将从 React Native Expo 申请一个令牌：

async function registerForPushNotificationsAsync() {    let token;    const { status: existingStatus } = await Notifications.getPermissionsAsync();    let finalStatus = existingStatus;    if (existingStatus !== 'granted') {        const { status } = await Notifications.requestPermissionsAsync();        finalStatus = status;    }    if (finalStatus !== 'granted') {        alert('Failed to get push token for push notification!');        return;    }    token = (await Notifications.getExpoPushTokenAsync()).data;    console.log(token);    return token;}

在上述代码中，咱们应用 expo-notifications 模块来获取用户接管告诉的权限。该函数期待接管告诉权限 status 。

接下来，咱们查看是否已授予权限。如果没有，咱们会显示一个对于谬误的正告，并立刻从函数中 return 。如果令牌申请过程胜利，咱们将从函数中返回令牌。否则，目前，咱们将Expo的 token 记录到控制台，以便于开发。

为了在咱们的利用中调用上述函数，咱们将应用来自React的 useEffect 钩子:

const AppNavigator = () => {    useEffect(() => {        registerForPushNotificationsAsync();    }, []);

在上述代码中，咱们传递了从 React 导入的 useEffect Hook，并传递了一个名为 registerForPushNotificationsAsync 的函数，以确保它只被调用一次。

当初，通过Expo应用程序关上利用。一旦你关上利用，你能够在管制台上看到Expo推送告诉令牌。

当新用户关上利用时，这个独特的令牌将会被生成，所以咱们能够在服务器中存储这些令牌，并以编程形式向所有注册的设施发送告诉。将令牌保留在某处——咱们很快就会用它来测试告诉。

发送测试告诉

咱们能够通过增加推送告诉令牌，应用Expo告诉工具向设施发送测试告诉。进入Expo告诉工具，输出你的令牌，输出题目和形容，放弃你的利用在后盾，而后点击发送告诉按钮来发送测试告诉。

当初你能够在你的设施上看到告诉，如下预览所示：

如果你须要在利用处于前台时显示告诉，你能够在 AppNavigator.js 源文件中增加以下配置：

Notifications.setNotificationHandler({  handleNotification: async () => ({    shouldShowAlert: true  }),});const AppNavigator = () => {// ----// ----

既然咱们曾经手动测试了Expo告诉，那么让咱们在服务器中存储推送告诉令牌，并以编程形式发送告诉。

在我的项目中存储推送告诉令牌

为了存储和应用咱们服务器的推送告诉，咱们须要以一种能够注册新用户和设施的形式配置咱们的应用程序用户界面。

为了实现这个，让咱们进入咱们我的项目的 api 目录并关上一个咱们将命名为 expoPushTokens.js 的新文件。而后依照以下步骤操作：

import client from './client';const register = (pushToken) => client.post('/expoPushTokens', { token: pushToken });export default {    register,}

在上述代码中，咱们首先导入了客户端模块，该模块也在 api 目录中。

咱们定义了一个函数 register ，它承受一个 pushToken 。

当初，咱们将在后端的 /expoPushToken 上公布一个客户端或新用户到 url 。在申请的主体中，咱们将增加一个设置为 pushToken 的对象 token 。而后，咱们将以 register 办法导出为默认对象。

接下来，咱们回到 AppNavigator 组件。咱们将不再在管制台上记录咱们的令牌，而是将其发送到服务器：

const AppNavigator = () => {    useEffect(() => {        registerForPushNotificationsAsync()            .then(token => expoPushTokensApi.register(token));    }, []);

当初，咱们正在将新用户发送去获取令牌，同时也将用户信息发送到咱们的后端服务器。稍后，咱们能够应用这些令牌向所有注册的设施发送告诉。

在服务器上发送告诉

要向服务器发送推送告诉，咱们须要应用Expo提供的一个SDK。如果你拜访Expo的文档，你会找到对于如何在许多语言中实现服务器上的推送告诉的信息。

在这个教程中，我将应用一个Node.js服务器。你能够查看这个GitHub仓库，这是我在这个教程中应用的服务器源代码。咱们将拜访服务器中的 utilities 目录，并在其中蕴含 Expo SDK。要做到这一点，咱们首先须要做以下操作：

# # cd into the newly cloned Git repository.git clone https://github.com/iamfortune/DoneWithIt-Backend.git# Next we install the npm packages using this command:npm install

接下来，将你的计算机的本地网络IP地址增加到React Native利用的 baseURL 和后端我的项目的 assetsBaseUrl 中。

而后咱们用以下命令启动咱们的开发服务器：

npm start

如果你将电脑和挪动设施放弃在同一网络中，你能够在React Native利用中看到一些事后蕴含的列表。

当初，返回后端我的项目中的 utilities/pushNotifications.js 文件。在那里，将 Expo SDK增加到包中：

npm i expo-server-sdk #install the package//file name: utilities/pushNotifications.jsconst { Expo } = require("expo-server-sdk");

接下来，咱们将编写一个函数，该函数将接管咱们的推送告诉——既包含推送令牌，也包含咱们想要发送给用户的音讯。而后，咱们将创立一个新的块办法来解决推送告诉：

const sendPushNotification = async (targetExpoPushToken, message) => {  const expo = new Expo();  const chunks = expo.chunkPushNotifications([    { to: targetExpoPushToken, sound: "default", body: message }  ]);

当初，能够在服务器代码的任何中央调用 sendPushNotification 函数，依据 Expo 推送告诉令牌向任何设施发送告诉，如下所示：

const { Expo } = require('expo-server-sdk');const sendPushNotification = require('../utilities/pushNotifications');// ----// ----if (Expo.isExpoPushToken(expoPushToken)) {  await sendPushNotification(expoPushToken, message);}// ----

你能够在 routes/messages.js 文件中查看 sendPushNotification 函数的示例用法。接下来，让咱们确定如何解决在React Native利用中收到的告诉。

在 React Native 中解决接管到的告诉

要解决接管到的告诉，咱们首先须要有一个事件监听器，每当用户点击告诉时都会被调用。让咱们在 AppNavigator 函数外部增加一个事件监听器，它接管 Notifications 对象：

const AppNavigator = () => {    const responseListener = useRef();    useEffect(() => {        registerForPushNotificationsAsync()            .then(token => expoPushTokensApi.register(token));        // Works when app is foregrounded, backgrounded, or killed        responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {            console.log('--- notification tapped ---');            console.log(response);            console.log('------');        });        // Unsubscribe from events        return () => {            Notifications.removeNotificationSubscription(responseListener.current);        };    }, []);// ----// ----

你能够通过Expo推送告诉工具发送测试告诉，并点击收到的告诉。一旦这样做，将在管制台上看到告诉点击响应。

Expo notifications 包提供了一个监听器，如果应用程序在前台，它能够检测到接管到的告诉事件。以下代码片段会在你的前台利用通过Expo推送告诉零碎接管到告诉时，记录一个特定的告诉对象：

// ----// ----Notifications.setNotificationHandler({  handleNotification: async () => ({    shouldShowAlert: true  }),});const AppNavigator = () => {    const notificationListener = useRef();    useEffect(() => {        registerForPushNotificationsAsync()            .then(token => expoPushTokensApi.register(token));        notificationListener.current = Notifications.addNotificationReceivedListener(notification => {            console.log('--- notification received ---');            console.log(notification);            console.log('------');        });        // Unsubscribe from events        return () => {            Notifications.removeNotificationSubscription(notificationListener.current);        };    }, []);// ----// ----

如果你的应用程序在前台，上述代码会记录告诉对象。看看上面的预览：

你能够从这个GitHub仓库浏览这个React Native利用的残缺源代码。同样，你也能够从这个GitHub仓库浏览残缺的服务器端代码。

请留神，在这里，我没有设置 FCM 就收到了我的 Android 设施的告诉，因为我在应用 Expo 利用进行开发。如果你须要在没有 Expo 利用的状况下测试你的利用，或者你心愿将你的利用部署到 Google Play 或 Apple App Store，请确保正确生成 FCM 和 APNs 凭证。

官网的Expo文档能够领导你为生产利用设置FCM和APNs。然而，因为Expo利用，你能够在不配置FCM或APNs的状况下开发和测试你的应用程序。

应用Expo发送本地告诉

在某些状况下，开发者不须要近程服务器来发送告诉。一个例子能够是音乐播放器，当一首歌曲正在播放时，利用须要显示一个告诉。

在某些状况下，开发者不须要近程服务器来发送告诉。其中一个例子能够是音乐播放器，当播放音轨时，利用须要显示一个告诉：

以下代码块展现了如何创立一个本地告诉：

import { StyleSheet, Text, View, Button } from "react-native";import * as Notifications from "expo-notifications";{  /*Configure our notification settings:*/}Notifications.setNotificationHandler({  handleNotification: async () => ({    shouldShowAlert: true,    shouldPlaySound: true,    shouldSetBadge: true,  }),});const generateNotification = async () => {  //show the notification to the user  Notifications.scheduleNotificationAsync({    //set the content of the notification    content: {      title: "Demo title",      body: "Demo body",    },    trigger: null,  });};return (  <View style={styles.container}>    {/*When clicked, execute the generateNotification function*/}    <Button      title="Generate notification"      onPress={() => generateNotification()}    />  </View>);

这将是代码的后果：

应用Notifee显示告诉

除了Expo的告诉服务，咱们还能够应用 Notifee 来为咱们生成推送告诉。这个库领有许多个性，其中包含：

  • Firebase 和 OneSignal 集成：与Expo不同，Notifee也反对OneSignal令牌。这为用户在应用告诉服务时提供了更多的抉择。
  • 通过 style 属性进行自定义款式：开发者当初能够在告诉中嵌入图片和大量文本
  • 基于触发器的音讯：如果满足某个条件，容许应用程序发送告诉
  • 易于应用的交互API：顾名思义，这使得用户能够通过按钮或文本字段与告诉进行交互

首先，让咱们创立一个空白的React Native我的项目，并装置 notifee 模块以开始应用 Notifee：

npx react-native@latest init notifeeLearnnpm install notifee

而后，要应用这个库，在 App.tsx 文件中编写这段代码：

import notifee from "@notifee/react-native";function App(): React.JSX.Element {  // 定义咱们的处理函数：  async function onDisplayNotification() {    // 申请权限（iOS 须要）    await notifee.requestPermission();    // 创立一个频道（Android 须要）    const channelId = await notifee.createChannel({      id: "default",      name: "默认频道",    });    // 显示一个告诉    await notifee.displayNotification({      title: "告诉题目",      body: "告诉的主体内容",      android: {        channelId,        // 如果你想要告诉被按下时关上利用，须要 pressAction        pressAction: {          id: "default",        },      },    });  }  return (    <SafeAreaView style={styles.main}>    {/*创立一个按钮，点击时，应向用户显示一个告诉*/}      <Button        title="显示告诉"        onPress={() => onDisplayNotification()}      />    </SafeAreaView>  );}

后果:

当初咱们曾经看到了 Notifee 的一个十分根本的实现，让咱们来看一个更简单的例子。

后盾告诉

感激 Notifee，咱们甚至能够创立后盾告诉，即便应用程序敞开，也能够发送。这实用于咱们想要发送一个无声告诉的状况，无论应用程序是否关上，例如文本音讯或已实现的下载，都须要发送。

作为第一步，咱们必须配置后盾事件。为了实现这一点，请导航到 index.js 文件。编写以下代码：

// 文件名：index.jsimport notifee, {EventType} from '@notifee/react-native';// 这个处理器将监听后盾事件：notifee.onBackgroundEvent(async ({type, detail}) => {  const {notification, pressAction} = detail;  // 记录告诉数据  console.log('类型 ', type);  console.log('告诉数据 ', detail);  // 检查用户是否已按下告诉  if (type === EventType.PRESS && pressAction.id === 'default') {    // 进行一些解决..    console.log('默认按钮被按下');    // 在事件被注册后移除告诉。    await notifee.cancelNotification(notification.id);  }});

而后，当用户点击告诉时，React会将他们带回应用程序，并打印出告诉的 id 以及交互类型：

增加交互性和动作

如前所述，咱们甚至能够应用 Notifee 的交互式 API 配置咱们的告诉以使其具备交互性。为此，在你的 displayNotifications 函数中的 actions 数组增加一个 title 和一个 pressAction 字段：

// 文件名：App.tsx// 为简洁起见，移除了不必要的代码await notifee.displayNotification({  //..后续代码..  android: {    //后续代码..    pressAction: {      /*更多代码*/    },    //在此配置动作：    actions: [{ title: "点击我", pressAction: { id: "click-me" } }],  },});

当初咱们曾经创立了一个动作，接下来咱们须要创立一个前台服务处理程序：

// 文件名：App.tsxuseEffect(() => {  // 注册咱们的前台事件：  notifee.onForegroundEvent(({ type, detail }) => {    // 如果告诉上的按钮被点击：    if (type === EventType.ACTION_PRESS && detail?.pressAction?.id) {      console.log("detail", detail);      // 打印出告诉的 id：      console.log(        "用户点击了一个带有 id 的动作：",        detail.pressAction.id,      );    }  });}, []);

后果：

有许多办法能够应用交互式告诉。例如：

  • 如果你在你的社交利用上向用户发送告诉，通知他们有人关注了他们，你能够增加一个按钮，让你的用户能够关注回那个人
  • 如果你揭示媒体利用的用户，比方音乐分享平台的用户，有人分享了一首新歌，你能够增加一个按钮，让用户将这首歌增加到他们的播放队列中
  • 如果你通过你的利用提供了一个工夫敏感的警报，你能够容许用户静音该警报或稍后发送揭示。

应该应用哪个告诉库？

Expo 和 Notifee 都是执行雷同工作的优良开源库。此外，它们具备相似的功能集和学习曲线。因而，这意味着你不须要破费大量工夫来学习这些库。

这里有一个比拟这两个库的表格：

个性Expo NotificationsNotifee
告诉类型本地和近程告诉本地和近程告诉
整合FCM和APNFCM和OneSignal
定制无限的定制选项更多自定义选项
性能高效且轻量级略低于Expo告诉的效率
文档体面的文档优良的文档
社区良好的社区反对弱小的社区反对
须要Expo模块吗？YesNo
最佳应用案例简略告诉简单告诉

如果你想优先思考效率并且只须要简略的本地和近程告诉，Expo是现实的抉择。然而，对于更自定义或简单的告诉，你能够思考应用Notifee。

解决设置推送告诉时的常见问题

开发人员在应用 Expo 告诉和 Notifee 时经常会遇到一些常见的问题。让咱们看看这些问题的起因以及如何解决它们：

  • 我无奈在裸 React Native 利用中运行 Expo 告诉：这是因为 Expo 告诉库依赖于其余 Expo 库。要解决这个问题，请转到 Expo 告诉装置文档并遵循设置步骤。
  • Notifee 无奈在 Expo 我的项目中运行：可怜的是，截至撰写本文时，这依然是一个继续存在的问题。最好是从 Expo 中弹出或者启动一个裸 React Native 我的项目。

总结

在这篇文章中，咱们理解了为什么推送告诉如此受欢迎。咱们还学习了如何在 React Native 应用程序中发送推送告诉，办法是增加告诉令牌，从服务器发送它们，并应用 Expo 告诉 API 在用户设施上显示它们。

此外，咱们摸索了如何通过Notifee库显示本地和交互式告诉。这个库提供了定制推送告诉或创立更简单告诉类型的办法。

交换

首发于公众号 大迁世界，欢送关注。 每周一篇实用的前端文章 ️ 分享值得关注的开发工具 ❓ 有疑难？我来答复

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。