Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FCM Messaging Chrome push notifications from service worker click and icon won't work

This code show my notifications, all is good, but in the notification popup i see no icon, and click notification just close it and not open window. This code i get from this (Google's tutorial).

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

firebase.initializeApp({
    'messagingSenderId': 'my id'
});

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
    var title = '';
    var body = '';

    if(payload && payload.notification) {
        if(payload.notification.body) {
            body = payload.notification.body;

            if(payload.notification.title) {
                title = payload.notification.title;
            }
        }
    }

    return self.registration.showNotification(title, {
        body: body,
        icon: '/img/logos/logo-short-blue.png'
    });
});

self.addEventListener('notificationclick', function(event) {
    event.notification.close();

    var appUrl = '/' + event.notification.data.actionUrl;

    event.waitUntil(clients.matchAll({
            includeUncontrolled: true,
            type: 'window'
        }).then( activeClients => {
            if (activeClients.length > 0) {
                activeClients[0].navigate(appUrl);
                activeClients[0].focus();
            } else {
                clients.openWindow(appUrl);
            }
        })
    );
});
like image 288
Ruslan Shashkov Avatar asked Sep 11 '25 12:09

Ruslan Shashkov


1 Answers

You have to use click_action as url and icon fields on server side, while forming payload of push-message.

like image 70
Ruslan Shashkov Avatar answered Sep 14 '25 02:09

Ruslan Shashkov