[iOS] Not seeing Images in Rich Notifications after adding Notification Service

[simonarcher]

SDK version: pod 'CustomerIO/MessagingPushFCM', '~> 2.0.4' "customerio-reactnative": "^2.0.0" "react-native": "0.71.1"

Are logs available?

Describe the issue

Im trying to add Rich Push Notification support by following the documentation found here. While the installation went fine without little issues, when testing Im not seeing the results im expecting (ie. no image being shown), so I have a couple questions..

When updating the Podfile and running pod install, I got the following warnings

[!] The `NotificationServiceExtension [Debug]` target overrides the `CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER` build setting defined in `Pods/Target Support Files/Pods-NotificationServiceExtension/Pods-NotificationServiceExtension.debug.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

[!] The `NotificationServiceExtension [Staging]` target overrides the `CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER` build setting defined in `Pods/Target Support Files/Pods-NotificationServiceExtension/Pods-NotificationServiceExtension.staging.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

[!] The `NotificationServiceExtension [Release]` target overrides the `CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER` build setting defined in `Pods/Target Support Files/Pods-NotificationServiceExtension/Pods-NotificationServiceExtension.release.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

I didnt fully understand what it meant, but I followed the instructions it suggested and updating the Build Settings as follows..

I ran pod install again and the warnings were gone, and the project still compiled without any noticeable issues.

I then moved onto step 3 of the Swift instructions and updated the NotificationService class file with the following

import UserNotifications
import CioMessagingPushFCM

class NotificationService: UNNotificationServiceExtension {

  override func didReceive(_ request: UNNotificationRequest,
                           withContentHandler contentHandler:
                           @escaping (UNNotificationContent) -> Void) {

    CustomerIO.initialize(siteId: SettingsConfiguration.customerIoSiteID, apiKey: SettingsConfiguration.customerIoAPIKey, region: .EU) { config in
      config.autoTrackDeviceAttributes = true
      config.logLevel = .info
    }

    MessagingPush.shared.didReceive(request, withContentHandler: contentHandler)

  }

  override func serviceExtensionTimeWillExpire() {
    MessagingPush.shared.serviceExtensionTimeWillExpire()
  }
}

and then when I try build I am given this error where Cannot find 'CustomerIO' in scope

I looked over the instructions again and couldn't figure out where I might have gone wrong. I looked at the Objective C steps and noticed that in that step it mentions to include import CioTracking to the file, so I did that to my Swift step and the error disappeared. Is this a mistake in the documentation, or did I possibly make a mistake somewhere earlier where importing CioTracking would not be necessary?

But after building to my device and testing the Rich Push Notification with an image, I get the notification but no image is included and I cant determine why...

Ive tried to add a break point in the file to see if its doing anything and from what I can tell its not, or at least Im not able to hit the breakpoint due to this message

While my other PushNotificationsHandler class file initialises fine (the initializeCioSdk line hits without problem on app launch)

import Foundation
import CioMessagingPushFCM
import FirebaseMessaging
import CioTracking

@objc
public class PushNotificationsHandler : NSObject {

  public override init() {}

  // Register device on receiving a device token (FCM)
  @objc(didReceiveRegistrationToken:fcmToken:)
  public func didReceiveRegistrationToken(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
    MessagingPush.shared.messaging(messaging, didReceiveRegistrationToken: fcmToken)
  }

  // To capture push metrics
  @objc(userNotificationCenter:response:completionHandler:)
  public func userNotificationCenter(center:UNUserNotificationCenter, didReceive response: UNNotificationResponse, completionHandler: @escaping () -> Void){
    let _ = MessagingPush.shared.userNotificationCenter(center, didReceive: response, withCompletionHandler: completionHandler)
  }

  @objc(initializeCioSdk)
  public func initializeCioSdk() {
    CustomerIO.initialize(siteId: SettingsConfiguration.customerIoSiteID, apiKey: SettingsConfiguration.customerIoAPIKey, region: Region.EU, configure: nil)
  }
}

Im just wondering if maybe it could be spotted where I might be going wrong, or how I could further debug this? If I had to guess it seems like the NotificationServiceExtension is not being "loaded", but I really cant tell why this might be the case, or if there's something else that is not working that is preventing the Rich Notifications from working properly.

Any help would be greatly appreciated! ☺️ Thanks!

Additional context

Podfile

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

min_version = '13.0'

# Uncomment the next line to define a global platform for your project
platform :ios, min_version
prepare_react_native_project!
# flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
flipper_config = FlipperConfiguration.disabled

$RNFirebaseAsStaticFramework = true

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
      Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
      use_frameworks! :linkage => linkage.to_sym
end

# Convert all permission pods into static libraries
pre_install do |installer|
  Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}

  installer.pod_targets.each do |pod|
    if pod.name.eql?('RNPermissions') || pod.name.start_with?('Permission-')
      def pod.build_type;
        # Uncomment the line corresponding to your CocoaPods version
        Pod::BuildType.static_library # >= 1.9
        # Pod::Target::BuildType.static_library # < 1.9
      end
    end
  end
end

target 'MyApp' do
  config = use_native_modules!
  use_frameworks! :linkage => :static
  # Flags change depending on the env values.
  flags = get_default_flags()

  use_react_native!(
        :path => config[:reactNativePath],
        # Hermes is now enabled by default. Disable by setting this flag to false.
        # Upcoming versions of React Native may rely on get_default_flags(), but
        # we make it explicit here to aid in the React Native upgrade process.
        # :hermes_enabled => flags[:hermes_enabled], # disabling for now - https://github.com/facebook/react-native/issues/34624
      :hermes_enabled => false,
        :fabric_enabled => flags[:fabric_enabled],
        # Enables Flipper.
        #
        # Note that if you have use_frameworks! enabled, Flipper will not work and
        # you should disable the next line.
        # :flipper_configuration => flipper_config,
        # An absolute path to your application root.
        :app_path => "#{Pod::Config.instance.installation_root}/.."
      )

  permissions_path = '../node_modules/react-native-permissions/ios'

  pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"
  pod 'CustomerIO/MessagingPushFCM', '~> 2.0.4'
  pod 'Adyen'
  pod 'Alamofire'
  pod 'SDWebImage'
  pod 'Kingfisher'

end

target 'NotificationServiceExtension' do
  use_frameworks! :linkage => :static
  pod 'CustomerIO/MessagingPushFCM', '~> 2.0.4'
end

post_install do |installer|

  react_native_post_install(
    installer,
    # Set `mac_catalyst_enabled` to `true` in order to apply patches
    # necessary for Mac Catalyst builds
    :mac_catalyst_enabled => false
  )
  __apply_Xcode_12_5_M1_post_install_workaround(installer)

  installer.pods_project.targets.each do |target|

    if target.name == 'yoga'
      target.remove_from_project
      target.build_configurations.each do |config|
          config.build_settings['GCC_TREAT_WARNINGS_AS_ERRORS'] = 'NO'
          config.build_settings['GCC_WARN_64_TO_32_BIT_CONVERSION'] = 'NO'
          config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
      end
    end

    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = min_version
    end

    if target.name == "lottie-ios"
      puts "Processing for set swiftcompiler language in SwiftSocket"
      target.build_configurations.each do |config|
        config.build_settings['SWIFT_VERSION'] = '5.0'
      end
    end

  end

end

[alon7]

I have a similar setup and encountered the same issue

[levibostian]

Sorry you're experiencing issues with images not showing up in a rich push notification. Let's see how we can help.

that in that step it mentions to include import CioTracking to the file, so I did that to my Swift step and the error disappeared. Is this a mistake in the documentation, or did I possibly make a mistake somewhere earlier where importing CioTracking would not be necessary?

Yes, you need to add import CioTracking to the top of the NotificationService file. Our docs team is fixing the docs right now to add in that missing import statement. Thanks for bringing this to your attention and sorry for making that mistake.

---

As far as debugging why this is happening to you, I have a couple tips.

• Xcode breakpoints inside of your Notification Service will not trigger by default. It's a tricky iOS behavior. I have some documentation to share (skip the section talking about JSON payloads if you're using our Rich Push composer in Customer.io) to help guide you on how to make breakpoints trigger inside of the Notification Service.

But before you do that, see my tip below about SDK logs. That might be easier then getting breakpoints working.

• I see in your Notification Service file that you have config.logLevel = .info enabled. To help us diagnose better what behavior your app is experiencing, could you modify that from .info to .debug and then follow our instructions on how to view SDK debug logs and send them to us.

Get SDK logs showing up in Console, send yourself a push notification with an image in it, save those SDK logs, and share them with us (you can also view them to see if you catch anything 😄). Push issues such as this one are difficult to diagnose as there are so many pieces involved in the process. SDK logs are the best tool to view the behavior of the push notifications and how the SDK is behaving.

[alon7]

Thanks @levibostian for the detailed explanation. When using Rich Push Notifications, we still need to include the regular push notification implementation, right? In addition, can a Rich Push Notification be sent via the Push UI Builder or it has to be a custom payload? I'm asking because there's an option to include an image in the builder so want to be sure

[levibostian]

When using Rich Push Notifications, we still need to include the regular push notification implementation, right?

Yes. Rich push requires having regular push setup. We are actively improving our docs to combine these 2 sections to make this more clear that both are required.

In addition, can a Rich Push Notification be sent via the Push UI Builder or it has to be a custom payload? I'm asking because there's an option to include an image in the builder so want to be sure

We recommend using the push UI builder 😄. It's awesome! Custom payloads UI can be used, but we hope that you don't need to use it. If there is ever a use case where you believe you need to use it, we would appreciate you reach out to us at product [at] customer.io and explain the use case. So we can improve the push UI builder!

[simonarcher]

@levibostian thanks for the detailed reply!

So I followed your suggestions,

As far as debugging why this is happening to you, I have a couple tips.

Xcode breakpoints inside of your Notification Service will not trigger by default. It's a tricky iOS behavior. I have some documentation to share (skip the section talking about JSON payloads if you're using our Rich Push composer in Customer.io) to help guide you on how to make breakpoints trigger inside of the Notification Service.

I tried to attach to the process as guided in the link, but when I attempt to I get this error

Trying to find the logs that it speaks of in the consoles app, but cant find them or see them..

I then worked on doing the debugging logs step as you also suggested, but when I send a push notification I dont see anything really that provides any clues. When I launch the app, these are the only CIO logs I see, and nothing more when I start sending push or rich push notifications

2023-02-01 16:31:45.337750+0100  [CIO] (siteid:xxx) ℹ️ Customer.io SDK 2.0.4 initialized and ready to use for site id: xxxxx
2023-02-01 16:31:45.338349+0100 [CIO] (siteid: xxx) deleting expired tasks from the queue
2023-02-01 16:31:45.341700+0100  [CIO] (siteid: xxx) deleting tasks older then 2023-01-29T16:31:45+0100,
2023-02-01 16:31:45.342753+0100  [CIO] (siteid: xxx) deleting 0 tasks. 
2023-02-01 16:31:45.377912+0100  [CIO] (siteid: xxx) ℹ️ registering device token cBobZpEwHEDhsnpj8Rt5nv:APA91bHpIGXVwQ3FJsHBXCHYD9q8gYhOoexxxxxxx
2023-02-01 16:31:45.377924+0100  [CIO] (siteid:b5ac9) storing device token to device storage cBobZpEwHEDhsnpj8Rt5nv:APA91bHpIGXVwQ3FJsHBXCHYD9q8gYhOoexxxxxx
2023-02-01 16:31:45.379528+0100  [CIO] (siteid:b5ac9) ℹ️ no profile identified, so not registering device token to a profile

so now im at a dead end again 😅

Any idea what I could do next to help get to the bottom of this further? thanks!

[simonarcher]

@levibostian hey Levi! do you have any idea how I could possibly move forward with this?

[levibostian]

Bummer to hear that debugger didn't work for you to hit breakpoints in Xcode. My guess is that's a React Native behavior? I am unsure though as I only do native iOS development. Either way, if you are able to see SDK logs in the Console app, that should work just as well as Xcode breakpoints so let's continue down that path.

---

A summary of the problem to this point: Expected: See a push notification on the device with an image inside of a push notification. Actual: See a push on the device, but on image shown in it.

What could be causing this problem:

• Is the code inside of Notification Service Extension (NSE) being executed? If it's not, a push would be shown with no image attached.
• Is the Customer.io SDK trying to show an image in the push notification but is not able to for some reason? Maybe the image URL is a URL that the SDK is not able to understand and therefore, it fails to display an image in the push? If the SDK fails to download an image and display it, you will see a push, but no image attached.

Let's start by trying to confirm the NSE is executing.

Here is how I would confirm that:

1. Make sure the Customer.io SDK is generating logs inside of the NSE code. So, inside of your NotificationService class, make sure logs are setup to generate:

class NotificationService: UNNotificationServiceExtension {

    ...

    CustomerIO.initialize(siteId: SettingsConfiguration.customerIoSiteID, apiKey: SettingsConfiguration.customerIoAPIKey, region: .EU) { config in
      config.logLevel = .info <--- how to enable logs in the NSE code
    }    

    ...
}

Looking at the code you sent me for the NotificationService class you created, you have enabled logs already with the .info log level. That will work good enough for now. If you want more logs to further help you debug, change .info to .debug.

2. Open Console as before and send yourself a push notification with an image attached. You should see logs from the Customer.io SDK show up from your host app and from your NSE.

In the console logs, you should see the Process column show 2 different values: 1 value is for SDK logs generated from your iOS app and 1 value is SDK logs generated from the NSE code.

If you see SDK logs generated from 2 separate Processes in Console, then that means the NSE code in your app is being executed! That's good because that means the Customer.io SDK is processing the push. If you only see SDK logs from 1 Process, the NSE code is not being executed. To fix that, I recommend going through our iOS SDK docs as it might contain more steps then our React Native docs do for setting up a NSE? Share feedback with me (as you have done already, thank you!) if you find docs missing for setting up NSE.

Try this out and see what it gives you for logs. Share those logs with me here or win@customer.io and we can see how to help you move forward.

[Shahroz16]

Closing due to inactivity. Feel free to re-open.