当用户点击flutter web上的通知时如何使用firebase消息传递

tyu7yeag  于 2023-06-07  发布在  Flutter
关注(0)|答案(1)|浏览(209)

我已经在我的flutter web应用程序中集成了firebase_messaging包。我能够显示通知时,应用程序是在前台或后台。
我现在想在用户单击通知时打开应用程序中的特定页面。现在,当我点击通知时,通知被解除,什么也没有发生。
我尝试为notificationclick事件声明一个事件处理程序,但它从未被触发。
下面是我的firebase-messaging-sw.js文件中的代码:

//Code for adding event on click of notification
self.addEventListener('notificationclick', function(event) {
    console.log('Notification clicked');
});

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

firebase.initializeApp({
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "..."
});

const messaging = firebase.messaging();

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

    const content = JSON.parse(message.data.content);
    const notificationTitle = content.payload.summary ? content.payload.summary : content.payload.title;
    const notificationOptions = {
      body: content.payload.body,
      data: message.data,
    };

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

然后我使用Postman发送测试通知,如下所示:

{
    "registration_ids" : ["..."],
    "priority": "high",
    "mutable_content": true,
    "data" : {
        "content": {
            "id": 1,
            "badge": 42,
            "channelKey": "alerts",
            "layout": "BigText",
            "showWhen": true,
            "autoDismissible": true,
            "payload": {
                "redirectTo": "contractDetails",
                "id": "00322860-4a11-11ed-b06b-a77c38cad970",
                "title": "Huston! The eagle has landed!",
                "body": "A small step for a man, but a giant leap to Flutter's community!"
            }
        },
        "actions": [
            {
                "key": "REPLY",
                "label": "Reply",
                "autoDismissible": true,
                "requireInputText": true
            }
        ]

    }
}

有没有一种方法可以在点击通知时根据通知负载推送一个路由(就像在Android和iOS上一样),或者至少关注我的应用程序...?
我已经坚持了5天了,所以任何帮助都非常感谢:)

bnl4lu3b

bnl4lu3b1#

看起来你用自己的方式解决了这个问题,但因为我有同样的问题,我想在这里发布我的发现。
像我一样,我假设您在本地主机上以调试模式进行测试。你可能会使用Chrome。
在本地主机上运行时,使用Google Chrome不支持“notificationclick”事件。这让我想到这个事件在web的firebase_messaging包中不起作用。我最终用JavaScript编写了所有代码,只是为了在Chrome(localhost)上遇到同样的问题。我最终在Edge上进行了测试,它起作用了。
由于这个原因,我的好奇心驱使我重用firebase_messaging包,结果如下:

  • Google Chrome本地主机:不支持该事件
  • Google Chrome在一个活:支持!
  • Microsoft Edge本地主机:支持!
  • Microsoft Edge live:支持!
  • Mozilla Firefox实时模式:支持!
  • Opera直播模式:支持!

在测试Mozilla时,我注意到单击通知会将窗口带到前台,但事件侦听器中的console.log()没有打印到终端。经过几次谷歌搜索,我发现这是Firefox的一个常见问题。我想用这条评论来说明的一点是,当点击时,Chrome的通知(localhost)什么也没做;没有日志,和窗口没有来到前台。无论如何,这是一个浏览器问题,而不是库问题。
有了这些知识,我会假设所有notificationclick事件都能工作。如果一个事件正在另一个平台上被消费,我还没有确认,那么平台分离的代码将是一个很好的选择。
如果这能帮助你让你的notificationclick工作,我已经找到了一个资源,也可以帮助你的点击动作的发展。链接来自同一篇文章。
Displaying a Notification
Notification Behavior
Common Notification Patterns
信贷归于作者:Matt Gaunt和Alexey Rodionov

相关问题