3

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

Daniel Cardoso Ishara
  • 63
  • 1
  • 4
  • On an initial analysis, the flutterfire site mentions there is no cloud messaging support for flutter web yet. Check [here](https://firebase.flutter.dev/) – Abhilash Chandran Nov 10 '20 at 12:48

2 Answers2

7

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:

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
0

While an answer has been given, I would like to point out that when using Flutter, use the flutter firebase package rather than the javascript SDK. The flutter package allows you to register and unregister the user from a topic directly from Flutter, rather than dealing with the server side SDK

Delmontee
  • 1,898
  • 2
  • 26
  • 44
  • Are you sure about that ? In my case (I'm using the Flutter plackage version), it throws in web version. And the code seems to confirm that it is NOT implemented https://github.com/firebase/flutterfire/blob/master/packages/firebase_messaging/firebase_messaging_web/lib/firebase_messaging_web.dart – Nicolas Youpi Jun 05 '23 at 09:03
  • you're using Firebase Web (eg. the one that uses the javascript sdk). Use the one for Flutter, not web – Delmontee Jun 06 '23 at 10:16
  • How do you do that? I'm using firebase_messaging package, I don't see any option go choose that? – Nicolas Youpi Jun 07 '23 at 22:02
  • @NicolasYoupi I'm not sure what your code looks like but you should be calling the FirebaseMessaging.instance.subscribeToTopic(topicname) function . This is an await response. And to unsubscribe use the await FirebaseMessaging.instance.unsubscribeFromTopic(topicname); – Delmontee Jun 09 '23 at 07:05
  • This is exactly what I'm using. Meanwhile I've created a Flutter issue : https://github.com/firebase/flutterfire/issues/11084 Please tell me if you think I'm mistaken. – Nicolas Youpi Jun 10 '23 at 08:41
  • But you shouldn't be using the "Web version/platform if you're using Flutter, as that is for websites only. You need to use the Flutter package and the correct documentation for it: https://firebase.google.com/docs/cloud-messaging/flutter/topic-messaging – Delmontee Jun 12 '23 at 06:34
  • That's exactly what I'm doing already, as I said twice – Nicolas Youpi Jun 13 '23 at 07:03
  • Then I have no idea what you're doing. I used that document and it does not use the web version and it runs correctly. – Delmontee Jun 13 '23 at 13:58
  • Then could you provide some code please? – Nicolas Youpi Jun 14 '23 at 14:03