[📚 firebase_messaging] Lacking (missing) documentation on how to handle user interaction with notification on web

[SeriousMonk]

Currently the example app and documentations for web only talk about how to show the notiffications. The most important part about notifications is what happens when the user clicks on them or interacts with their action buttons: this is not documented in any shape or form. It would also be very useful to add an example in the example app on how to handle data notifications both when web app is in foreground and in background.

[Lyokone]

You have this documentation: https://firebase.google.com/docs/cloud-messaging/flutter/receive#handling_interaction

Can you specify what is not enough?

[SeriousMonk]

That documentation might work on Android and iOS (idk, I'm using flutter_local_notification callbacks to handle notification events on android and ios).

I was wondering how to be able to do something when the notification is clicked on WEB. The current behavior on web (you can see it in the example app) is that when a notification is clicked, it gets dismissed and nothing else happens. Instead, I would like to open a specific page in my web app, based on notification payload. I searched everywhere (and tried the example app) but wasn't able to figure it out.

Also, for more context see #10267.

[mkucharski17]

It would be nice to document if it's possible to prevent the app from opening after the notification is tapped. I am looking for this, but it isn't written anywhere.

[SeriousMonk]

It would be nice to document if it's possible to prevent the app from opening after the notification is tapped. I am looking for this, but it isn't written anywhere.

That is not relevant to this issue. Unless you are able to open the app upon notification click on web; in which case it would be awesome if you could share how you are achieving this behavior :)

[Joseph-Nathan]

any news ?

[SeriousMonk]

I managed to implement the behavior described in this issue by using awesome_notifications and awesome_notifications_fcm packages for Android and iOS instead of firebase_messaging. For web i integrated with a lot of hard work the Google's JavaScript SDK with Js and dart interop. It seems that it is firebase_messaging package that intercepts the notificationclick event...

[amyork1990]

I am working on a web-only project, so I can't speak for Android/iOS here. Here's what I found:

Google Chrome, while running on localhost, does not support the "notificationclick" event. This caused me to think that the event was not working for web. I ended up coding it all in javascript to find the same issue (at least I learned interop).

My interop javascript worked perfectly fine on Edge, and on localhost, but still not on Chrome! Knowing this, I reverted back to using this package, and just got done testing.

• Google Chrome localhost: The event is NOT supported

• Google Chrome in a live: Supported!

• Microsoft Edge localhost: Supported!

• Microsoft Edge live: Supported!

• Mozilla Firefox live mode: Supported!

• Opera live mode: Supported!

When testing Mozilla, I noted that clicking the notification brought the window into the foreground, but my console.log(), within the event listener, did not get printed to the terminal. After a few google searches, I found this to be a common problem with Firefox. The point I wanted to make, though, was that the Chrome notification (localhost) did NOTHING when clicked: No log, and the window did not come to the foreground. At any rate, this is a browser issue, not a library issue.

With this knowledge, I would assume that all notificationclick events work. If an event is being consumed my another platform, which I have yet to confirm, then platform separated code would be a good option. I can confirm this in a few weeks or so.

I agree 100% with the OP, that the point of notifications is that the user can click on them. That said, I found a great article on web.dev that supports usage of the notificationclick event. I would say it's worthy of mentioning in the documentation.

https://web.dev/push-notifications-notification-behaviour/

Tagging a few who may benefit from this information: @SeriousMonk @Joseph-Nathan

@Lyokone I believe this can be closed. Web is absolutely working as intended (at least it is now, maybe not before?)

[SeriousMonk]

My solution works everywhere, even on chrome localhost and has support for notification actions like buttons and text replies.

It is difficult to share since it is made of several files, but I'll work something out and try to share everything before the end of the week.

[amyork1990]

@SeriousMonk I wonder, were you trying to use Google Chrome from localhost when you were having issues? I wonder if that was just what it was, because that doesn't work. Only live with Chrome works. If that's the case, then don't worry about sharing, unless you really want to. It took me 2 weeks to realize such a small thing, whereas it would have been more difficult for you, since you were on multiple platforms.

[SeriousMonk]

Yes, I believe that was indeed the case. However with the solution I'm using now, I'm using 'notificationclick' event on localhost on chrome and it's working. So I wouldn't exclude it being some problem with the package.

[mahammad-webelight]

Bug report

Describe the bug Flutter Web notification redirection not working

Steps to reproduce

Steps to reproduce the behavior:

1. click on notification
2. it will open same page it will not redirect to another screen.
3. See video

https://www.veed.io/embed/7ecfe6da-0108-4b9d-80b7-20e99c040b4c

Expected behavior

it should redirect to specific screen, which is mentioned in route

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

``` Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.13.5, on macOS 14.0 23A344 darwin-arm64 (Rosetta), locale en-IN) [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.0.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.2) [✓] VS Code (version 1.85.1) [✓] Connected device (2 available) [✓] Network resources • No issues found! ```

---

[ahadalichowdhury]

@mahammad-webelight your issue was fix?? I am also facing this kind of issue, i provide a specific url, like localhost:3000/invite/:userId, but it redurect to the localhost:3000/undefined. I am using react js

[MoaidAlrazhy]

same problem remains , any update ?

[zahidshaikh08]

Any updates on the issue??