messaging.onMessage() (JavaScript) n'est pas appelé lorsque la notification push est envoyée.

Question

J'ai trouvé une question similaire sur Stackoverflow mais malheureusement elle n'a pas reçu de réponse.

J'essaie d'envoyer une notification push à Web en utilisant FCM. J'ai configuré mon serveur d'applications et cela fonctionne bien lorsque je mets les tokens des appareils Android et les notifications sont délivrées avec succès à tous les tokens. Cependant, la fonction onMessage() sur le Web n'est pas appelée lorsque la notification est envoyée sur le Web.

Mon code est :

<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
       <script>
         // Initialize Firebase
         var config = {
           apiKey: "xxxxxxxxx",
           authDomain: "xxxxxxxx",
           databaseURL: "xxxxxxx",
           projectId: "xxxxxxxxxxxx",
           storageBucket: "xxxxxxxxx",
           messagingSenderId: "xxxxxxxxx"
         };
         firebase.initializeApp(config);

           //Get Token
          const messaging = firebase.messaging();
          messaging.requestPermission()
           .then(function () {
               console.log('Have permission');
               return messaging.getToken();
           })
        .then(function (token) {
            console.log(token);
        })
          .catch(function (err) {
              console.log('Error occurred');
          });

          messaging.onMessage(function (payload) {
              console.log('onMessage', payload);
          })

Code pour le code firebase-messaging-sw.js :

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

var config = {
apiKey: "xxxxxxxxx",
authDomain: "XXXXXXXXXX",
databaseURL: "XXXXXXXXXX",
projectId: "XXXXXXXXXX",
storageBucket: "XXXXXXXXX",
messagingSenderId: "XXXXXXXXXX"
};

firebase.initializeApp(config);

const messaging = firebase.messaging();

Je n'arrive pas à comprendre ce qui ne va pas.

Answer 1

J'ai trouvé ce sujet si peu documenté lorsque j'ai essayé de m'y mettre que j'ai failli abandonner à plusieurs reprises. J'espère donc que d'autres personnes lisant ce document pourront le trouver utile.

L'ensemble du concept des notifications push est d'autant plus confus qu'il s'agit en fait de différentes API Web qui fonctionnent ensemble, ce qui n'est pas toujours clair. Ensuite, il y a le débat sur la question de savoir si vous devez utiliser VAPID ou FCM ? Et pourquoi pas VAPID avec FCM ? Bla bla bla.

Donc, tout d'abord, vous devez gérer la vérification / l'obtention de la permission de l'utilisateur pour les notifications, la création / la mise à jour de l'abonnement, la sauvegarde du jeton, etc. Si vous obtenez un jeton / un abonnement, vous êtes prêt à envoyer des données au client (c'est le rôle de l'API Push).

Techniquement, c'est tout ce dont vous avez besoin si vos utilisateurs ne quittent jamais votre site Web, mais il est évident qu'ils le feront, c'est pourquoi vous avez besoin d'un travailleur de service. Le travailleur de service peut recevoir vos données push sans que l'utilisateur ait votre site ouvert et en faire quelque chose. (C'est le croisement de l'API Push/Service Worker).

Enfin, vous voulez que vos utilisateurs voient ce sur quoi vous leur avez envoyé un message, n'est-ce pas ? L'API Push transmet les données de votre message à votre prestataire de services, mais vous devez encore traiter ces données. Vous souhaitez probablement afficher une notification, et vous avez donc besoin de l'API Notification.

Maintenant, en regardant votre code, vous semblez faire la première partie dans votre front-end et obtenir un jeton pour vos utilisateurs, mais votre service worker ne contient littéralement aucun code, donc il ne fait rien. Je sais que Firebase a des gestionnaires d'événements personnalisés, mais les gestionnaires standards de push web devraient aussi fonctionner.

Tout ce dont vous avez besoin pour commencer est un gestionnaire de base pour les événements de poussée dans votre code de travailleur de service, comme ceci :

self.addEventListener('push', function(event) {
    const push = event.data.json();
    const title = push.data.title;
    const options = JSON.parse(push.data.options);
    event.waitUntil(registration.showNotification(title, options));
});

Ce qui est bien, c'est qu'en gardant le code simple et en ne codant pas en dur les options de la notification dans le travailleur de service, cela permet à votre code côté serveur de personnaliser le comportement et l'apparence de chaque notification à la volée. Le travailleur de service se contente littéralement d'analyser l'entrée JSON de la charge utile du push et de créer une notification en utilisant les options de la charge utile.

Vous pouvez trouver des listes des options disponibles pour l'API de notification. aquí Ils sont encore en train de changer, mais pour l'instant, l'exemple PHP suivant, associé au code du travailleur de service ci-dessus, enverra une notification assez complète via Firebase :

$push['to'] = $SUBSCRIBED-FCM-TOKEN;
$push['data']['title'] = 'Here is my title';
$push['data']['options']['body'] = 'and here is the body message';
$push['data']['options']['badge'] = '/images/chaticon.png';
$push['data']['options']['requireInteraction'] = true;
$push['data']['options']['tag'] = 'notification-tag';
$push['data']['options']['icon'] = '/images/icons/256.jpg';
$push['data']['options']['vibrate'] = array(500,150,500,150,500);
$push['data']['options']['image'] = '/images/logo.jpg';
$push['data']['options']['actions'] = array(array('action' => 'accept-action', 'title' => 'Yes', 'icon' => '/images/icons/yes.jpg' ), array('action' => 'reject-action', 'title' => 'No', 'icon' => '/images/icons/no.jpg'));
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://fcm.googleapis.com/fcm/send");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($push));
curl_setopt($ch, CURLOPT_POST, 1);
$headers = array();
$headers[] = "Content-Type: application/json";
$headers[] = "Authorization: key=$SERVER-KEY-FROM-FIREBASE-CONSOLE";
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$result = curl_exec($ch);
curl_close ($ch);

Vous pouvez choisir d'ajouter des événements de récupération en réponse aux clics sur vos actions de notification, etc. pour effectuer d'autres actions, pour l'analyse ou autre. Vous pouvez également modifier le comportement selon que l'utilisateur se trouve déjà sur votre site ou non.