Notification web Fire-base non reçue alors qu'il n'y a pas d'erreur

Question

Je travaille avec une application web dans laquelle je veux intégrer les notifications Firebase mais après avoir configuré toutes les exigences, j'ai essayé d'utiliser le compositeur de notification Firebase pour le tester, je n'ai pas eu d'erreurs et le statut du message était terminé mais je n'ai rien reçu ni en arrière-plan ni en avant-plan.

voici mon code

index.html

  <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "MY_API_KEY",
        authDomain: "app.firebaseapp.com",
        databaseURL: "https://app.firebaseio.com",
        projectId: "app",
        storageBucket: "app.appspot.com",
        messagingSenderId: "MY_SENDER_ID"
      };
      firebase.initializeApp(config);

      var messaging = firebase.messaging();
      messaging.usePublicVapidKey("BLWwgk4yFuoNHdPDccuDnXYmhxZA8kwpWArWaE3t7njDT90-30dcWlJIhFbXxMpfXczcvtU8AvMf_F1EJg8Qy");
      messaging.requestPermission().then(function(res) {
        console.log('test')
        messaging.getToken().then(function(res){
          console.log(res)
        })
      })
      messaging.onTokenRefresh(function() {
        messaging.getToken()
        .then(function(refreshedToken) {
          console.log('Token refreshed.');
        })
        .catch(function(err) {
          console.log('Unable to retrieve refreshed token ', err);
        });
      });
      messaging.onMessage(function(payload) {
        console.log("Message received. ", payload);
        // ...
      });
    </script>

firebase-messaging-sw.js

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({
  'messagingSenderId': 'MY_SENDER_ID'
});

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: '/firebase-logo.png'
};

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

statut du compositeur de notifications Firebase

Notes :

aucune erreur sur la console du navigateur.
aucune erreur sur la console Firebase.

Answer 1

J'ai eu le même problème puis j'ai compris que la version de firebase que j'utilise en avant-plan est différente de la version dans sw, donc j'ai changé pour la même version que j'utilise en avant-plan et le problème est résolu. J'espère que cela vous aidera

Answer 2

J'ai eu exactement le même problème. Le problème n'était pas du tout dans mon code frontal mais dans les requêtes envoyées par la console firebase. Je vous suggère d'utiliser Postman ou votre propre backend pour envoyer une requête et voir si cela fonctionne.

Voici une démonstration rapide de ma requête postman.

method: POST

url : https://fcm.googleapis.com/fcm/send

Headers :

 "Content-Type": "application/json", 
 "Authorization": (Your server key which is found in Cloud messaging settings in firebase console) Edit: Make sure to add "key=" before your server key. Example - "Authorization" : "key=AAAA7_.......QRIM"

Body:

  "to" : (Your front end app token),
  "data" : {
            "body" : "Test message",
            "title" : "Test title"
           }

J'espère que cela vous aidera