Set up Amplify Push Notifications

The Push Notifications category allows you to integrate push notifications in your app with Amazon Pinpoint targeting, campaign, and journey management support. You can segment your users, trigger push notifications to your app, and record metrics in Pinpoint when users receive or open notifications. Amazon Pinpoint helps you to create messaging campaigns and journeys targeted to specific user segments or demographics and collect interaction metrics with push notifications.

Prerequisites

You should have completed the CLI and project setup steps.

apply plugin: 'com.google.gms.google-services'

Set up backend resources

To use Push Notifications with Amplify, you have the option to either have the Amplify CLI setup resources for you, or you can use an existing Amazon Pinpoint resource in your AWS account.

amplify add notifications

? Choose the push notification channel to enable.
❯ APNS |  Apple Push Notifications
  FCM  | » Firebase Push Notifications
  In-App Messaging
  Email
  SMS

? Provide your pinpoint resource name: › [pinpoint_resource_name]
? Apps need authorization to send analytics events. Do you want to allow guests
 and unauthenticated users to send analytics events? (we recommend you allow this 
 when getting started) (Y/n)

? Choose authentication method used for APNs
> Certificate
Key

🛑 Command failed: openssl pkcs12 -in [path_to_your_cert].p12 -out [output_path].pem -nodes -passin pass:
Error outputting keys and certificates

? Choose the push notification channel to enable.
  APNS |  Apple Push Notifications
❯ FCM  | » Firebase Push Notifications
  In-App Messaging
  Email
  SMS

? Provide your pinpoint resource name:
    `yourPinpointResourceName`

? Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analytics events? (we recommend you allow this when getting started) (Y/n)
    'Y'

Amplify.configure({
  Notifications: {
    Push: {
      AWSPinpoint: {
        appId: '<app-id>',
        region: '<region>'
      }
    }
  }
});

Install Amplify Libraries

In your project directory, you should first install the necessary dependencies for using Amplify Push Notifications.

npm install aws-amplify@^5 @aws-amplify/rtn-push-notification@~1.1.x amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill

You will also need to add the crypto.getRandomValues and URL polyfills to your application's entry point file (in most React Native apps this will be the top level index.js).

// Example index.js
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
...

Integrate native modules

Since push notifications require interaction with the native platform, there are some additional steps required to integrate your React Native app with the Amplify Push Notifications native module.

Link the module

You should have already installed the native module in an earlier step, now you need to link it. In your React Native app's root directory run the following command.

npx pod-install

Update your Application Delegate

Locate and open your AppDelegate.m or AppDelegate.mm file in your text editor. You should find it in your React Native project under /ios/<your-project-name>

At the top of your AppDelegate, import Amplify Push Notifications:

#import "AppDelegate.h"
#import "AmplifyPushNotification.h"

...

In the body of your AppDelegate, add the following two methods:

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
  [AmplifyPushNotification didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
  [AmplifyPushNotification didReceiveRemoteNotification:userInfo withCompletionHandler:completionHandler];
}

Initialize Amplify Push Notifications

To initialize Amplify Push Notifications, you will first need to configure Amplify.

Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example, index.js

// Example index.js
...
import { Amplify, Notifications } from 'aws-amplify';
import awsconfig from './src/aws-exports';

Amplify.configure(awsconfig);
...

Next, enable Amplify Push Notifications. You should do this in your app's root entry point after configuring Amplify as push notifications can occur even while your app is in a terminated state.

// Example index.js
...
Notifications.Push.enable();
...

Your resulting entry file should look something like the following:

import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

import { Amplify, Notifications } from 'aws-amplify';
import awsconfig from './src/aws-exports';

Amplify.configure(awsconfig);
Notifications.Push.enable();

AppRegistry.registerComponent(appName, () => App);