Push notifications play an important role in any application. This can dramatically increase user engagement.
Setting up push notifications from scratch can be a little tricky. Fortunately, Amplify provides push notification services and SDKs for our apps. In this tutorial, we will learn how to integrate this service into our application.
In the root directory of the React Native project, initialize AWS Amplify
We answer questions:
The project was initialized 🚀
We link the push notification dependency using the command:
To prevent this error in the future, add the
netinfo library. You can add it to your project with the following command (if you don't have one):
- Open Firebase Console.
- Open or create a new project for further actions.
Cloud Messagingfrom the toolbar.
- Click on Android and follow these steps:
- Fill out the form and register the application. The
android package namecan be found in
android / app / build.gradle. Stored in
applicationIdlook like this:
Upload the config file to
android / app.
Add Firebase SDK. Consider
directory to react native project. Don't forget to add the latest version of
firebase-messagingfrom here and
Run the project in Android and you will see confirmation from Firebase. (you can skip this step). 5. Open
android / app / src / main / AndroidManifest.xmland add the following code to
- Add a push notification service using the following command in your project directory:
- Please select
- Enter the exact name of the resource (or just hit enter without filling anything).
- You will be asked for
ApiKey. To do this, you need to follow these steps:
- Open Firebase Console and open the app you created in the previous steps.
- Click on the icon in the
Project Overviewsection in the toolbar and select
Project settings. -Select the
Cloud Messagingtab and copy the value
- Insert the requested values for
- After completing the configuration, run
Run the following command to iOS:cd ios && pod install && cd ..
Add iOS notifications with the command
amplify add notifications:
? Choose the push notification channel to enable.> APNSFCMSMS
? Choose authentication method used for APNs (Use arrow keys)> CertificateKey
- You will then be prompted for an authentication method. It is recommended to select a certificate.
If you selected a certificate, you will be prompted for the path to the .p12 certificate. (You can use this tutorial).
Select a project and select a project name in the
Signing & Capabilitiesand press the
+in front of the
Background Mode - Remote Notifications.
As stated earlier,
Analytics needs to be integrated with notifications. This will help track notifications. Although custom properties can be used, it is recommended that you use the
App.js add the following configuration:
We usually want to send push notifications to specific users for various purposes. The API provides us with various methods to handle our users and push notifications.
Each device can be recognized with a push token, with which you can specify the device for which you want to receive a push notification. When the user opens the application for the first time, the pushed token is retrieved and stored on the device. You should be aware that this method may be called again in the future, so you should be prepared for this situation to update your data accordingly.
You can add the following code to
attention: On Android, there might be a problem that this method will never be called! However workaround can be like this wherever you need a token:
If you want to do something when a notification is received, the
onNotification method is for actions based on the received notification. Keep in mind that the structure of notification objects is different from Android and iOS. On iOS, you should use the
finish method. You can add the following code to
A common scenario is when a user opens a push notification,
onNotificationOpened is called.
App.js looks like this:
Push notification only works on a real device and will not receive any notifications unless the end user gives permission.
requestIOSPermissions is needed to get this permission. It can be called without any parameters, or you can customize the object like this:
First of all, we want to take a look at the file
Launching the project:
To go further, we need one of the
endpoint ID or
Push Token. Explained in detail here
Endpointrepresents a destination to which you can send messages, such as a mobile device, email address, or phone number.
Push Token it is a unique identifier that is generated and assigned from
GCM (Android) or
APNS (iOS) to your application on a specific device.
The most obvious difference between the two is that the
endpoint is generated from
aws and defines the application on the device regardless of platform (iOS / Android). But the token, depending on the platform, is generated either from
console.log for copying and save these keys for the next steps. Switch to development mode and copy the following values to the console:
While there are several ways to send a test push notification to a specific device, we'll explore the easiest way.
- Run the following command at the root of the project:
- The application console will automatically open in the browser.
Test messagingin the left sidebar:
Destinationssection looks like this:
Destination typedetermines whether you want to use
Push tokenin the previous steps) in the next text input.
Insert the token you want to use based on the
If you selected
Endpoint IDsand used an endpoint, the
Push Notification Servicecan automatically detect your device. Otherwise, if you used
Device token, select
APNSfor IOS and
You can fill in the
Messagesection as shown below and click the button
You will receive a success message as shown below. After a couple of seconds, you will see a push notification on your device: