Push Notifications, Images, FCM, iOS, and Ionic

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'
end

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"
// NOT MENTIONED IN FCM DOCUMENTATION
#import "FirebaseMessaging.h"

@interface NotificationService ()

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

@end

@implementation NotificationService

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

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

- (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.
    self.contentHandler(self.bestAttemptContent);
}

@end

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: