When pwa is in background, the serviceworker still uses onMessage not onBackgroundMessage!

[Th-Barth]

Hello,

when I send a push notification to my app, the onMessage method is called even if it is in the background! Actually, the onBackgroundMessage should then be called, right? The problem now is that when I tap on the message box in Android, the Progressive Web Application is not brought to the foreground. Apparently Android thinks that the app is in the foreground? The message box disappears when I tap on it and the number of incoming messages also disappears from the app icon.

Is there any way to fix this?

The onMessage is defined in a service
this.message$ = new Observable(sub => onMessage(this.messaging, it => sub.next(it))).pipe( tap(payload => {this.print.info('MessagingService initFCMMessaging() FCM fmessage', { payload });}) );

The onBackgroundMessage is defined in the firebase-messaging-sw.js with static text.

`messaging.onBackgroundMessage(function(payload) {
// Customize notification here
const notificationTitle = 'My title';
const notificationOptions = {
body: 'My Bodytext',
icon: '/firebase-logo.png' || '/assets/icons/icon-72x72.png'
};

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

I only noticed this because I defined a static text for the background message.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[Th-Barth]

Or is it possible that the service worker no longer needs to be set up separately because the browsers have changed and have now implemented their own service worker for notifications in the background and ignore the onBackgroundMessage-method in firebase-messaging-sw.js on mobile phones? THAT would explain why I don't receive notifications with the static message (onBackgroundMessage) when the app is in the background.

Edit:
I need to add something else. On my Windows desktop, when I send a push notification, two! messages appear in the Windows notification, when browser tab with the pwa is in background. One is the push notification with the payload information, and the other is the message with the static information (defined in my onBackgroundMessage-Method). The real question now is where the notification with the payload comes from! Is the implementation of the OnBackgroundMessage method obsolete?

Used codes for orientation
Angular Fire
Firebase

[mohammadazeemwani]

Or is it possible that the service worker no longer needs to be set up separately because the browsers have changed and have now implemented their own service worker for notifications in the background and ignore the onBackgroundMessage-method in firebase-messaging-sw.js on mobile phones? THAT would explain why I don't receive notifications with the static message (onBackgroundMessage) when the app is in the background.

Edit: I need to add something else. On my Windows desktop, when I send a push notification, two! messages appear in the Windows notification, when browser tab with the pwa is in background. One is the push notification with the payload information, and the other is the message with the static information (defined in my onBackgroundMessage-Method). The real question now is where the notification with the payload comes from! Is the implementation of the OnBackgroundMessage method obsolete?

Used codes for orientation Angular Fire Firebase

Yeah i also am experiencing similar issue

I get the notification in foreground as programmed and on background also but the background notification in ProgressiveWebApps(PWA) only comes when i open the PWA,

It is as if the service worker is not running in background and gets wakedUp when we open the application.
I checked some sources, they said android may be restricting the use of background services but i don't see it.

[Th-Barth]

Hi,
how do I get the pwa into foreground, when I tipp on a received push notification? Is there no click action for push notifications?

[mohammadazeemwani]

Hi, how do I get the pwa into foreground, when I tipp on a received push notification? Is there no click action for push notifications?

Of Course there is:

1. First listen for notificationClick event
2. Then Check for Edge cases like
   a. if user is already on your site but is on other route then you can focus user to the route, you want him to be on. lets say /
3. if edge cases don't apply then redirect the client to your desired route

below is an example of how you may proceed:

self.addEventListener('notificationclick', (event) => {
    console.log('Notification clicked:', event.notification);

    // Prevent the browser from focusing the Notification's related Window
    event.notification.close();

    // Use event.waitUntil() to extend the lifetime of the event handler until finished
    event.waitUntil(
        // Find or open the relevant client
        clients.matchAll({
            type: 'window',
            includeUncontrolled: true // Include uncontrolled clients (tabs) such as those opened by the user
        })
        .then(clientsList => {
            // Check if any client is already open for the URL
            for (let client of clientsList) {
                if (client.url === '/' && 'focus' in client) {
                    return client.focus();
                }
            }
            // If no client is already open, open a new window/tab
            if (clients.openWindow) {
                return clients.openWindow('/');
            }
        })
    );
});

[Th-Barth]

Thanks for your code, but I get errors, when I copy this code into my project. First I put it in the constructor of app.component.ts where I already activated another listener (appStateChange isActivive or not).

Then I tried to copy it to the method messaging.onBackgroundMessage(function(payload) ... in the firebase-messaging-sw.js file, but still nothing happens when I tipp on a received message. Where do I have to place your code snippet?

[mohammadazeemwani]

Thanks for your code, but I get errors, when I copy this code into my project. First I put it in the constructor of app.component.ts where I already activated another listener (appStateChange isActivive or not).

Then I tried to copy it to the method messaging.onBackgroundMessage(function(payload) ... in the firebase-messaging-sw.js file, but still nothing happens when I tipp on a received message. Where do I have to place your code snippet?

Listen you have to put it in firebase-messaging-sw.js file at root level because like script files have window object similarty service-workers have self object.

just add this at top of your service worker to get and idea tha notification closes:

// Handle notification clicks
  self.addEventListener('notificationclick', (event) => {
    console.log('Notification clicked:', event.notification);
  
  
    // Closing the notification

    event.notification.close();
    
  });