Remote Notification support

Utilise the power of Notifee with remote notifications.

It's possible to display a notification with Notifee features from outside the app using remote notifications (a.k.a push notifications).

By adding a custom key notifee_options in the message payload, the notification will be modified by Notifee before it is finally displayed to the end user.

To get started, you will need to implement a Notification Service Extension for your iOS app, the following steps will guide you through how to set it up.

Add the notification service extension

  • From Xcode top menu go to: File > New > Target...
  • A modal will present a list of possible targets, scroll down or use the filter to select Notification Service Extension. Press Next.
  • Add a product name (use NotifeeNotificationService to follow along) and click Finish

Add target to the Podfile

Ensure that your new extension has access to NotifeeExtensionHelper by adding it in the Podfile:

  • From the Navigator open the Podfile: Pods > Podfile
  • Scroll down to the bottom of the file and add
$NotifeeExtension = true

target 'NotifeeNotificationService' do
  pod 'RNNotifeeCore', :path => '../node_modules/@notifee/react-native/RNNotifeeCore.podspec'
end

  • Install or update your pods using pod install from the ios folder

pod install --repo-update

Use the extension helper

At this point everything should still be running normally. This is the final step which is invoking the extension helper.

  • From the navigator select your extension
  • Open the NotificationService.m file
  • At the top of the file import NotifeeExtensionHelper.h right after the NotificationService.h as shown below
#import "NotificationService.h"
+ #import "NotifeeExtensionHelper.h"
  • then replace everything from line 25 to 28 with the extension helper
- // Modify the notification content here...
- self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.title];
    
- self.contentHandler(self.bestAttemptContent);
+ [NotifeeExtensionHelper populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];

Before, moving to the next step, run the app and check it builds successfully – make sure you have the correct target selected.

Edit the payload

Now everything is setup in your app, you can alter your notification payload to include notifee_options:

// FCM
{
    notification: {
      title: 'A notification title!',
      body: 'A notification body',
    },
    apns: {
        payload: {
            aps: {
                'content-available': 1, // Important, to receive `onMessage` event in the foreground when message is incoming
                'mutable-content': 1, // Important, without this the extension won't fire
            },
            notifee_options: {
                image: 'https://placeimg.com/640/480/any', // URL to pointing to a remote image
                ios: {
                    sound: 'media/kick.wav', // A local sound file you have inside your app's bundle
                    categoryId: 'post', // A category that's already been created by your app
                    ... // any other api properties for NotificationIOS
                },
            },
        },
    },
    ...
};

Copyright 2020 - 2021 © Invertase Limited

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License and code samples are licensed under the Apache 2.0 License.

All product names, logos, and brands are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.