Les notifications push avec Expo SDK 37

Expo a sorti la version 38 de son SDK et il ya une nouvelle api pour les notifications, j’ai fait une vidéo à ce sujet. Le code utilisé dans cet article reste valable mais deviendra obsolète bientôt.

Les Notifications Push sont les messages qui apparaissent sur l’écran de votre smartphone lorsque vous n’utilisez pas l’application.C’un bon moyen de rappeler l’existence de votre application à vos utilisateurs. Lorsqu’elles ne sont pas trop intrusives et restent utiles pour l’utilisateur, elles permettent d’augmenter très rapidement le taux de rétention.

Expo nous permet d’intégrer très facilement les notifications push dans notre application react native. Nous allons voir pas à pas comment envoyer des notifications à nos utilisateurs depuis notre application expo.

1. Installer le expo-cli

$ npm install -g expo-cli

2. Créer le projet

$ expo init ExpoPushNotifications

Expo va installer toutes les dépendances nécessaires pour votre app.

3. Exécuter le projet

$ cd ExpoPushNotifications && expo start

Ou bien

$ cd ExpoPushNotifications && yarn start

Si tout se passe bien vous aurez quelque chose qui ressemble à ça:

3. Tester l’application

Une fois l’application téléchargée, connectez vous sur le même réseau que votre ordinateur et vous verrez votre projet ExpoPushNotifications dans l’application expo client.

Vous pouvez cliquer sur le projet pour l’ouvrir, normalement vous aurez un écran qui ressemble à ça:

Votre application est prête. Vous pouvez effectuer des changements au niveau du App.js et voir directement le résultat dans l’application.

4. Obtention du Expo Push Token

Vous pouvez donc récupérer ce token, le lié à un utilisateur et le stocker sur votre serveur.

En pratique

import { Notifications } from ‘expo’;import * as Permissions from ‘expo-permissions’;

Nous allons maintenant écrire une fonction qui va nous permettre de demander la permission d’envoyer des notifications, si on nous l’accorde on peut récupérer le Expo push token.

Voici notre classe:

Nous avons notre Expo push token:

ExponentPushToken[UwO2W_L5ryJt1Cji5Ta8Qy]

4. Envoi de la notification

Ce qui est cool encore c’est qu’il y a des packages déjà codés que vous pouvez utiliser coté backend en fonction du langage que vous utilisez: PHP , JAVA, PYTHON etc, vous pouvez trouver la liste complète ici.

Mais dans cet article nous allons utiliser le Expo push notification Tool pour envoyer nos notifications facilement sans coder.

C’est une app développée par expo qui permet d’envoyer des notifications push en renseignant le Expo push token , les données que vous voulez envoyer et d’autres paramètres facultatifs:

L’appareil qui possède le expo push token qu’on a renseigné va recevoir la notification:

4. Affichage des données de la notification dans notre app

Nous allons envoyer une nouvelle notification, mais cette fois ci avec des données: {“name”: “mas”}.

Pour afficher les données dans notre app il nous faut faire une souscription qui permet à chaque fois qu’on recevra une notification de faire un traitement spécifique:

Voici notre fonction _HandleNotification() qui s’exécute chaque fois qu’on recevra une notification:

Cette fonction reçoit l’objet notification qui contient nos données et le stocke dans le state.

Ainsi nous pouvons afficher les données reçu dans le render:

Et Dans l’application on voit bien les données envoyées:

On peut après utiliser ces données pour en faire ce qu’on veut. COOL !!

J’espère que cet article vous a aider à comprendre comment fonctionnent les notifications push avec Expo et vous encourage à utiliser Expo pour vos applications React native.

Merci.

Freelancer - React native developer - Expo Fan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store