Multi language Push-Notifications (using Flutter & FCM)
I was trying to implement the following scenario.
My Backend fetchs for news from another api every hour and checks if there are news available the backend do not know yet.
If there are new news available, the backend sends push notifications via FCM (Firebase Cloud Messaging). So all users that are subscribed to the news topic (see FCM doc for infos about topics) receives this notification. The user can click on the notification and the app (Flutter) opens and Shows the full content of the news.
The app supports multiple languages (english and german, yet). The notification should show the title of the news. But of cause the title should be displayed in the language the user is comfortable with. Currently there is no multi language support provided by FCM.
As you sending a notification via FCM you pass data into the message.
In the notification property you can put a title, body and an image. If data in the notification property is available the client will display a notification using this data.
You can also pass a custom payload using the data property. Here you can put any data you want.
So we could use this custom data to pass our translations here. In the client we use this data and show a notification with the correct language.
For example a notification could look like the following
title: “March update — Incredible Discounts”,
title_de: “März Update — Unglaubliche Rabatte”
As we are not providing any notification data, you have to handle the message in the client by yourself.
In Flutter we have to define callbacks to handle the message.
Here we check which language the device is using and get the matching title.
Now we have the message in the users language and we create a notification.
As FCM creates a notification by its own if a notification title and description is provided. We could also think about having a topic for each language. For this we have to make sure the user is subscribed to the correct channel.
As the user activates the notification we simply subscribe to the topic with the specific language e.g. news_de.
But what happens if the user changes the system language. For example the user subscribes to news_de and then changes his system language to english.
The result would be, that the content of the app is english but the notification would be german.
To stop this behavior we simply check if the users language is changed in the startup of the app. As FCM does not provide the possibility to check to which topics a user is subscribed we have to save the language the user is subscribed to by our own (via SharedPreferences or similar).
If the users language changes, we unsubscribe the topic with the old language and subscribe to the new language topic e.g. news_en.
Now if the user changes his language and launches the app again, he subscribes to the topic with the new language. As this happens only in App startup. As long as the user did not start the app after a language change, the notification would still be in the old language.
Selecting an option
I decided to use Option 2 for the following reasons:
- I don’t have to handle the notifications by my own, which in not that clean in flutter
- fcm is a reliable system, so I can be sure the notification gets displayed to the user
- I can still handle if the user opens the app by clicking the notification
- The user just receives the language he needs
- Getting the users language in flutter by my self while the app is not running is hard
Of cause you can decide by your own, which option you want to choose.
Maybe you have to show a more complex notification. For example you wanna display actions inside the notification. So you have to use your own notifications