Push Notification with Amplify

Push notifications play an essential role in any Application. It can considerably increase the user engagement, and it might be an asked feature from the end-user.

Setting up a push notification from scratch can be a bit challenging. Fortunately, the Amplify provides the push notification services and SDK for our apps. In this tutorial, we learn how to integrate our app with this service.

Create a new project

Whether you are going to implement only for IOS or Android, the following steps are required. If you are not working on a project, then the first step is creating one by the following command:

npx react-native init amplifyPush

cd amplifyPush

Initialize our AWS Amplify project in the root directory.

amplify init

Here is how the answers can be:

• Add the required dependencies with:

npm install --save aws-amplify @aws-amplify/pushnotification

or

yarn add aws-amplify @aws-amplify/pushnotification

You need to link the push notification dependency with:

react-native link @aws-amplify/pushnotification

caution

To prevent an error in the future add the netinfo library. You can add it to your project by the following command (in case your don't have it):

npm install --save @react-native-community/netinfo

yarn add @react-native-community/netinfo

Android - Setting up the Firebase

1. Open the Firebase console.
2. Open or create a project for further steps.
3. Select the Cloud Messaging in the dashboard.

4. Click on the Android and follow the following steps:

• Fill in the form and register the app. Android package name can be found in android/app/build.gradle. It is stored as applicationId like this:

gradle title="android/app/build.gradle"

defaultConfig {

applicationId "com.amplifypush"

}

• Download the config file to android/app directory of the project.
• Add the Firebase SDK as the instructions. Consider the <project> the android and <app-module> the app directory in the react native project. Don't forget to add the latest version of firebase-messaging from here as well ad the firebase-analytics in dependencies.
• Run the project in Android and you will see that the verification of Firebase. (you can skip this step)
• Open the android/app/src/main/AndroidManifest.xml and add the following code in the application element:

xml title="android/app/src/main/AndroidManifest.xml"

<!--[START Push notification config -->

<!-- [START firebase_service] -->

<service

android:name="com.amazonaws.amplify.pushnotification.RNPushNotificationMessagingService">

<intent-filter>

<action android:name="com.google.firebase.MESSAGING_EVENT"/>

</intent-filter>

</service>

<!-- [END firebase_service] -->

<!-- [START firebase_iid_service] -->

<service

android:name="com.amazonaws.amplify.pushnotification.RNPushNotificationDeviceIDService">

<intent-filter>

<action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>

</intent-filter>

</service>

<receiver

android:name="com.amazonaws.amplify.pushnotification.modules.RNPushNotificationBroadcastReceiver"

android:exported="false" >

<intent-filter>

<action android:name="com.amazonaws.amplify.pushnotification.NOTIFICATION_OPENED"/>

</intent-filter>

</receiver>

<!-- [END Push notification config -->

Setting up the Amplify for FCM

1. Add the push notification service to amplify by the following command in the project directory:

amplify add notifications

2. Choose FCM when promoted:

? Choose the push notification channel to enable.

APNS

❯ FCM

Email

SMS

3. Fill the pinpoint resource name (or just press enter without filling anything).
4. You will be asked for ApiKey. For getting that, you should do the following steps:

• Open the Firebase console and open the app you created in previous steps.
• Click on the gear icon in the Project Overview section of the dashboard and select the Project settings.

• Select the Cloud Messaging tab and copy the value of the Server key.

5. Paste the value for requested ApiKey.
6. After the setup is completed, run the amplify push command.

iOS - Setup

1. Add the @react-native-community/push-notification-ios by the following command:

yarn

yarn add @react-native-community/push-notification-ios`

npm

npm install --save @react-native-community/push-notification-ios

2. Run the following commands: ```bash cd ios && pod install && cd .. ``` 3. Add the notifications to the amply for iOS by `amplify add notifications` command:

1. Choose `APNS` when promoted:

```bash

? Choose the push notification channel to enable.

> APNS

FCM

Email

SMS

```

2. Then you will be prompted for the authentication method. It is recommended to choose the certificate.

```bash

? Choose authentication method used for APNs (Use arrow keys)

> Certificate

Key

```

3. If you have chosen the certificate, then you will be prompted for the .p12 certificate path file. (You can use this [tutorial](https://mobincube.zendesk.com/hc/en-us/articles/200511933-How-to-get-the-p12-file-and-provisioning-profile-for-publishing-an-app-on-App-Store) to get that).

4. Run amplify push.

5. Open the .xcworkspace project with the XCode.

6. Select the project and select the project name in TARGETS section. Select the Signing & Capabilities and press the + before the Capability. Choose Background Mode - Remote Notifications.

Configure App

As it was told before, The Analytics should be integrated along with the notifications. It will help to track the notifications. Though it is possible to use custom properties, It is advised to use the aws-exports file. in App.js file add the configuration as follow:

...

import Amplify from 'aws-amplify';

import PushNotification from '@aws-amplify/pushnotification';

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

PushNotification.configure(awsconfig);

...

Working with API

Usually, what we want is sending push notifications to specific users for various purposes. The API gives us various methods for handling our users & push notifications.

onRegister

Each device can be recognized by the push token by which you can specify the device you want to get a push notification. When the user opens the app for the first time, the pushed token is fetched and stored in the device. You should be aware of the fact this method may get called again in the future, so you should be prepared for this situation to update your data according to it.

You can add the following code in App.js:

PushNotification.onRegister(token => {

console.log('in app registration', token)

PushNotification.updateEndpoint(token)

})

Attention

There can be an issue in android that this method never be called! However a workaround can be like this anywhere you might need the token:

...

import {NativeModules} from 'react-native';

...

NativeModules.RNPushNotification.getToken((token) => {

console.log(`PushToken: ${token}`);

});

...

onNotification

In case you want to do something when the notification is recieved the onNotification method is for acting based on the recieved notification. Don't forget to that the notification object structure is diffrent from Android and IOS. In IOS, You Should use the finish method. You can add the following code to App.js:

...

import PushNotificationIOS from '@react-native-community/push-notification-ios';

...

PushNotification.onNotification((notification) => {

console.log('in app notification', notification);

if (Platform.OS === 'ios') {

notification.finish(PushNotificationIOS.FetchResult.NoData);

}

});

onNotificationOpened

A common scenario is reacting to when user opens a push notification (eg: opening a message etc). Whenever the user opens a push notification, the onNotificationOpened is called. The code can be in App.js as follow:

PushNotification.onNotificationOpened(notification => {

console.log('the notification is opened', notification)

})

requestIOSPermissions

Push notification works only on a real device and it won't recieve any notification unless the end user give the permission. The requestIOSPermissions is for getting this permission. It either can be called without any parameters, or you can customize by an object as follows:

PushNotification.requestIOSPermissions()

// or

PushNotification.requestIOSPermissions({

alert: true,

badge: true,

sound: false

})

Testing

First of all, we want to take a look at the App.js file. Though you can work with the API anywhere in your code, It can be something like this:

import React from 'react'

import { SafeAreaView, Platform, Text, NativeModules } from 'react-native'

import PushNotificationIOS from '@react-native-community/push-notification-ios'

import Analytics from '@aws-amplify/analytics'

import Amplify from 'aws-amplify'

import PushNotification from '@aws-amplify/pushnotification'

import awsconfig from './aws-exports'

Amplify.configure(awsconfig)

PushNotification.configure(awsconfig)

PushNotification.onRegister(async token => {

console.log('in app registration', token)

PushNotification.updateEndpoint(token)

})

// In case PushNotification.onRegister didn't work

NativeModules.RNPushNotification.getToken(token => {

console.log(`PushToken: ${token}`)

})

PushNotification.onNotification(notification => {

console.log('in app notification', notification)

if (Platform.OS === 'ios') {

notification.finish(PushNotificationIOS.FetchResult.NoData)

}

})

PushNotification.onNotificationOpened(notification => {

console.log('the notification is opened', notification)

})

const endpointId = Analytics.getPluggable('AWSPinpoint')._config.endpointId

console.log(`endpoint ID: ${endpointId}`)

if (Platform.OS === 'ios') {

PushNotification.requestIOSPermissions()

}

const App: () => React$Node = () => {

return (

<SafeAreaView>

<Text>Push Notification</Text>

</SafeAreaView>

)

}

export default App

Now we run our program:

react-native run-android

To go further, we need one of the endpoint ID or Push Token. Here is an explanation of endpoint in aws services:

An endpoint represents a destination that you can send messages to, such as a mobile device, email address, or phone number.

Push Token is a unique id, Which is generated and assigned by GCM(Android) or APNS(IOS) to your application in a specific device.

The most apparent difference between these two is that the endpoint is generated from aws, and defines the app in a device regardless of the platform(IOS/Android). But the push token is generated either by the Apple or Google, depending on the platform.

We use console.log to copy and keep these keys for the next steps. Go into the dev mode and copy the following values in your console:

Although there are multiple ways to send a test push notification to a specific device, We're going to learn the easiest way possible.

1. Run the following command in the root of the project:

amplify notification console

2. The console of the app will be opened in the browser automatically.

3. Select the Test messaging in the left sidebar:

4. In the Channel section, select the Push notifications.

5. The Destinations section is as follow:

1. Destination type defines whether you want to use Endpoint IDs or Device Tokens(or Push token in previous steps) in the next text input. 2. Paste the token you want to use, Based on the selected Destination type. 3. If you have chosen the Endpoint IDs and used endpoint, then the Push notifications service can automatically detect your device. Otherwise, if you have used Device token, for IOS, choose the APNS and for Android choose the FCM.

6. You can fill the Message section like below and press the Send message button.

7. You will get a success message like below if everything is ok.

After a couple of seconds, You will see the push notification in your device:

Done ✅

References:

Amplify Docs

Setting up Android Push Notifications with AWS Amplify

Testing Push Notifications with AWS Amplify & CLI