Les notifications push FCM arrivent deux fois si le navigateur est en arrière-plan

Question

J'ai mis en place un simple site de notification push, les notifications arrivent bien si le navigateur est en premier plan. Le problème commence si le navigateur est en arrière-plan: la notification arrive deux fois, l'une avec l'image et les autres paramètres définis et l'autre n'a que le message du corps et du titre.

Contenu du travailleur de service:

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

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

const messaging = firebase.messaging(); 

messaging.setBackgroundMessageHandler(function(payload) { 
    console.log('[firebase-messaging-sw.js] Received background message ', 
    return null; 
}); 

self.addEventListener('install', function (event) { 
    event.waitUntil(skipWaiting()); 
}); 

self.addEventListener('activate', function (event) { 
    event.waitUntil(clients.claim()); 
}); 

self.addEventListener('push', function (event) { 
    var pushData = event.data.json(); 
    try { 
     var notificationData = pushData.data; 
     notificationData.data = JSON.parse(notificationData.data); 
     console.log(notificationData); 
     self.registration.showNotification(pushData.notification.title, notificationData); 
    } 
    catch (err) { 
     console.log('Push error happened: ', err); 
    } 
}); 

js côté client:

firebase.initializeApp(firebaseConfig); 
const messaging = firebase.messaging(); 

messaging.onMessage(function (payload) { 
    console.log("notification recieved"); 
    return null; 
}); 

self.addEventListener('push', function (event) { 
    console.log("window push stuff"); 
    return null; 
}); 

Merci!

Answer 1

Le problème peut être résolu avec l'ajout de cette ligne à l'événement messaging.setBackgroundMessageHandler:

self.registration.hideNotification(); 

De cette façon, la notification par défaut ne sera pas affiché et vous devez montrer votre notification en cas self.addEventListener.