Simple UNNotificationServiceExtension with Firebase Push and image display

As you probably already know, sending push notification from Firebase will not display attached image on device. This example assumes you know how to configure push notifications in your app with Firebase. So let’s start.

But, why bother and create your own extension? Because starting from iOS 10 sending such message from Firebase console:

will cause your device to display notification this way:

and as you can see there is no image at all.

So lets start and create new target selecting “Notification Service Extension”:

Give it some name, and you should see new files group on left, and new target:

Now your extension should look like this:

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

We need to modify didReceive method which is called when push message arrives. At this stage, you can try to send a message to your device, and you should see it like this:

and this means our extension was called by system, and we modified title by adding “[modified]” string.

Firebase attaches image in fcm_options dictionary so we need to pull it out, download and save to some temporary directory. So lets add UNNotificationAttachment init extension which will take our Data and save it in temporary folder:

In next step we will add new method to NotificationService which will handle image downloading, and creating UNNotificationAttachment in result:

And final step is changing didReceive method to make use of our new method, the final version should look like this:

And what happens here? First we are pulling fcm_options into [String : Any] dictionary, and then we need to extract image url from “image” key in dictionary. If we found image url, we are calling parseAttachment method which downloads image and returns attachment which is added to UNNotificationContent required in callback. So after sending another test push from Firebase you should see it with image:

And after expading you should see full image:

You can grab sample project from GitHub.

Leave a Reply