Comment envoyer des notifications push Web à l'aide de Firebase (FCM) ?

Publié: 2021-12-29

Pour faciliter ses services de notification sur le Web, IOS et Android, Firebase utilise des services cloud. Firebase Cloud Messaging (FCM) fonctionne en générant des jetons uniques pour chaque appareil et en les utilisant ultérieurement pour envoyer des messages aux appareils respectifs. Pour envoyer des notifications push Web , Firebase génère des jetons à l'aide de javascript.

Dans ce blog, vous apprendrez tout sur la façon de mettre en œuvre les notifications push Web firebase .

Qu'est-ce que la messagerie cloud Firebase ?

Qu'est-ce-que-Firebase-Cloud-Messaging

Firebase Cloud Messaging est le service de notification mobile gratuit de Google. Il permet aux développeurs d'applications tiers d'envoyer des notifications à leurs utilisateurs à partir des serveurs Google Cloud Messaging (GCM). Cela vous permet d'informer les utilisateurs sur les différentes données disponibles pour la synchronisation en temps réel.

Il achemine les messages en amont des applications des utilisateurs vers les serveurs FCM et les messages en aval des serveurs FCM vers les applications des utilisateurs et. Vous pouvez utiliser FCM pour engager, fidéliser et recibler vos utilisateurs, où qu'ils se trouvent dans le monde.

Quels sont les avantages de l'envoi de notifications push Web à l'aide de Firebase ?

Voici les avantages de l'envoi de notifications push Web à partir de firebase .

  • Gratuit pour commencer : vous n'avez pas besoin de payer Google pour bénéficier du FCM service de notifications push. De plus, il est facile à mettre à l'échelle.  
  • Ne vous inquiétez pas des autorisations : étant donné que les bibliothèques FCM utilisent la fusion de manifestes, elles ajoutent automatiquement toute autorisation requise. Cela diminue la quantité d'efforts que vous devez fournir.
  • Enregistrement simplifié : l'adresse utilisée par FCM pour transmettre le message à un appareil est appelée "jeton d'enregistrement". Ce processus a maintenant été rendu asynchrone. La bibliothèque Google se voit automatiquement attribuer un jeton en votre nom. Ainsi, lorsque vous demandez un jeton, vous recevez un jeton d'enregistrement. Pour démarrer la messagerie, il vous suffit d'envoyer ce jeton à vos serveurs.
  • Mise en œuvre facile : La mise en œuvre de FCM est simple et rapide. Comme ses API intuitives sont disponibles dans un seul SDK, vous pouvez résoudre immédiatement les problèmes des clients sans créer d'infrastructure compliquée.
  • Analytics : vous obtenez gratuitement des analyses illimitées de Firebase. Vous obtenez des données précieuses sur l'utilisation de l'application par vos utilisateurs, les clics sur les annonces, etc. Les autres fonctionnalités de Firebase fonctionnent bien avec Firebase Analytics. Ainsi, vous pouvez agir sur tout.
  • Prise en charge multiplateforme : étant donné que les API sont disponibles dans un seul SDK pour C++, JavaScript, Android et iOS, vous pouvez l'étendre à diverses plates-formes sans modifier votre infrastructure.
  • Messagerie de sujet commun : lorsque vous souhaitez informer les utilisateurs intéressés par un sujet particulier, il vous suffit de publier votre message sur FCM. FCM le fournira à tous les utilisateurs qui se sont abonnés à ce sujet. La meilleure chose est qu'il n'a aucune limite sur la messagerie de sujet.
  • Messagerie thématique différente : FCM permet également la segmentation des clients pour leur envoyer des messages pertinents. Par exemple, si vous envoyez des notifications liées au trafic à vos utilisateurs, vos utilisateurs de la ville A recevront uniquement les messages de trafic relatifs à leur ville, et les utilisateurs de la ville B recevront les messages de trafic liés à leur ville uniquement.

Comment envoyer des notifications push Web à l'aide de Firebase ?

Voici des instructions détaillées pour vous aider à mettre en œuvre les notifications push Web Firebase .

1. Enregistrez l'application Firebase

Inscription-Firebase-App
  1. Visitez ce lien https://console.firebase.google.com/u/0/ et appuyez sur l'onglet "Ajouter un projet".
  2. Donnez un nom de projet et sélectionnez le pays. Appuyez ensuite sur l'onglet "Créer un projet". Google vérifiera la disponibilité et l'unicité du nom du projet.
  3. Cliquez maintenant sur l'onglet "Accepter les termes et conditions" pour continuer. Votre projet sera construit dans
  4. quelques secondes.
  5. Ajoutez maintenant votre application Android/IOS/Web/Unity à votre projet. Étant donné que ce blog se concentre sur les notifications push Web Firebase , vous devez continuer en cliquant sur l'icône Web indiquée par </>.
  6. Donnez un surnom à votre application. Ce surnom est réservé aux utilisateurs. Ainsi, vous pouvez utiliser cette fonctionnalité pour faciliter une meilleure différenciation entre les applications d'un projet à usage interne.
  7. Si votre projet ne s'exécute pas sur un serveur HTTPS, ajoutez-y un hébergement. Si ce n'est pas le cas, sautez simplement cette étape.
  8. Cliquez maintenant sur "Enregistrer l'application".  
  9. Maintenant que votre application est enregistrée, vous recevrez un SDK Firebase, qui est un code. Copiez ce code

vers le bas. Il sera utilisé dans la prochaine section. Si vous ne le copiez pas maintenant, vous pouvez le récupérer dans la section "Paramètres".

2. Ajoutez Firebase à votre projet

Ajouter-firebase-à-votre-projet
  1. Accédez au tableau de bord. Dans la barre latérale, vous trouverez l'icône "Paramètres". Clique dessus. Dans le menu qui vous est présenté, cliquez sur les paramètres du projet.
  2. Lorsque la page Paramètres (Paramètres généraux) s'ouvre, faites défiler vers le bas de la page et copiez le code affiché pour le CDN sélectionné.
  3. Incluez le code suivant dans votre fichier HTML à la fin. Incluez également le script CDN pour la messagerie firebase.

< script src = "https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js" > </script>

<script src = "https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js" > </script>

3. Exploitation du service Firebase

1. Pour le code mentionné en haut, ajoutez le code donné en bas, après où vous trouvez // Initialize Firebase.

// Initialiser Firebase

firebase.initializeApp(firebaseConfig);const messagerie=firebase.messaging(); // Fonction personnalisée conçue pour exécuter le service firebase

  getStartToken(); //Ce code reçoit un message du serveur/votre application et imprime un message sur la console si le même onglet est ouvert à partir du projet dans le navigateur

messagerie.onMessage(fonction(charge utile){console.log(“onMessage”,charge utile);});

2. Vous pouvez écrire le code en bas dans un fichier js séparé présent dans votre page HTML ou vous pouvez l'ajouter au code en haut dans la balise <script>.

messagerie.getToken() est une fonction utilisée pour récupérer des jetons à l'aide du SDK Firebase. Si un jeton est trouvé, il est envoyé au serveur pour être stocké, sinon l'autorisation de l'utilisateur est demandée via la fonction RequestPermission().

setTokenSentToServer() est une autre fonction qui utilise le stockage local pour attribuer 1 comme valeur de sendTokenToServer au cas où le jeton a déjà été envoyé au serveur et 0 au cas où le jeton n'est pas envoyé au serveur en raison de l'apparition d'une erreur lorsqu'il est envoyé à le serveur ou est récupéré à partir du SDK firebase.

4. Envoi de notifications depuis le projet

Envoi-de-message-du-projet

Maintenant que tout ce dont vous avez besoin pour envoyer des notifications à partir du projet est prêt, voici des détails sur la façon dont vous pouvez envoyer une notification à l'utilisateur final dont vous connaissez le jeton.

1. Au départ, vous devez recevoir une clé de service. Effectuez les étapes suivantes-

  • Ouvrez la console Firebase
  • Cliquez sur les paramètres du projet
  • Tapez sur 'Cloud Messaging'
  • Vous trouverez un code dans le champ Clé du serveur. Copiez-le.

2. Envoi de notifications push

Utilisons la plate-forme postman pour envoyer des notifications Web push depuis Firebase . Voici les choses que vous devez faire est-

3. Définissez le type de requête POST.

4. Entrez l'URL : https://fcm.googleapis.com/fcm/send

5. Cliquez sur la section En-têtes.

Vous devez remplir deux en-têtes, à savoir, autorisation et type de contenu.

· Autorisation : collez la clé du serveur que vous avez copiée.

· Type de contenu : application/JSON (JavaScript Object Notation)

6. Maintenant, cliquez sur ouvrir la section Corps. Collez le jeton utilisateur que Firebase a récupéré au moment de l'enregistrement de l'utilisateur.

7. Envoyez maintenant la demande. Vous pourrez envoyer des notifications push à vos utilisateurs depuis le serveur.

Notez que lorsque vous envoyez votre première notification push à un utilisateur, le navigateur Web lui demandera la permission de recevoir des notifications de votre part. Ce n'est que s'il accorde la permission que vous pourrez continuellement envoyer des push. Vous pouvez vous assurer que votre utilisateur accorde son autorisation en suivant nos conseils sur les notifications push.

Vous auriez compris maintenant que l'envoi de notifications push Web à l'aide de Firebase n'est pas aussi difficile qu'il n'y paraît. Cela ne nécessite pas beaucoup de ressources et ne prend pas beaucoup de temps. D'ailleurs, en utilisant notifications push Web Firebase n'influence pas les dépenses de maintenance de votre site Web ou de votre application Web. Si vous avez encore besoin de plus de détails sur ses fonctionnalités, consultez la documentation de Firebase.

Faites une visite guidée du produit

A lire aussi :

  • 7 facteurs surestimés des notifications push Web
  • Notifications poussées Web | Une tactique de marketing direct par e-mail
  • 41 statistiques sur les notifications push Web que les spécialistes du marketing doivent connaître
  • 15 meilleurs logiciels et outils de notification push en 2022 {comparé}
  • Comment les notifications push Web sont-elles efficaces par rapport aux autres supports marketing ?