App Center Push

App Center Push enables you to send push notifications to users of your app from the App Center portal.

Prerequisite - Enable Apple Push Notifications service (APNs) for your app

Configure Apple Push Notifications service (APNs) for your app from your Apple developer account and App Center portal before adding App Center Push to your app.

Enable push notifications on your application

In Xcode's project editor, choose your target and click Capabilities. In the Push Notifications section, click the switch to turn it from OFF to ON.

enable-push-capability

Set up APNs

Log in to the App Center portal, select your application, click on the Push button from the left menu then click Next to reveal the push notification settings UI:

app-center-push-settings

  • On the bottom of the page, select Sandbox for initial development or Production for production version of your application.

  • Collect the following information:

    1. Prefix and ID

      • Go to your Apple developer account and select your application from the App ID list in Identifiers.

      • Copy the Prefix value from this window and paste it to the App Center push settings.

      • Do the same with the ID value.

      apple-dev-center-app-id

    Note

    As per guidance from the Apple Developer documentation, all new app developers who joined after 2011 will have the Team ID same as the App Prefix ID. If you have joined before, you will need to get the Team ID instead.

    1. Key ID

      • In your Apple developer account create a new key in Certificates, Identifiers & Profiles/Keys.

      • Make sure to check the APNs checkbox.

      • Fill in the key name

      • Press Continue then Confirm.

      apple-dev-center-new-auth-key

      • On the next screen, copy the Key ID value and paste it to the App Center push settings.

      • Download the key file.

      apple-dev-center-confirm-auth-key

    2. Push Token

      • Open your key file with a text editor and copy the authentication token it contains.

      auth-key-file

      • On the App Center push settings, paste this token to the Push Token field then click Done to complete this configuration.

For more information, refer to the Apple documentation.

[Optional] Enable silent notifications

Silent notifications give you a way to wake up your app so that it can refresh its data in the background (see Apple documentation). To enable silent notifications open Xcode's project editor, choose your target and click Capabilities. Turn on Background Modes and check the Remote notifications checkbox.

enable-silent-notifications

Add App Center Push to your app

1. Add the App Center Push module

Please follow the Get started section if you haven't set up and started the SDK in your application, yet. The App Center SDK is designed with a modular approach – you only need to integrate the services that you're interested in.

Integrate the SDK automatically

The default integration of the SDK uses Cocoapods for iOS.

  1. Open a Terminal and navigate to the root of your React Native project, then enter the following to add App Center Push to the app:

    npm install appcenter-push --save
    
  2. Link the plugin to the React Native app by using the react-native link command.

    react-native link appcenter-push
    

Integrate the iOS SDK manually

If you wish to manually integrate the module, follow the manual integration steps at documentation link

2.Start App Center Push

Register for notifications

App Center Push is started by this call:

#import <AppCenterReactNativePush/AppCenterReactNativePush.h>

...

[AppCenterReactNativePush register];

That call is added automatically to AppDelegate.m by the automatic instructions above. Otherwise, you need to add it manually.

Note that when the app calls register for the first time after being installed, iOS will prompt the user for permission to receive push notifications.

Intercept push notifications

You can set up a listener to be notified whenever a push notification is received in foreground or a background push notification has been tapped by the user. The listener may also be woken up when a notification is received in background if you have enable silent notifications and if the payload of the notification contains the content-available flag set to true.

Note

If silent notifications are enabled and you push a notification with content-available: 1, then the listener may be triggered twice for the same notification: when the notification is received in background and when it is tapped.

By default, iOS does not generate notifications when the push is received in foreground, you can use the listener to customize the push experience when received in foreground or do a specific action when the application is launched by clicking on the push notification when received in background.

You need to register the listener when your app starts. A convenient place to do that is at the outer level in the .js file for your root component:

import Push from 'appcenter-push';
import { AppState, Alert } from 'react-native';

class MyApp extends Component {
}

Push.setListener({
  onPushNotificationReceived: function (pushNotification) {
    let message = pushNotification.message;
    let title = pushNotification.title;

    if (message === null) {
      // Android messages received in the background don't include a message. On Android, that fact can be used to
      // check if the message was received in the background or foreground. For iOS the message is always present.
      title = 'Android background';
      message = '<empty>';
    }

    // Custom name/value pairs set in the App Center web portal are in customProperties
    if (pushNotification.customProperties && Object.keys(pushNotification.customProperties).length > 0) {
      message += '\nCustom properties:\n' + JSON.stringify(pushNotification.customProperties);
    }

    if (AppState.currentState === 'active') {
      Alert.alert(title, message);
    }
    else {
      // Sometimes the push callback is received shortly before the app is fully active in the foreground.
      // In this case you'll want to save off the notification info and wait until the app is fully shown
      // in the foreground before displaying any UI. You could use AppState.addEventListener to be notified
      // when the app is fully in the foreground.
    }
  }
});

Custom data in your notifications

You can send optional custom data as part of the push payload. The data will be sent in the key-value format. This custom data can be intercepted in the app through Push SDK callback.

There are few reserved keywords that can be set via custom data.

Reserved keywords in iOS platform

  • badge: Add this key when you want to modify the badge of your app icon. If this key is not included, the badge is not changed. To remove the badge, set the value of this key to 0.
  • sound: Add this key when you want the to play a sound. The value of this key is the name of a sound file in your app's main bundle or in the Library/Sounds folder of your app’s data container. If the sound file cannot be found, or if you specify default for the value, the system plays the default alert sound.
  • content-available: Add this key with a value of 1 to configure a silent notification. When this key is present, the system wakes up your app in the background and delivers the notification to its app delegate. For information about configuring and handling silent notifications, see Configuring a Silent Notification.
  • mutable-content: Add this key with a value of 1 to enable media attachments. The application needs to support a service extension to download and handle the attachment content. For more information you can refer to Apple documentations.

Enable or disable App Center Push at runtime

You can enable and disable App Center Push at runtime. If you disable it, the SDK will stop updating the device token used to push but the existing one will continue working. In other words, disabling the App Center Push in the SDK will NOT stop your application from receiving push notifications.

import Push from 'appcenter-push';

...

await Push.setEnabled(false);      // Disable push
await Push.setEnabled(true);       // Re-enable it

Check if App Center Push is enabled

You can also check if App Center Push is enabled or not:

import Push from 'appcenter-push';

...

const pushEnabled = await Push.isEnabled();

Disable automatic forwarding of application delegate's methods to App Center services

App Center uses swizzling to automatically forward your application delegate's methods to App Center services to improve SDK integration. There is a possibility of conflicts with other third party libraries or the application delegate itself. In this case, you might want to disable the App Center application delegate forwarding for all App Center services by following the steps below:

  1. Open your Info.plist file.

  2. Add AppCenterAppDelegateForwarderEnabled key and set the value to 0. This will disable application delegate forwarding for all App Center services.

  3. Implement the callbacks to register push notifications

    You will have to add @import AppCenterPush and @import AppCenterReactNativeShared if they are not already added. Then implement the application:didRegisterForRemoteNotificationsWithDeviceToken: callback and the application:didFailToRegisterForRemoteNotificationsWithError: callback in your AppDelegate to register for Push notifications.

    @import AppCenterPush;
    @import AppCenterReactNativeShared;
    
    - (void)application:(UIApplication *)application
        didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
    
      // Pass the device token to MSPush.
      [MSPush didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
    }
    
    - (void)application:(UIApplication *)application
        didFailToRegisterForRemoteNotificationsWithError:(nonnull NSError *)error {
    
      // Pass the error to MSPush.
      [MSPush didFailToRegisterForRemoteNotificationsWithError:error];
    }
    
  4. Implement the callback to receive push notifications

    Implement the application:didReceiveRemoteNotification:fetchCompletionHandler callback to add the logic for receiving a Push notification.

    - (void)application:(UIApplication *)application
        didReceiveRemoteNotification:(NSDictionary *)userInfo
             fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {
      NSDictionary *dictionary = [[userInfo objectForKey:@"aps"] objectForKey:@"alert"];
      UIAlertController *alert = [UIAlertController alertControllerWithTitle:[dictionary valueForKey:@"title"]
                                                                    message:[dictionary valueForKey:@"body"] 
                                                            preferredStyle:UIAlertControllerStyleAlert];
      UIAlertAction *ok = [UIAlertAction actionWithTitle:@"OK"
                                                  style:UIAlertActionStyleDefault
                                                handler:^(UIAlertAction *action) {
        [alert dismissViewControllerAnimated:YES completion:nil];
      }];
      [alert addAction:ok];
      [self.window.rootViewController presentViewController:alert animated:YES completion:nil];
    }