How to handle background notifications in flutter web?

[ChetanKhanna767]

Service worker file is listening to background notificaions, they are printed on console. Tapping on them also works, event is getting printed on "notificationclick" event

firebase.initializeApp({
      apiKey: jsonResult['apiKey'],
      appId: jsonResult['appId'],
      messagingSenderId: jsonResult['messagingSenderId'],
      projectId: jsonResult['projectId'],
      authDomain: jsonResult['authDomain'],
      storageBucket: jsonResult['storageBucket'],
      measurementId: jsonResult['measurementId'],
    });

  const messaging = firebase.messaging();
   
  messaging.onBackgroundMessage(function(payload) {
    console.log('Received background message ', payload);
    var current = new Date();
     
  });

function handleClick (event) {

  console.log("onNotificationClickevent", event);
   
}
self.addEventListener('notificationclick', handleClick);

Problem is I want to listen to this notification in flutter, firebase messaging listeners don't work in this case. I want to open a new screen with some new data

[toco1001]

Any updates?

@ChetanKhanna767
Did you resolve this?

[ChetanKhanna767]

Hi, you can follow these steps

1. In service worker , post channel messages on receiving fcm

const channel = new BroadcastChannel('sw-messages');

function handleClick(event) {
  console.log("onNotificationClickeventEvent",  event);

  if('FCM_MSG' in event.notification.data)
  {
    console.log("onNotificationClickevent", {'fcm_data': event.notification.data.FCM_MSG, 'clicked' : 'true'});
    channel.postMessage(
      {'fcm_data': event.notification.data.FCM_MSG, 'clicked' : 'true'}
    );
  }
}

 messaging.onBackgroundMessage(function (payload) {

            console.log('Received background message ', payload);
                  
            channel.postMessage(
              payload
            );
    
          })

2. You will receive this in html

    const channel = new BroadcastChannel('sw-messages');
    channel.addEventListener("message", function (event) {
    localStorage.setItem('flutter.notificationExist', true)
     window.postMessage(JSON.stringify(event.data))

    })

3. Listen to these messages in flutter, for this you can use flutter html object or this package

   OnMessage.instance.stream.listen((MessageEvent event) {
      final data = jsonDecode(event.data.toString());
  
    });

[toco1001]

ChetanKhanna767, Thank you for sharing!!
I'll try them.

[i84762]

Worked perfectly, thanks a lot.

[Refaydeen]

I need to push a notification as you mentioned a image from flutter how to do that ,is that possible to push a notification like that .

[dsyrstad]

For those coming here and trying to get the above solution to work, the notificationclick event listener must be added prior to importing the firebasejs libraries:

function handleClick(event) {
  console.log("onNotificationClick Event",  event);

  if ('FCM_MSG' in event.notification.data) {
    console.log("FCM onNotificationClick event", {'fcm_data': event.notification.data.FCM_MSG, 'clicked' : 'true'});
    // channel.postMessage(
    //     {'fcm_data': event.notification.data.FCM_MSG, 'clicked' : 'true'}
    // );
  }
}

self.addEventListener('notificationclick', handleClick);

importScripts("https://www.gstatic.com/firebasejs/9.10.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.10.0/firebase-messaging-compat.js");

firebase.initializeApp({
...

If you try to set if after firebase initialization, the handleClick function won't be called.

[Trung15010802]

How can i create a "service worker " in flutter? Can you tell me please? @ChetanKhanna767

[ChetanKhanna767]

Create a file named "frebase-messaging-sw.js" inside web folder. There's a lot of documentation regarding on how to create service worker in flutter web. You should check that as well