Push notifications
  • 21 Sep 2022
  • 5 Minutes to read
  • Dark
    Light
  • PDF

Push notifications

  • Dark
    Light
  • PDF

About push notifications

A push notification is a message that is "pushed" from a backend server to your app, appearing instantly on your target user's device whether it has the app launched or not.

Typically, a push message is shown on the mobile device lock screen/notification center if the app is closed. If the app is running when the push notification is received, an event is triggered and the developer can then decide how the app should react.

In order to test push notifications, please build your application. That way you can receive notifications specific to you app and configuration.

Note that material in this article relies on a 3d-party service, so we are unable to ensure the information is always up to date.

Prerequisites

Push notifications require the Firebase connector to be configured in Composer. A Firebase app should be created and configured for each desired platform: iOS and/or Android.

Composer app

In your Composer app, first configure logic to get a device token for push messages. The device token is then sent to your backend and used to uniquely identify a specific device (or devices) as the recipient for the message.

First, we need to request notification permissions, which can be done with the flow function Request notification permissions.

Next, we need to get the device token with the flow function Get device token for custom backends or Get Firebase device token for Firebase cloud messaging.

Example of notification permissions and get device token flow

or

Get Firebase Token

The device token returned by the flow function can then be posted to your backend via a HTTP request node, or REST API integration. The Firebase token is passed via the Firebase connector.

"Old" Firebase method

As described here.
You can send the device token over to Firebase via the HTTP request (mentioned previously) with the following configuration:

  • URL : https://fcm.googleapis.com/fcm/send
  • Method : POST
  • Headers :
    • value : key=<firebase key>
    • header : Authorization
  • Request body (formula):
DECODE_JSON(‘{“priority”: “high”, “to”: “/topics/AAA”, “notification”: {“title”: “TITLE”, “body”: “NOTIFICATION_TEXT”}, “data”: {"sound": "default"}}’)
  • Request body type: json

Bulding your app

Android

Setting up Firebase

On Android, Composer uses Google's Firebase cloud messaging under the hood.

After registering for Firebase you need to create a new project and add an Android app. You need to provide the same exact Android package name as you will configure in your Composer's build service configuration (and Google Play Store, if you are publishing through that channel).

pasted-graphic

After filling out the form, you need to download the provided config file:

google-services.json

Download config file Android

Build settings

After you've done the basic build configurations for Android, you need to access the Advanced tab. Under this tab you need to upload your google-services.json you downloaded earlier from Firebase. This file is injected in your build and setups your app for receiving push notifications.

Note that the Advanced tab only becomes visible when you have flow functions in your app which require additional files or values that need to be provided for the build to be successful, so in this case Get device token requires google-services.json.

Save reminder

iOS

On iOS we use Apple Push Notification service (APNS) for push notification delivery.

Prerequisites

For starters your app must match these requirements:

  • Push Notifications must be enabled on your App ID.
  • Your Distribution Certificates must have been built after Push Notifications was enabled.
  • Your Provisioning Profiles must have been built after Push Notifications were enabled.

To enable push notifications, you need to add it from the "Capabilities" list while creating a new App Identifier OR modifying an existing one. There you will be prompted to add create your APNS certificate.

APNS Cert

Note: You can also add APNS SSL Certificate later at https://developer.apple.com/account/resources/certificates/add but you need to create a new distribution certificate/provisioning profile that includes this in the App identifier.

Sending notifications

Firebase

In your Firebase project, choose 'Messaging' from the 'Engage' tab.

Firebase

From the 'Messaging' page:

  1. Click 'Create your first campaign' to initialize a new push notifications project.
  2. From the pop-up, choose 'Firebase Notification messages'.

If done correctly, you will be presented with 'Compose notification' view. Here, you are required to enter a Title and Text for your notification. Optionally, you can include an image, shown on the right side of the notification, or name your message.

Initial Config

Next, in the 'Target' section, choose the application created for your device. In the screenshot below, an Android app is being selected. Configure scheduling and optionally custom actions that are triggered on user interaction.

Target

Upon finalizing the configuration, click 'Review' at the bottom and 'Publish'. Depending on the scheduling, the notification will be sent to all devices on the targeted application.

If you want to test the notifications on a single device, choose 'Send test message' as seen in the first section of the 'Compose notification'. Here you can choose a device by its device token and execute a test message.

Custom Backend

By utilizing requests described below, you are able to send push notifications directly from your own backend.

iOS

There's again various ways to achieve a functioning backend which is not delved in too deeply.

As an example you can export your push certificate as an .pem file and use it in curl to successfully send a push notification.

curl --location --request POST 'https://api.push.apple.com/3/device/<device token provided by the Get device token flow function >' \
--header 'apns-topic: <bundle id>' \
--http2 \
--cert '<route to my .pem file>' \
--data-raw '  { "aps" : { "alert" : "Here's Johnny!" } }
'

Android

We don't go into too much detail about the backend setup but first you need to retrieve your Server key from Firebase. Naviagte to Project Overview > Settings > Cloud Messaging.

Server key

And when you have a registered device token and your server key you can post a message through Firebase which will land on your device. This would be done by your custom backend server, but a curl example would be:

curl --location --request POST 'https://fcm.googleapis.com/fcm/send' \
--header 'Content-Type: application/json' \
--header 'Authorization: key=<MyFirebaseServerKey>' \
--data-raw '{
    "to": "<Device Token user sent you from his app>",
    "notification": {
        "sound": "default",
        "body": "test message",
        "content_available": true,
        "title": "Hello from the backend"   
        },
    "data": {
        "sound": "default",
        "body": "test message",
        "content_available": true,
        "title": "Hi!!"
    }
}'

That's it – your app should now receive the push notification successfully!

Note: Android force quit

Using Android's 'Force quit' feature will cut off the connection between your app and Firebase, and lead to being unable to receive any notifications unless the application is re-launched again.


Was this article helpful?