Search code examples
javascriptfirebaseflutterfirebase-cloud-messagingflutter-web

Flutter web with firebase notifications - subscribeToTopic

I would like to receive firebase notifications in my flutter web app. I know that the firebase_messaging package is not available for web. But I've already managed configure my app to get a token, receive and display a message when the web app is in the backgroud and to receive (but not yet display a message) when the app is in the foreground.

I did so by creating JavaScripts (and service workers) as described here:

https://medium.com/@rody.davis.jr/how-to-send-push-notifications-on-flutter-web-fcm-b3e64f1e2b76

https://firebase.google.com/docs/cloud-messaging/js/client

https://firebase.google.com/docs/cloud-messaging/js/receive

The problem is that so far I've only managed to sent the messages to 'a specific token' or 'to everyone' and I need to send messages to a 'specific topic'.

The documentation for cloud messages to specic topics with JS contiues here: https://firebase.google.com/docs/cloud-messaging/js/topic-messaging

But the problem is that in this part the codes are no longer placed in the index.html file as before. (It's either node.js, java, python, Go or C#)

And I do not know how to implement that in my flutter web app. Is it even possible?

This is the part that I would like to add to my flutter web app:

Subscribe To Topic Code

Solution

  • The JavaScript SDK for Firebase Cloud Messaging does not support subscribing to topics, which unfortunately that Flutter for web also doesn't/won't have it.

    This means that a web app cannot subscribe itself to topics, like Android and iOS apps can. Instead, for web apps, you will have to use a server-side SDK to subscribe to a topic.

    So you'll need to:

    1. Create a custom server-side API that uses one of the Admin SDKs, or the REST API, to subscribe a specific FCM device token to a specific topic. This code needs to run on a trusted environment, such as your development machine, a server that you control, or Cloud Functions.
    2. You then call this custom API from within your Flutter application.

    Also see: