Push notifications

Here we look into how to setup push notifications for your Composer app. Note that you need a custom backend for sending the 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.

This tutorial is a work in progress. If you find any steps that are not working for you, please ping us on the forums and we'll get to the bottom of things!

Android

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

Setting up Firebase

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

Firebase add Android app form

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

google-services.json

Composer app

On your Composer app, you need 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 (beta) , found in its current pre-release state by copypasting the share token xK87GpQfQY_7D3obIAeswQ into the marketplace search box.

The device token returned by the flow function can then be posted to your backend (probably along with some identifying user information to correctly target the notifications).

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.

Remember to save!

Backend

We don't go into too much detail about the backend setup but first you need to retrieve your Server key from Firebase.

Project Overview > Settings > Cloud Messaging

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": "BÄTÄNG"
},
"data": {
"sound": "default",
"body": "test message",
"content_available": true,
"title": "BÄTÄNG"
}
}'

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

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.

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.

Composer app

Same setup as in Android, see under Android topic to see how to configure.

Backend

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 app>' \
--header 'apns-topic: <bundle id>' \
--http2 \
--cert '<route to my .pem file>' \
--data-raw ' { "aps" : { "alert" : "Here's Johnny!" } }
'