Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FCM Push notifications arrive twice if the browser is in background

I've set up a simple push notification site, the notifications arrive okay if the browser is in foreground.

The problem begins if the browser is in background: the notification arrives twice, one styled with image and other settings set and the other has only title and body message.

Content of the service worker:

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);
    }
});

Client side js:

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;
});

Thanks!

like image 453
Szántó Zoltán Avatar asked Oct 11 '17 13:10

Szántó Zoltán


People also ask

Does web push notification work when browser is closed?

The answer is “no” when we are talking about desktop devices like laptops and PCs. However, you can receive browser push notifications on your mobile device without opening your browser app. The only requirement to receive a push is an unlocked screen and an installed and activated browser app like Chrome.

How does push notification work in browser?

A push service receives a network request, validates it and delivers a push message to the appropriate browser. If the browser is offline, the message is queued until the the browser comes online. Each browser can use any push service they want, it's something developers have no control over.

How does FCM push notification work?

The message is composed, either in the Notifications composer or a trusted environment, and a message request is sent to the FCM backend. The FCM backend receives the message request, generates a message ID and other metadata, and sends it to the platform specific transport layer.

What is a ghost push notification?

Tracking uninstalls You send a push campaign to a user. 12 hours later, Iterable sends a "ghost push" (not visible or audible) to that same user. If the app has been uninstalled and the ghost push cannot be delivered, Iterable tracks an uninstall.


1 Answers

Simplest way to 100% avoid multiple notifications is adding "tag", eg.:

var options = {
    body: "text",
    tag: "notification-1"
};
self.registration.showNotification("title", options)
like image 132
Martin Zvarík Avatar answered Oct 24 '22 09:10

Martin Zvarík