Progressive Web App (PWA) définit la future forme d’application Web. Google a prédit que PWA remplacerait de nombreuses applications mobiles dans les 3 prochaines années.

Ce n’est pas une surprise si le fondateur de Tapzo a résumé dans son article Le secret le moins bien gardé de l’industrie des applications mobiles a montré que le manque de stockage est la raison principale pour laquelle 60 à 80% des utilisateurs désinstallent l’application mobile native dans un délai de 90 jours.

En comparaison avec une application Web, une application mobile peut accéder aux fonctions natives mobiles telles que les notifications push, l’appareil photo et d’autres fonctionnalités que l’application Web ne possède pas. La bonne nouvelle est qu’avec l’arrivée des applications web progressive, l’application Web enfin en mesure d’accéder à davantage de fonctionnalités natives.

Au Maroc, de plus en plus de sites internet qui migrent vers une progressive web app. Il est donc important de compléter cette migration par des fonctionnalités primordiales afin de profiter pleinement des avantages qu’offrent les progressive web apps aux utilisateurs au Maroc et partout dans le monde.

Dans cette article, nous allons nous intéresser à l’un des principaux avantages des progressive web apps : l’engagement !

Les notifications push dans la progressive web app

La notification push est l’un des moyens efficaces pour améliorer le taux de rétention et d’accroître l’engagement des utilisateurs . La notification push reçue en temps voulu rappelle aux utilisateurs de réagir à la messagerie en ligne, d’aller vérifier le panier avant les offres et les ventes et même d’informer les utilisateurs que de la mise en ligne d’un nouvel article de blog.

La magie de la notification push est qu’elle permet aux périphériques d’être mis à jour par le serveur sans vider votre batterie. Une fois que vous avez activé la notification push, vous pouvez recevoir l’alerte même sans visiter le site Web.

Qu’est-ce que la messagerie Cloud Firebase?

Firebase Cloud Messaging (FCM) est un service proposé par Google qui vous permet de relayer les messages du serveur vers les périphériques enregistrés et les applications Web. Le service de la FCM est gratuit avec certaines limitations. La taille est limitée à 2 Ko ou 4 Ko selon le type de données. Le message sera conservé pendant une durée par défaut de 4 semaines avant d’être supprimé.

La FCM propose une gamme d’outils utiles pour vous aider à créer de bons moyens d’engagement avec les utilisateurs. Vous pouvez créer un A/B testing pour voir quels sont les libellés et la présentation optimaux à utiliser. Vous pouvez aussi étudier le comportement des utilisateurs à l’aide des données d’analyse fournies.

Firebase Predictions est la dernière fonctionnalité ajoutée à la plateforme, et c’est probablement l’une des meilleures. Les prévisions intègres le programme machine learning de Google à vos données d’analyse pour prévoir l’action probable des utilisateurs en fonction de leur comportement.

Outre FCM, vous pouvez également envisager Amazon Simple Notification Service (SNS) et OneSignal . Les deux sont également populaires et utilisés par beaucoup de développeurs. Si vous souhaitez connaître le fonctionnement des deux services, nous pourrons écrire une autre application de démonstration la prochaine fois.

Tutoriel de démonstration

Dans cet article, nous vous expliquerons comment faciliter l’activation de la notification push à l’aide de FCM. Nous partagerons également avec vous certains des petits conseils à prendre en compte afin que vous puissiez les consulter le plus rapidement possible.

Étape 1: Enregistrer un compte Firebase

Depuis le site web de Firebase cliquez sur « Accéder à la console ». Une fois connecté, vous verrez la page suivante. Cliquez sur “Ajouter un projet” pour créer un nouveau projet. Donnez un nom à votre projet et choisissez le pays / région qui correspond à vos rapports de devise et de revenus.

 

Étape 2: Obtenir les informations d’identification de votre projet

Maintenant, cliquez sur l’icône à côté de “Aperçu du projet” en haut à gauche> choisissez “Paramètres du projet”. Cliquez ensuite sur “Cloud Messaging” dans la page des paramètres, comme ci-dessous. Prenez note de la clé de serveur et de l’ID de l’expéditeur, vous en aurez besoin plus tard. Vous pouvez ignorer la “clé de serveur héritée” et utiliser la “clé de serveur”. Autrement. vous rencontrerez un problème lors de l’exécution de curl pour tester l’envoi de la notification.

Paramètres du projet Firebase pour Cloud Messaging

Étape 3: Créer le code HTML simple

Sans plus tarder, commençons à écrire le code HTML simple. La page nous montrera plus tard le jeton et tout message envoyé par Firebase. 

<html>
<title>Firebase Messaging Demo</title>
<style>
    div {
        margin-bottom: 15px;
    }
</style>
<body>
    <div id="token"></div>
    <div id="msg"></div>
    <div id="notis"></div>
    <div id="err"></div>
    <script>
       MsgElem = document.getElementById("msg")
       TokenElem = document.getElementById("token")
       NotisElem = document.getElementById("notis")
       ErrElem = document.getElementById("err")
    </script>
</body>
</html>

Étape 4 : initialisation de Firebase et création de Service Worker JS

Ensuite, vous devez inclure le firebase.js. N’oubliez pas de remplacer votre “ID expéditeur” en tant que valeur du champ messagingSenderId. Après cela, vous pouvez initialiser Firebase.

<script>
    var config = {
        messagingSenderId: '<replace-with-your-sender-id>'
    };
    firebase.initializeApp(config);
</script>

Copiez le texte suivant sur firebase-messaging-sw.js et placez-le à la racine du dossier Web. Le service worker sera créé.

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

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
   'messagingSenderId': 'YOUR-SENDER-ID'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/itwonders-web-logo.png'
  };

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

Sans le fichier firebase-messaging-sw.js, vous obtiendrez l’erreur suivante :

; FirebaseError: Messaging: We are unable to register the default service worker. 
Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration).

 

Étape 5 : Demander l’autorisation du périphérique

Dans le cadre de la politique de confidentialité de l’utilisateur et pour le protéger des notifications non souhaitées, nous devons lui demander explicitement de lui envoyer une notification.

const messaging = firebase.messaging();
 messaging
   .requestPermission()
   .then(function () {
     MsgElem.innerHTML = "Notification permission granted." 
     console.log("Notification permission granted.");
   })
   .catch(function (err) {
   ErrElem.innerHTML = ErrElem.innerHTML + "; " + err
   console.log("Unable to get permission to notify.", err);
 });

Si vous démarrez un serveur local et servez le code ci-dessus, vous obtiendrez une invite de requête semblable à la capture d’écran suivante :

demande de notification

demande de notification

Étape 6: Obtention du jeton de périphérique

Une fois que l’utilisateur nous a donné l’autorisation d’envoyer la notification, nous pouvons obtenir un jeton d’enregistrement FCM pouvant être utilisé pour envoyer des messages push à cet utilisateur. Par souci de simplicité, cette application de démonstration ne stocke pas le jeton d’enregistrement dans la base de données. Nous allons modifier la fonction précédente pour obtenir le jeton et l’imprimer sur la page Web.

const messaging = firebase.messaging();
 messaging
   .requestPermission()
   .then(function () {
     MsgElem.innerHTML = "Notification permission granted." 
     console.log("Notification permission granted.");

     // get the token in the form of promise
     return messaging.getToken()
   })
   .then(function(token) {
     // print the token on the HTML page
     TokenElem.innerHTML = "token is : " + token
   })
   .catch(function (err) {
   ErrElem.innerHTML = ErrElem.innerHTML + "; " + err
   console.log("Unable to get permission to notify.", err);
 });

Étape 7: test d’envoi d’un message push

Vous êtes maintenant prêt à envoyer un message push à votre application Web! Nous allons utiliser la commande curl pour lancer la demande afin d’informer FCM d’envoyer la notification à l’appareil en question. Remplacez votre API_ACCESS_KEY et le DEVICE_REGISTRATION_TOKEN que nous avons obtenus tout à l’heure. Vous pouvez obtenir votre API_ACCESS_KEY en cliquant sur “Authentification” sous “Développer”, puis sur “WEB SETUP” en haut à droite.

Pour permettre à vos utilisateurs de reconnaître immédiatement que la notification provient de vous, vous pouvez spécifier l’icône correspondante.

curl -X POST -H "Authorization: key=<Server Key>" \
   -H "Content-Type: application/json" \
   -d '{
  "data": {
    "notification": {
        "title": "FCM Message",
        "body": "This is an FCM Message",
        "icon": "/itwonders-web-logo.png",
    }
  },
  "to": "<DEVICE_REGISTRATION_TOKEN>"
}' https://fcm.googleapis.com/fcm/send

Lorsque votre application est au premier plan, c’est-à-dire que l’utilisateur visualise actuellement la page Web, vous pouvez recevoir une notification directement sur la page. Pour cet exemple, nous affichons la totalité de la charge de notification comme ci-dessous.

recevoir une notification app premier plan

Toutefois, si votre application est en arrière-plan, le message reçu déclenchera une notification d’affichage dans le navigateur, comme dans la capture d’écran ci-dessous. Vous pouvez spécifier l’action à exécuter si l’utilisateur clique également sur la notification. Par exemple, ouvrez le navigateur et accédez au site.

La solution complète

Voici le code complet basé sur ce que nous avons discuté jusqu’à présent. Vous pouvez également obtenir le code source de GitHub via ce lien .

<html>
<title>Firebase Messaging Demo</title>
<style>
    div {
        margin-bottom: 15px;
    }
</style>
<body>
    <div id="token"></div>
    <div id="msg"></div>
    <div id="notis"></div>
    <div id="err"></div>
    <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
    <script>
        MsgElem = document.getElementById("msg")
        TokenElem = document.getElementById("token")
        NotisElem = document.getElementById("notis")
        ErrElem = document.getElementById("err")
        // Initialize Firebase
        // TODO: Replace with your project's customized code snippet
        var config = {
            apiKey: "<API_KEY>",
            authDomain: "<PROJECT_ID>.firebaseapp.com",
            databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
            storageBucket: "<BUCKET>.appspot.com",
            messagingSenderId: "<SENDER_ID>",
        };
        firebase.initializeApp(config);

        const messaging = firebase.messaging();
        messaging
            .requestPermission()
            .then(function () {
                MsgElem.innerHTML = "Notification permission granted." 
                console.log("Notification permission granted.");

                // get the token in the form of promise
                return messaging.getToken()
            })
            .then(function(token) {
                TokenElem.innerHTML = "token is : " + token
            })
            .catch(function (err) {
                ErrElem.innerHTML =  ErrElem.innerHTML + "; " + err
                console.log("Unable to get permission to notify.", err);
            });

        messaging.onMessage(function(payload) {
            console.log("Message received. ", payload);
            NotisElem.innerHTML = NotisElem.innerHTML + JSON.stringify(payload) 
        });
    </script>

    <body>

</html>

Conlusion

C’est tout pour le moment ! Merci pour la lecture et si vous trouvez cet article utile, n’oubliez pas d’aimer notre page Facebook et d’ajouter notre site à votre écran d’accueil pour recevoir les notifications à chaque nouvel article. Vos commentaires nous aideront à faire encore mieux au prochain article. Vous pouvez aussi confier la création de progressive web app au Maroc à Upsellium.

 

Références: https://firebase.google.com/docs/cloud-messaging/js/client

Upsellium, agence de création d’application web progressive au Maroc