Flutter web app receives push notification but broswer doesn't show it

Question

I am being able to receive and display the notification on the console but it doesn't show up in the browser (chrome).

The steps I am following are:

1. I start the app and get notification token with the function

   FirebaseMessaging.instance.getToken().then((String token) {
      debugPrint('Token: $token');
   });

2. The token from step 1. is inserted in the script below (the 'to' field) and the request is sent to Firebase servers

#!/bin/bash

DATA='{"notification": {"body": "This is a message","title": "Marcelo"}, "priority": "high", "data": {"click_action": "FLUTTER_NOTIFICATION_CLICK", "id": "1", "status": "done"}, "to": "eMkcLmwSSBeWXS_YEB-b_R:APA91bG2pyrDVr0BBoya0rQET0vfwTVE3aTeQsoqsxVMK70ypm6aaa-pNdX9uQ5BgEsoQGuVoe-EpeePJB8Q7XUfTvrTlgtRW8HSZ3qOaxotFUSaq8JqrgRtummIOnMFYUGqtg-sMP8Y"}'
curl https://fcm.googleapis.com/fcm/send -H "Content-Type:application/json" -X POST -d "$DATA" -H "Authorization: key=AAAAKavk7EY:APA91bEtq36uuNhvGSHu8hEE-EKNr3hsgso7IvDOWCHIZ6h_8LXPLz45EC3gxHUPxKxf3254TBM1bNxBby_8xP4U0pnsRh4JjV4uo4tbdBe2sSNrzZWoqTgcCTqmk3fIn3ltiJp3HKx2"

A success response is received back

{"multicast_id":5695802004264337317,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1615137996888514%2fd9afcdf9fd7ecd"}]}

3. The notification is received in the app in the form

   FirebaseMessaging.onMessage.listen((RemoteMessage message)
   {
      RemoteNotification notification = message.notification;
      if (notification != null) {
     print('Title ${notification.title}');
     print('Body ${notification.body}');
      }
   });

The browser however doesn't show the notification. What am I missing?

Expertize

Answer 1

To display the notification in the foreground of webflutter, use dialog and similar things, and to display it in the background, use the following script:

  messaging.onBackgroundMessage(function(payload) {
    console.log('Received background message ', payload);

    const notificationTitle = payload.notification.title;
    const notificationOptions = {
      body: payload.notification.body,
    };

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

To customize the notification display in the background, read the following link: show notification

Be sure to get the necessary permission

   NotificationSettings settings =
          await _firebaseMessaging.requestPermission(
        alert: true,
        announcement: false,
        badge: true,
        carPlay: false,
        criticalAlert: false,
        provisional: false,
        sound: true,
      );
      debugPrint('User granted permission: ${settings.authorizationStatus}');

If the notification is still not displayed in Windows in the section: setting=> notifications and actions =>Google Chrome

switch to On.

Luger

Answer 2

static onMessageWebNotification(NotificationData notificationData, String payloadData) {
html.window.navigator.serviceWorker.ready.then((registration) {
  var notificationTitle = notificationData.title;
  var notificationOptions = {
    'body': notificationData.body,    
    'data': notificationData
  };
  registration.showNotification(
    notificationTitle,
    notificationOptions,
  );
});

}

Schopenhauer