How to use Communication Notifications with Flutter and iOS?

Thomas
4 min readFeb 20, 2022

--

I’m not a huge fan of just pointing to a documentation as it is really not helpful for people that are not familiar with the matter and are trying to find any snippet that will point them towards the direction of a solution.

After hours of research and coming across one of few StackOverflow posts finally finding the proper keywords to search for I decided to leave a functional example for the next person that will stumble across it.

TL:DR — Key Takeaways

  • Read the manual, don’t rely on the cross platform claim that Flutter makes
  • Use actual alerts for iOS. Silent Push will give you a really bad day or week or even a year
  • Communication Notifications are available with iOS 15+

Get Started

In this post you find a full functional example for Flutter. This for sure will work for other iOS-Apps as well. It follows the the documentation provided by Apple Implementing communication notifications and adds an actual ready to run case. Make sure to adjust your payload / message to your needs. The example payload is for demonstration but can be used in conjunction with the commented payload snippet.

Setup and prepare you project

Before you can start you have to do some preparation work to get everything up and running. I assume you already have a project otherwise create one using flutter create.

Xcode Capabilities

Select “Runner” within your Targets and add the Communication Notification Capability by hitting + Capability. This is needed for displaying communication notifications.

Adjustments to Info.plist

Go to ios\Runner\Info.plist and add the key NSUserActivityTypes with the INSendMessageIntent value. This allows us to use the SendMessageIntent as we basically send ourselves a message. Note: I removed all other entries just to avoid cluttering. Append the key and its array to your Info.plist and do not delete anything else!

Info.plist

Notification Service Extension

  1. In Xcode select the “Runner”-Project
  2. Go to “File” => “New” => “Target”
  3. Search for Notification Service Extension and hit ‘Next’
  4. Add a package name for your extension and hit ‘Finish’

Now you have a working project with a NotificationService.swift code file that represents the extension. This is where you now can adjust the notification you receive.

I’ve dumped a ready to run code sample below with all necessary comments. Follow the comments to get a better understanding.

NotificationService.swift

NotificationService.swift

Additional things to consider

As solely displaying the message is often not enough here are additional things to consider and other pitfalls. I’m sure they will save you some time especially the part that you can’t reliable use the silent notifications on iOS. The whole point why we have to use a Notification Service Extension.

FCM Payload / Silent Push

Make sure that you do use an actual alert for iOS / APNS as silent notifications will not be processed after a certain inactivity time of your app. On Flutter it will work to some degree and then stops working. This is by design but for newcomers this is a huge pitfall, as you will not recognise it until users complain that they do not receive notifications after a certain time. You can use the playground to generate a token and testing your implementation when using FCM: Google OAuth Playground

Example Payload for FCM

You still can use silent notifications on Android as they will trigger your app even in terminated state. This way you can use Flutter plugins on Android and disable them when Platform is iOS. Or you can use a combination and turn on/off the foreground visualisation based on your cases. For example while within a chat room you disable the foreground notifications and after leaving the room you enable it again.

Use of Plugins

If you do use a plugin like flutter_local_notifications and firebase_messaging in your Flutter App be aware that the extension is called when “mutable-content” is set to 1. So if you see your notification twice and even in different layouts then you have either to disable the presentation while in foreground or to waive calls to flutter_local_notifications when Platform is iOS and let your extension handle the visualisation.

Disabling Notification in Foreground

iOS Push Notification Attachments

With the default implementation only the first attachment is displayed as a thumbnail in your push notification. Keep that in mind. If you need a more specific behaviour use “Rich Notifications” aka Notification Content Extension.

Your extension will be called for all notifications!

Keep also in mind that your extension will be called for all notifications your app will receive. Use a Category Identifier (request.content.categoryIdentifier) in your extension for example to filter or submit a type as above in the payload.

Example

Result

--

--

Thomas
Thomas

Responses (1)