40

Set up push notifications

Our Flutter SDK supports push notifications over FCM—including rich push messages with links and images. Use this page to add support for your push provider and set your app up to receive push notifications.

This page is part of a setup flow for the SDK. Before you continue, make sure you've implemented previous features—i.e. you can't receive push notifications before you identify people!

How it works

Under the hood, our Flutter SDK takes advantage of our native Android and iOS SDKs. This helps us keep the Flutter SDK up to date. But, for now, it also means you’ll need to add a bit of code to support your iOS users. For Android, you’re ready to go if you followed our getting started instructions.

Before a device can receive a push notification, you must:

1. (iOS) Register a device token for the device; code samples on this page help you do that.
2. Identify a person. This associates a token with the person; you can’t send push notifications to a device until you identify the recipient.
3. (for both iOS and Android) Check for notification permissions. If your app user doesn’t grant permission, notifications will not appear in the system tray.
4. (Optional) Set up your app to report push metrics back to Customer.io.

Set up push on Android

If you followed our Getting Started instructions, you’re already set up to send standard push notifications to Android devices. Next, you can set up deep links if you want your notifications to link into your app. You can also move on to set up iOS.

Set up push on iOS

You’ll need to add some additional code to support push notifications for iOS. You’ll need to add push capabilities in XCode and integrate push capabilities in your app.

Add push capabilities in Xcode

Before you can work with push notifications, you need to add Push Notification capabilities to your project in XCode.

1. In your Flutter project, go to the ios subfolder and open <yourAppName>.xcworkspace.

2. Select your project. Under Targets, select your main app.

3. Click the Signing & Capabilities tab.

4. Click Capability.

5. Add Push Notifications to your app.

   

   

6. Select File > New > Target.

   

   

7. Select Notification Service Extension and click Next.

   

   

8. You should see a window such as this:

You can leave many of the options in this window as their defaults, but you should:

• Enter a product name, like NotificationServiceExtension (which we use in our examples on this page)
• Confirm that your main app is selected in the Embed in Application drop-down menu

After you have completed this, click Finish.

1. When presented with the dialog below, click Cancel. This will help Xcode continue debugging your app and not just the extension you just added.

   

   

Now you have another target in your project navigator named NotificationServiceExtension. We’ll configure this extension when we Integrate Push Notifications in the following section.

Integrate push capabilities in your app

1. Open the file ios/Podfile and make the following modifications:

# Note: You may need to add this line, as required by FCM, to the top of your Podfile if you encounter errors during 'pod install'
use_frameworks! :linkage => :static

target 'YourApp' do # Look for the main app target. 
  # Add the following line to add the Customer.io native dependency: 
  pod 'CustomerIO/MessagingPushFCM', '~> 2.8.2'
end

# Next, copy and paste the code below to the bottom of your Podfile: 
target 'NotificationServiceExtension' do
  pod 'CustomerIO/MessagingPushFCM', '~> 2.8.2'    
end

1. Run pod install --repo-update --project-directory=ios from the root directory of your Flutter project. When dependencies finish installing, you should see a message like this:

   Pod installation complete! There are X dependencies from the Podfile and Y total pods installed.
   

2. Update your AppDelegate.swift file to handle push notifications.

    import Flutter
    import CioMessagingPushFCM
    import CioTracking
    import FirebaseMessaging
    import FirebaseCore
    import UserNotifications
   
    class AppDelegate: FlutterAppDelegate {
    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
    ) -> Bool {
   
        GeneratedPluginRegistrant.register(with: self)
   
        // Configure Firebase
        FirebaseApp.configure()
   
        // Set FCM messaging delegate
        Messaging.messaging().delegate = self
   
        // Set the iOS push notification click handler
        // This is required in order for the Customer.io SDK to handle when a push is clicked. 
        UNUserNotificationCenter.current().delegate = self
   
        // Tells iOS to provide a push token, if one is available. 
        // Note: You need to include this line even if your app user has not granted notification permissions.
        UIApplication.shared.registerForRemoteNotifications()
   
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
      }
   
    func application(application: UIApplication,
                     didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
        Messaging.messaging().setAPNSToken(deviceToken, type: .unknown);
    }
   
    // Called when a push notification is clicked. 
    override func userNotificationCenter(
        _ center: UNUserNotificationCenter,
        didReceive response: UNNotificationResponse,
        withCompletionHandler completionHandler: @escaping () -> Void
    ) {
        // Call the Customer.io SDK to handle the push notification
        let handled = MessagingPush.shared.userNotificationCenter(center, didReceive: response,
                                                                  withCompletionHandler: completionHandler)
   
        // If the Customer.io SDK does not handle the push, it's up to you to handle it and call the
        // completion handler. If the SDK did handle it, it called the completion handler for you.
        if !handled {          
            completionHandler()
        }
      }
   
      // (Optional, available for iOS 14 and onwards) Add if you want to show your push notifications when your app is in the foreground.
      func userNotificationCenter(
        _ center: UNUserNotificationCenter,
        willPresent notification: UNNotification,
        withCompletionHandler completionHandler: **@escaping** (UNNotificationPresentationOptions) -> Void
      ) {
        completionHandler([.list, .banner, .badge, .sound])
      }
   
    }
   
    extension AppDelegate: MessagingDelegate {
      func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
        // Send the FCM token to Customer.io
        MessagingPush.shared.messaging(messaging, didReceiveRegistrationToken: fcmToken)
      }
    }
   

3. Look in Xcode for a file: NotificationService.swift. It should look similar to this:

import UserNotifications

class NotificationService: UNNotificationServiceExtension {
      
  override func didReceive(_ request: UNNotificationRequest,
                          withContentHandler contentHandler:
                          @escaping (UNNotificationContent) -> Void) {
    ...
  }
  
  override func serviceExtensionTimeWillExpire() {
    ...
  }
      
}

Modify this file to look like the following:

import UserNotifications
import CioMessagingPushFCM
import CioTracking

class NotificationService: UNNotificationServiceExtension {
      
  override func didReceive(_ request: UNNotificationRequest,
                          withContentHandler contentHandler:
                          @escaping (UNNotificationContent) -> Void) {
    // It's required that you initialize the Customer.io SDK in this file, even though you also did so in your app.     
    CustomerIO.initialize(siteId: "YourSiteID", apiKey: "YourAPIKey", region: .US) { config in
      // To confirm that `delivered` push metrics are tracked, set this to true.
      config.autoTrackPushEvents = true
    }

    MessagingPush.shared.didReceive(request, withContentHandler: contentHandler)
  }
  
  override func serviceExtensionTimeWillExpire() { 
    MessagingPush.shared.serviceExtensionTimeWillExpire()
  }

}

Now you can run your app on a physical device and send yourself a push notification with images and deep links to test your implementation. You’ll have to use a physical device because simulators can’t receive push notifications.

Sound in push notifications (iOS Only)

When you send a push notification to iOS devices that uses our SDK, you can opt to send the Default system sound or no sound at all. If your audience’s phone is set to vibrate, or they’ve disabled sound permissions for your app, the Default setting will cause the device to vibrate rather than playing a sound.

In most cases, you should use the Default sound setting to make sure your audience hears (or feels) your message. But, before you send sound, you should understand:

1. Your app needs permission from your users to play sounds. This is done by your app, not our SDKs. Here’s an example from our iOS sample app showing how to request sound permissions.
2. iOS users can go into System Settings and disable sound permissions for your app. Enabling the Default setting doesn’t guarantee that your audience hears a sound when your message is delivered!

Test your implementation

After you set up rich push, you should test your implementation. Below, we show the payload structure we use for iOS and Android. In general, you can use our regular rich push editor; it’s set up to send messages using the JSON structure we outline below.

If you want to fashion your own payload, you can use our custom payload.

{
  "message": {
    "apns": {
      "payload": {
        "aps": {
          // basic iOS message and options go here
          "mutable-content": 1,
          "alert": {
            "title": "string", //(optional) The title of the notification.
            "body": "string" //(optional) The message you want to send.
           }
        },
        "CIO": {
          "push": {
            "link": "string", //generally a deep link, i.e. my-app://... or https://yourwebsite.com/...
            "image": "string" //HTTPS URL of your image, including file extension
          }
        }
      },
      "headers": {
        // (optional) headers to send to the Apple Push Notification Service.
        "apns-priority": 10
      }
    } 
  }
}

{
  "message": {
    "data": {
      "title": "string", //(optional) The title of the notification.
      "body": "string", //The message you want to send.
      "image": "string", //https URL to an image you want to include in the notification
      "link": "string" //Deep link in the format remote-habits://deep?message=hello&message2=world
    }
  }
}