Push Notifications with Image

Capacitor
1

I’m currently using Firebase to send my push notifications, using Capacitor to do so. In Firebase, you can send an ImageUrl over, which should show a small image inside the notification. Is there some more configuration within Capacitor to get this working correctly to show the image? I am receiving the notification, but it is not showing the image.

2

Ok, I’m getting a little further along with this. I added a new target in my ios app which added a notification service app extension (unnotificationserviceextension). If I build and run on my mac, my phone is able to receive the notification with the image correctly, but I cannot build on Ionic Hub because I am receiving an error message about my provisioning profile.

error: Provisioning profile "APPNAME" has app ID "net.appname.mobile.dev", which does not match the bundle ID "net.appname.mobile.dev.NotificationImages". (in target 'NotificationImages' from project 'App')

Any ideas on how I can get this app with a service extension built on Ionic Hub?

3

Hey @jdrozd. Appflow/Ionic Hub doesn’t yet support app extensions. However, we will be adding support for them in the next week or so! So, stay tuned for that. Once we ship it your app should build just fine.

4

I’m having a lot of trouble getting a notification service extension set up.

When you created the notification service extension, do you remember if you added the extension as a project embedded in your app, or as a pod?

Also, did you have to deal with this error message:

Use of undeclared identifier 'FIRMessaging'

I’m getting that from the line in the FCM documentation:

  // Call FIRMessaging extension helper API. 
  [[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];
5

I added the extension as a new ‘Target’ in xcode. I added it as a Notification Service Extension.

Does this help?

Here’s the code for that Notification Extension:

import UserNotifications
import Firebase

class NotificationService: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        
        if let bestAttemptContent = bestAttemptContent {
            // Modify the notification content here...
            //bestAttemptContent.title = "\(bestAttemptContent.title) [modified]"
            
            Messaging.serviceExtension().populateNotificationContent(self.bestAttemptContent!, withContentHandler: contentHandler)
            //contentHandler(bestAttemptContent)
        }
    }
    
    override func 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.
        if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
            contentHandler(bestAttemptContent)
        }
    }


}
1 Like
6

Hi @jdrozd,
Thanks for the code. Would there be any chance you could share the other changes you did to have it working ?
Facing a wall here, this is what I did :

  1. Adding the new Notification Service Extension as target (with language ‘Swift’, Project ‘App’, Embed in Application ‘App’, using the same bundle ID as the app one)
  2. Add this code to the PodFile
target 'ImageNotification' do
pod 'Firebase/Messaging', '~> 8.8.0' # eg 6.31.0
end
  1. ran pod install in ios/App
    (All the above was following iOS Notification Images | React Native Firebase)
  2. Used your code in the NotificationService.swift file

Somehow I do have notification but still without images (I do on Android)…

Thanks for your help

7

ok looks like you need to also change the ‘iOS Deployment target’ from the ImageNotification target to a higher iOS (it was 12.0 and i changed it to my device ios version 14.6)… OMG