9

J'ai donc besoin de mettre en place des notifications push web dans notre application web, j'ai réussi à configurer la messagerie cloud firebase dans mon application avec l'aide de docs, je peux demander à l'utilisateur pour autoriser l'autorisation des notifications et obtenir l'ID de jeton s'il accepte la permission. Le problème est que lorsque j'essaie d'envoyer une notification pour tester le jeton généré, j'obtiens une réponse indiquant que le message est envoyé, mais je ne suis pas en mesure de le recevoir du côté client.Je ne reçois pas la notification push FCM pour le web sur localhost

Mon index.html

<head> 
    <script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script> 
    <link rel="manifest" href="./firebase.json"> 
</head> 
<script> 
    if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('./firebase-messaging-sw.js').then(function(registration) { 
     console.log('Firebase Worker Registered'); 

    }).catch(function(err) { 
     console.log('Service Worker registration failed: ', err); 
    }); 
    } 
    </script> 

Je suis en mesure d'enregistrer avec succès le dossier des travailleurs de service

Mes App.component.ts

var config = { 
      apiKey: "somekey", 
      authDomain: "someproject-2.firebaseapp.com", 
      databaseURL: "https://someproject-2.firebaseio.com", 
      projectId: "someproject-2", 
      storageBucket: "", 
      messagingSenderId: "someid" 
      }; 
      firebase.initializeApp(config); 



     const messaging = firebase.messaging(); 

     messaging.requestPermission() 
     .then(function() { 
      console.log('Notification permission granted.'); 
      return messaging.getToken() 
     }) 
     .then(function(result) { 
      console.log("The token is: ", result); 
     }) 
     .catch(function(err) { 
      console.log('Unable to get permission to notify.', err); 
     }); 

     messaging.onMessage(function(payload) { 
     console.log("Message received. ", payload); 
     }); 

Je reçois la boîte de dialogue d'autorisation case demandant la permission et obtenir un jeton avec ce code

Le code de la boucle que j'ai utilisé pour envoyer des messages

curl -X POST -H "Authorization: key=somekey" -H "Content-Type: application/json" -d '{ 
    "notification": { 
    "title": "Portugal vs. Denmark", 
    "body": "5 to 1", 
    "icon": "firebase-logo.png", 
    "click_action": "http://localhost:8081" 
    }, 
    "to": "sometoken" 
}' "https://fcm.googleapis.com/fcm/send" 

Je suis en mesure d'envoyer des notifications avec succès avec ce code

Je ne peux pas savoir où je vais mal, peut-être parce qu'il est sur localhost? peut-être la méthode onMessage ne fonctionne pas correctement? Toute aide est grandement appréciée!

+0

Le travailleur de service ne travaille pas sur des origines non sécurisées. donc votre localhost doit être sur https. –

+0

Avez-vous découvert le problème? J ai exactement le même problème. – chrisonline

+0

Non, je vous le ferai savoir si je trouve –

Répondre

0

D'accord, je ne l'ai pas eu de réponse pour cela sur StackOverflow, donc je dois le faire moi-même et obtenu ce travail!

Le problème était dans le fichier de service worker, j'ai apparemment pas défini la variable de messagerie.

Si quelqu'un est confronté à ce problème, assurez-vous simplement que votre fichier de service worker ressemble à ceci.

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

firebase.initializeApp({ 
    'messagingSenderId': '182145913801' 
    }); 

const messaging = firebase.messaging(); 
0

Comme indiqué sur le site Web de la FCM:

Le SDK FCM est pris en charge que dans les pages HTTPS servi. Cela est dû à son utilisation de travailleurs de service, qui sont disponibles uniquement sur les sites HTTPS.

Voir https://firebase.google.com/docs/cloud-messaging/js/client

+1

Je ne pense pas, parce que j'ai déployé les changements sur notre site de mise en scène qui n'était pas https, et là je n'ai pas pu enregistrer mon agent de service lui-même une erreur le site n'est pas https Mais cependant sur le local, je suis en mesure d'enregistrer le travailleur de service et obtenir le jeton, cela montre qu'il peut être exécuté sur localhost et je me souviens que le gars dans les tutoriels firebase le faisait sur son http localhost –

+1

Yup vous avez raison, parce que 'localhost' est en blanc coté en chrome, mon erreur j'ai accepté @ManzurKhanSarguroh –

+0

Je vous remercie de prendre le temps de répondre bro –

0

J'ai eu un problème similaire et je suis allé à la messagerie sur le cloud et firebase obtenu ma clé de serveur et a ajouté que la demande boucle.

curl --header "Authorization: key=CloudMessagingServerKey" --header "Content-Type: application/json" -d '{ 
    "notification": { 
     "title": "FCM Message", 
     "body": "This is an FCM Message", 
     }, 
    "to": "token from messaging.getToken()" 
    }' "https://fcm.googleapis.com/fcm/send" 

et mes firebase-messagerie-sw.js ressemblait le code ci-dessous

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

firebase.initializeApp({ 
    apiKey: 'yourapikey', 
    authDomain: 'xxxx.firebaseapp.com', 
    databaseURL: 'https://xxxx.firebaseio.com', 
    projectId: 'xxxx', 
    storageBucket: 'xxxx.appspot.com', 
    messagingSenderId: 'your message sender Id', 
}); 

const messaging = firebase.messaging(); 

qui a fait l'affaire pour moi. Mes erreurs étaient que j'utilisais une erreur serverKey et que je n'utilisais pas importScripts dans mon firebase-messaging-sw.js