web-dev-qa-db-fra.com

Comment utiliser le service worker avec FCM for Push Notifications

J'essaie d'utiliser le service worker avec Firebase pour implémenter les notifications Push sur Chrome. J'ai un fichier manifeste et un fichier sw.js dans mon application Web. J'ai créé un projet dans Firebase et j'ai testé l'enregistrement et l'envoi de notifications. tout cela fonctionne bien sauf que, lors de la réception des notifications, les données sont nulles. Je ne comprends pas pourquoi et il n'y a pas de ressources utiles (à ma connaissance!). Voici mon fichier de technicien de maintenance:

self.addEventListener('Push', function(event) {
  console.log('Push message', event);
  var title = 'Push message';
  event.waitUntil(
    self.registration.showNotification(title, {
      body: 'The Message',
      icon: 'images/logo.svg',
      tag: 'my-tag'
  }));
});

Voici mon fichier main.js:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ',    registration.scope);
    registration.pushManager.subscribe({
      userVisibleOnly: true
    }).then(function(sub) {
      console.log('endpoint:', sub.endpoint);
    }).catch(function(e) {

    });
  }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
  });
}

Manifest.json:

{
  "name": "APPNAME",
  "gcm_sender_id": "SENDERID"
}

demande curl:

curl --header "Authorization: key=APIKEY" -application/json" https://fcm.googleapis.com/fcm/send -d "{\"registration_ids\":[\"REGISTRATIONID\"],\"notification\":{\"title\":\"test\",\"body\":\"testing\"},\"data\":{\"title\":\"erse\"}}"

Journal de la console de l'événement Push de sw.js:  enter image description here

Je ne reçois aucune des données que j'ai envoyées dans la demande. Est-ce que cela se fait d'une autre manière avec firebase? Merci d'avance.

javascriptfirebaseservice-workerfirebase-cloud-messaging
12
TheSabby

Selon this , vous pouvez envoyer des données avec la version de notification de chrome à partir de la version 50 de chrome.

Avant Chrome 50, les messages Push ne pouvaient contenir aucune donnée utile. Lorsque l’événement «Push» a été déclenché chez votre prestataire de services, tout ce que vous saviez, c’est que le serveur essayait de vous dire quelque chose, mais pas ce que cela pourrait être. Vous deviez ensuite faire une demande de suivi au serveur et obtenir les détails de la notification à afficher, ce qui pourrait échouer si le réseau était défaillant.

Désormais, dans Chrome 50 (et dans la version actuelle de Firefox sur le bureau), vous pouvez envoyer des données arbitraires avec le Push pour que le client puisse éviter de faire la demande supplémentaire. Cependant, une grande puissance entraîne de grandes responsabilités, de sorte que toutes les données utiles doivent être cryptées.

Pour votre implémentation actuelle, vous pouvez faire quelque chose comme ceci:

self.addEventListener('Push', function(event) {

var apiPath = '<apiPath>';
event.waitUntil(registration.pushManager.getSubscription().then(function (subscription){

    return fetch(apiPath).then(function(response){
        if(response.status !== 200){
            throw new Error();
        }

        return response.json().then(function(data){
            var title = data.title;
            var message = data.body;
            var icon = data.icon;
            var tag = data.tag;
            var url = data.url;
            return self.registration.showNotification(title,{
               body: message,
               icon: icon,
               tag: tag,
               data: url
            });
        })
    }).catch(function(err){

    })

}));
return;
});

Pour toute notification spécifique pouvant être liée à un utilisateur particulier, vous pouvez passer le paramètre d'identifiant d'enregistrement du travailleur dans l'URL de l'API et obtenir la notification correspondant à cet identifiant particulier . J'espère que cela aide!

5
doubt

Selon ce tutoriel vous ne pouvez actuellement pas envoyer de données à GCM:

L’inconvénient de l’implémentation actuelle de l’API Push dans Chrome est qu’il est impossible d’envoyer des données avec un message Push. Non, rien. La raison en est que, dans une implémentation future, les données utiles devront être chiffrées sur votre serveur avant d'être envoyées à un point de terminaison de messagerie Push. De cette façon, le point de terminaison, quel que soit le fournisseur Push, ne pourra pas facilement visualiser le contenu du message Push. Cela protège également contre d'autres vulnérabilités, telles que la validation médiocre des certificats HTTPS et les attaques de type intermédiaire, entre votre serveur et le fournisseur Push. Toutefois, ce cryptage n’est pas encore pris en charge. Par conséquent, vous devrez effectuer une extraction pour obtenir les informations nécessaires à l’établissement d’une notification.

0
ktusznio