Flutter Web 应用程序收到推送通知，但浏览器不显示

Question

我能够在控制台上接收并显示通知，但它不会显示在浏览器（chrome）中。

我遵循的步骤是：

1. 我启动应用程序并使用该函数获取通知令牌

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

2. 步骤 1 中的令牌将插入到下面的脚本中（“to”字段），并将请求发送到 Firebase 服务器

#!/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"

收到成功响应

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

3. 通知以以下形式在应用程序中收到

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

但是浏览器不显示通知。我缺少什么？

Answer 1

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

}