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.

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.

1amplify add notifications

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

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

1? Choose authentication method used for APNs
2> Certificate
3Key

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

Install Amplify Libraries

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

1npm install aws-amplify @aws-amplify/react-native @aws-amplify/rtn-push-notification @react-native-async-storage/async-storage react-native-get-random-values

Integrate native module

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.

1npx 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:

1#import "AppDelegate.h"
2#import "AmplifyPushNotification.h"
3
4...

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

1- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
2  [AmplifyPushNotification didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
3}
4
5- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
6  [AmplifyPushNotification didReceiveRemoteNotification:userInfo withCompletionHandler:completionHandler];
7}

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.

1// Example index.js
2// ...
3import { Amplify } from 'aws-amplify';
4import amplifyconfig from './src/amplifyconfiguration.json';
5
6Amplify.configure(amplifyconfig);
7// ...

Next, initialize Amplify Push Notifications. It is recommended to do this in your app's root entry point after configuring Amplify if your app requires push notification handling even while in a terminated state.

1// Example index.js
2// ...
3import { initializePushNotifications } from 'aws-amplify/push-notifications';
4
5initializePushNotifications();
6// ...

Your resulting entry file should look something like the following:

1import { AppRegistry } from 'react-native';
2import App from './App';
3import { name as appName } from './app.json';
4
5import { Amplify } from 'aws-amplify';
6import { initializePushNotifications } from 'aws-amplify/push-notifications';
7import amplifyconfig from './src/amplifyconfiguration.json';
8
9Amplify.configure(amplifyconfig);
10initializePushNotifications();
11
12AppRegistry.registerComponent(appName, () => App);