I recently implemented push notifications in an Ionic application for the first time. Overall, it was fairly simple to set-up, though wasn’t something I’d have been able to intuitively figure out. There was a lot of magic and configuration.

One unexpected challenge I had was getting an image to display on the right-hand side of the notification on iOS devices. After following all the steps in the Firebase Cloud Messaging (“FCM”) documentation, I got the following error:

Use of undeclared identifier 'FIRMessaging'

To solve this issue, I needed to 1) add the service extension I created as a target in my Podfile, with 'Firebase/Messaging' listed as a pod, 2) pod install, and 3) add #import "FirebaseMessaging.h" at the top of my service notification .m file (this was Objective-C).

Basic Directions for Adding Images

Here’s the FCM documention on sending an image via the notification payload in an iOS app. I also found the GitHub ticket Notification iOS with image not showing with FCM #2432 helpful while trying to add images to push notifications, as well as the guide iOS Notification Images.

I believe the complete list of steps turned out as listed below.

1. Add a Notification Service Extension via XCode

In Xcode, select File > New > Target > Notification Service Extension.

Apple’s documention is here.

2. Update Podfile

I added something like this to my Podfile, with 'MyExtension' being what I chose as the Product Name above.

target 'MyExtension' do
  # Add your Pods here
  pod 'Firebase/Messaging'

You probably need to reinstall all pods at this point (e.g. pod install).

3. Edit NotificationService.m

There were two changes I needed to make from the code listed in the FCM documentation. Firstly, I needed to add #import "FirebaseMessaging.h". Secondly, the line self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.title]; just adds the string " [modified]" to the end of the push notification title. I removed that.

#import "NotificationService.h"
#import "FirebaseMessaging.h"

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;


@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];

    // Modify the notification content here...
    // self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.title];
    // Call FIRMessaging extension helper API.
    [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent

- (void)serviceExtensionTimeWillExpire {
    // Called just before the extension will be terminated by the system.
    // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.


Other Links

For the initial Ionic implementation of any push notifications, I followed the guide in the Capacitor documentation, Using Push Notifications with Firebase in an Ionic + Angular App. It didn’t really matter that I was using Ionic React and not Ionic Angular. For the back-end integration (a Rails API), I used the fcm gem from Decision Labs.

I also watched this video: