Comment implémenter les notifications push dans React Native (Android)

Avez-vous déjà pensé aux notifications que nous recevons des applications que nous avons installées ? ou Comment Swiggy ou Zomato nous incitent-ils à commander de la nourriture à 3 heures du matin avec leurs notifications créatives ? ?

Plongeons en profondeur dans le concept des notifications !

Que sont les notifications ?

Une notification est un message ou une alerte envoyé par une application pour informer les utilisateurs des mises à jour, des événements ou des actions, généralement envoyés en dehors de l'interface de l'application.

Il peut désormais y avoir deux types de notifications, comme indiqué ci-dessous -

Notification poussée

Les notifications push sont des messages ou des alertes envoyés depuis un serveur vers une application lorsque l'application ne s'exécute pas activement au premier plan. Ils sont principalement utilisés pour maintenir l’engagement des utilisateurs en envoyant des mises à jour, des rappels ou du contenu personnalisé. Les notifications push sont envoyées via les services du système d'exploitation tels que Apple Push Notification Service (APN) pour iOS ou Firebase Cloud Messaging (FCM) pour Android.

Comment fonctionne la notification push :

1. Inscription : lorsque l'application est installée ou ouverte pour la première fois, l'application demande un jeton d'appareil unique au service de notification push du système d'exploitation (APN ou FCM).
2. Communication du serveur : l'application envoie ce jeton au serveur principal de l'application, qui le stocke pour une utilisation ultérieure.
3. Envoi de notifications : le serveur envoie une charge utile de notification (contenant un titre, un message, des boutons d'action, etc.) au service de notification push (APN/FCM) avec le jeton de l'appareil.
4. Livraison : le service de notification push transmet le message à l'appareil concerné, même si l'application n'est pas en cours d'exécution.

Notification dans l'application

Les notifications dans l'application sont des messages ou des alertes affichés aux utilisateurs lorsqu'ils utilisent activement l'application. Contrairement aux notifications push, celles-ci ne nécessitent pas l'intervention du serveur et sont déclenchées au sein de l'application elle-même, généralement à la suite d'actions de l'utilisateur ou d'événements liés à l'application.

Comment fonctionne la notification dans l'application :

1. Déclencheur d'événement : lorsqu'un événement spécifique se produit dans l'application (comme un utilisateur atteignant un jalon ou une fonctionnalité nécessitant une attention), l'application peut déclencher une notification dans l'application.
2. Affichage : la notification est affichée sous forme de bannière, modale ou contextuelle dans l'interface utilisateur de l'application, guidant l'utilisateur ou l'informant de l'événement.
3. Logique personnalisée : les notifications dans l'application sont gérées directement par le code de l'application et peuvent être affichées dynamiquement en fonction de l'état interne ou de la logique de l'application.

Implémentation dans l'application Android React Native :

Maintenant que nous connaissons les notifications et leurs types, il est temps d'implémenter la fonctionnalité dans votre propre application native React. Ce guide concerne uniquement la mise en œuvre de la notification push dans l'application Android native React. Si vous souhaitez une notification iOS ou dans l'application, écrivez un commentaire et je le publierai à coup sûr !

Pour commencer, nous utiliserons un service tiers appelé OneSignal. Je suis récemment tombé sur cette plateforme et j'ai été choqué par les services qu'elle propose.

À propos de OneSignal :

OneSignal est un service de notification push qui permet aux développeurs d'applications d'envoyer des notifications ciblées aux utilisateurs sur diverses plates-formes, notamment des applications mobiles, des sites Web et des e-mails. Il prend en charge les notifications push, dans l'application et Web, offrant des fonctionnalités telles que la segmentation, l'automatisation, les tests A/B et l'analyse en temps réel. OneSignal est largement utilisé pour améliorer l'engagement et la fidélisation des utilisateurs en offrant une solution facile à intégrer pour l'envoi de messages personnalisés. Leur niveau gratuit comprend 10 000 envois d'e-mails gratuits par mois, des envois push mobiles illimités, des flux de travail de parcours, la conformité au RGPD, des tests A/B

Revenant au guide, puisque nous savons déjà que les notifications push nécessitent une gestion côté serveur via FCM (Firebase Cloud Messaging) il y a donc quelques étapes à suivre :

1. Configurer le projet Firebase (ignorez les deux premières étapes si vous avez déjà un projet Firebase) :

   • Accédez à la console Firebase et connectez-vous à votre compte.
   • Créez un projet à partir d'ici et suivez les étapes
   • Une fois votre projet créé, accédez aux paramètres du projet dans la barre latérale
   • Accédez aux comptes de service depuis la barre et cela devrait ressembler à ceci
   • Cliquez sur Générer une nouvelle clé privée et cela téléchargera un fichier json, stockez-le soigneusement dans un endroit sûr, nous en aurons besoin lors de la configuration de OneSignal.

2. Configurer OneSignal

   • Allez sur OneSignal et créez un compte.
   • Après avoir créé un compte, suivez les étapes de configuration et créez une organisation. Vous verrez maintenant une page pour ajouter des applications.
   • Dans cette page, donnez le nom de votre application et sélectionnez Google Android (FCM) pour notre cas. et cliquez sur Configurer votre plateforme
   • Vous serez maintenant redirigé vers cette page où nous utiliserons le fichier json du compte de service téléchargé lors de la configuration de Firebase Téléchargez le json puis Enregistrer et continuer
   • Sur la page suivante, sélectionnez React Native/Expo comme SDK cible, puis Enregistrer et continuer à nouveau
   • Dans l'écran suivant, vous obtiendrez votre ID d'application, il s'agit d'un identifiant confidentiel et en utilisant cet identifiant, n'importe qui peut déclencher une notification dans votre application, alors soyez prudent avec ce secret.

Nous avons terminé la configuration dans Firebase et OneSignal, il ne reste plus que du Café avec code

Ajoutez OneSignal à votre application et configurez-le

• Étape 1 : ajoutez OneSignal à votre application en exécutant d'abord cette commande

                       npm i react-native-onesignal

• Étape 2 : Dans votre index.js ou App.tsx ou App.js selon la racine de votre projet, importez OneSignal

             import { OneSignal } from 'react-native-onesignal';

et vous avez ajouté cet extrait de code pour initialiser OneSignal

                    OneSignal.initialize('YOUR_APP_ID');

Vous pouvez intégrer cela dans un hook useEffect pour une intégration et une connectivité transparentes avec OneSignal.

Cela initialisera l'appareil avec un identifiant unique pour OneSignal et vous pourrez le vérifier dans les abonnements dans la barre latérale. Chaque appareil initialisé sera identifié avec cet OneSignal ID unique et vous pouvez également le définir manuellement si vous avez déjà des utilisateurs avec leur propre identifiant unique en utilisant cet extrait de code :

                         OneSignal.login(userId)

Une fois que l'utilisateur est abonné avec succès, il s'affichera dans le tableau de bord comme ceci

Maintenant, vous pourriez rencontrer des problèmes liés à l'utilisation incorrecte de OneSignal ou à des erreurs critiques. Voici donc une partie que vous pouvez suivre et qui m'a aidé à résoudre ces problèmes.

• Étape 3 : Dans votre androidappbuild.gradle, ajoutez cet extrait de code

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• Étape 4 : Dans Android, pour fournir les autorisations nécessaires pour les notifications push, dans androidappsrcmainAndroidManifest.xml, ajoutez

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

juste avant la balise d'application. L'autorisation INTERNET est cependant facultative puisqu'elle peut être activée par défaut.

Boum ? Toutes les étapes sont couvertes pour la mise en œuvre des notifications push et vous pouvez envoyer une notification de test à partir du tableau de bord OneSignal lui-même.

Essayez vous-même et en cas de doute, vous pouvez commenter ci-dessous. Suivez pour des guides plus détaillés !

Références :
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

Bon codage !?‍?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!