Push Notifications with OneSignal

This guide covers how to set up and send push notifications tosc your app users. 
Requirements 
- A mobile phone (Android or iOS)📱
- OneSignal account (optional)
If sending to a published app:
- A Google account
- Apple Developer account with admin role​
In case your app is targeted to children and you want to publish to Google Play (Android), you won't be able to include notifications in it, as per Google Play policy. Read more in the Android publication guide.
🎨 Set up design file with Bravo Tags
Action: enable notifications (Bravo Tag)
The first step will be adding this action into your design a button or a page to explain to the app user about the push notifications with an action to enable Push notification alert. When triggered, this action will also register your device on OneSignal.
Tag: [action:enablenotifications]
If the action for enable notification is in a group, the tag will need to be added to ALL elements. See how it's set up on the sample app.
Bravo Sample: Push Notifications
Figma
Bravo Sample - Push notifications.xd.zip
145KB
Binary
Bravo Sample - Push Notifications.xd
👏 Notification in Bravo Vision (testing environment)
You can test the push notification on Bravo Vision before your app is published. Make sure you connect to updates on Bravo Vision as shown in the video below. You can do it by clicking on the top left question mark icon on Bravo Vision, and going to the third slide.
On your app project page, go to the Notifications tab and you can send a test notification directly via Bravo Vision.
For the notification action Go to page, you need to enter the URL of the page you want to be loaded when the notification is open. In order to get that URL, load the app in Bravo Vision, navigate to the page you want, long-press anywhere and click Copy Page URL (a share dialog will open so that you can send the URL using your preferred method).
You must have to have the app open in Bravo Vision to see the push notification in Bravo Vision.
The Enable Push notification trigger is required only once per app. If you are testing in with Bravo Vision and you have already enabled "automatic updates" in Bravo Vision, then you will not get the alert to allow notification in your app as it is already enabled.
Remember to first add the tag in your design + trigger the action in your mobile device to see the notification coming. If not you will get an alert in Bravo Studio with this error message: There are no users online to receive the notification.
📱 Notifications in published apps (live environment)
In this chapter, we'll describe how to set up push notifications for published apps. It will also work in a debug APK (Android) or TestFlight (iOS).
Getting the platform-specific assets
🤖 Android
Visit the Firebase Console and sign in with your Google account.
Click CREATE NEW PROJECT or select an existing one below.
Enter a project name and press CREATE PROJECT.
If you publish several apps with your Bravo account, you should create one Firebase project for each app. You can't reuse the tokens for more than one app.
Click the gear icon in the top left and select Project settings. Then, select the CLOUD MESSAGING tab. Copy the Server Key and Sender ID values and keep them in a safe place, as we'll need them later.
🍏 iOS
An iOS Push Certificate is required for notification delivery to all iOS apps.
Requirements
An iOS mobile app. (This is not for websites / web push)
A Paid Apple Developer Account with Admin Role.
Request a Certificate From a Certificate Authority
Open the Keychain Access app on your macOS system. It may be located in Applications > Utilities > 🔑 Keychain Access.
Select Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority...
Next, select the Save to disk option and enter your information in the required fields. This creates a certification request file that will be used later.
Get Apple Push Notification Service SSL
Push notifications require a specific certificate for each of the apps. To generate this certificate we will access the Apple Developer Portal and go to the Certificates section.
Inside the Certificates section, click the (+) sign to add a new certificate and scroll down.
Until you find the Apple Push Notification Service SSL (Sandbox & Production), double-check you select the Sandbox & Production one.
Click Next and on the next page select the App ID you want to configure the Push Notifications.
(the App ID WITHOUT the OneSignalNotificationServiceExtension).
Click Continue and now we will need to upload a Certificate Signing Request (same as we did for the Certificate). Now we have the file created we will upload it to the Apple Developer Portal so we can finish creating the Push Certificate.
Once we upload the file and click on Continue, we can download the Push certificate.
Check the File on your computer:
Now, Go to the Keychain Access apps to search for the Apple Push Certificate. Select Login and My certificates, and you should see a certificate called "Apple Push Services ...." (If it is not there try double-clicking in the downloaded file).
You can also search by "Apple Push..."
Export it and save it somewhere safe in your computer. Be sure you have the certificate selected and it's folded, click the right button and select "Export ..."
You will be asked to enter an optional password, add one if you want but be sure you remember it later. After entering the password, it asks your computer user password to finish the export.
Setting up the notifications feature
Once you have the files and tokens specified in the previous section, it's time to set up the notifications with OneSignal.
In order to unlock the most advanced notifications features OneSignal offers (such as scheduling and API access), you'll need to create a OneSignal account. However, this is optional - you can also use the default Bravo account for OneSignal. In this case, you don't need to create a OneSignal account. You won't be able to use the advanced features OneSignal provides, but you'll still be able to send notifications manually from the Bravo dashboard, and include some actions bound to the push notification (such as go to page, or open URL).
Using the Bravo OneSignal account
In case you want to use the default Bravo account for OneSignal, open Bravo and go to Settings → Notifications inside your project. There, activate the OneSignal toggle. Once you do that, select Bravo Account in the first step. In the following steps, you'll need to provide the assets for Android and iOS we got in the previous section.
Android: Firebase Sender Key and Server ID.
iOS: p12 certificate and password (in case you specified one when generating the certificate).
Once you provide all the assets, click "Save". Now, you'll be able to generate your app bundle.
In case you already have a published app bundle, and you change these settings, you'll need to generate a new bundle and publish an update to the stores.
 After you install it on your device (either downloading it from the app stores, or using debug APK or TestFlight), you can start sending notifications from the Bravo dashboard (Notifications section on the project dashboard).
​
Bravo allows setting four different notification actions. These will happen when the users click on the push notification you send.
Go to page: the user will navigate to the app screen URL specified in the text input field under the action selector. See here how to get the URL for an app screen.
Show alert: an alert message will be displayed once the user clicks on the push notification.
Open URL: an external URL will be opened in the mobile browser.
Refresh: the app screen will be refreshed. In case it's bound to API requests, these requests will be performed again, and the related data will be updated in the screen.
None: the push notification will still be clickable, but nothing will happen upon clicking.
Using your own OneSignal account
With your own OneSignal account, you'll be able to leverage all its features for push notifications in the apps, including scheduling, user segmentation, and API access.
Go to onesignal.com and create an account. Once you do that, add a new app and select the operating system your app will be published for (iOS, Android or both). You can only select one platform in this step, but in case your app is published on both iOS and Android, you'll be able to add another platform later.
After selecting a platform and clicking Next, you'll be asked for the platform-specific assets obtained in the previous chapter [LINK].
🤖 Android
Open the app you just created, and then go to Settings → Platforms and select GoogleAndroid. You can also access this dashboard in the process of creating a new app.
Here, you'll need to introduce the Server Key and Sender ID values you copied from Firebase. Then, click Save & Continue.
In the next step, select Native Android. Then, click Save & Continue.
Finally, you can leave the Install and Test section as it is, and click Done.
🍏 iOS
Open the app you created before, and then go to Settings → Platforms and select Apple iOS. You can also access this dashboard in the process of creating a new app. You'll be asked to upload your .p12 file, and to introduce its password in case you created one for it.
After uploading the .p12 file, click Save & Continue. In the next step, select Native iOS. Click Save & Continue again.
Finally, you can leave the Install and Test section as it is, and click Done.
Setting the OneSignal tokens in Bravo
Once you've configured your app in OneSignal (for iOS, Android or both), you need to connect your newly created OneSignal app with Bravo. In order to do that, in OneSignal, go to the Settings → Keys & IDs section inside the OneSignal app you just created. Copy the OneSignal App ID and Rest API Key values.
The OneSignal App ID cannot be changed once an app build is generated. If you change the App ID, you must request a new build. Otherwise, you may see "0" users registered in OneSignal. 
Then, go to Bravo and enter your project dashboard. Go to Settings → Notifications and activate the OneSignal toggle. Select My Account and paste the values copied in the previous step. Then, click Save.
Now, you'll be able to generate your app bundle. 
In case you already have a published app bundle, and you change these settings, you'll need to generate a new bundle and publish an update to the stores.
After you install it on your device (either downloading it from the app stores, or using debug APK or TestFlight), you can start sending notifications from the OneSignal dashboard (and also from the Bravo notifications section). Feel free to explore all the options OneSignal has to offer, so you are able to make the most of the tool.
The notifications dashboard in OneSignal
🧙🏽 Using the OneSignal API
In case you're looking for more flexibility and control, you can use the OneSignal API, creating a script or using another tool. This will allow you, for instance, to send targeted notifications (to one user o a group of users), send a notification when a specific event happens, or any other functionality you create with your own program or tool.
This is an advanced option that requires some technical knowledge and coding skills.
You can check out the OneSignal API documentation here. We encourage you to try out all the options yourself, to unlock all the power of the API.
Below, we describe how to get the URL for a specific app screen. This URL can then be used to send a notification that will open a specific screen in the app, when the user clicks on the push notification.
Creating a "Go to page" notification action via OneSignal API
First, we need to get the internal URL of the page we want to link, we can get the URL of that page manually using Bravo Vision (Long press once you're in that page and Select Copy Page URL), or you can generate Bravo Links if the process needs to be automated.
Generating Bravo internal URLs dinamically
A Bravo internal URL looks like this 
1
https://apps-service.bravostudio.app/devices/apps/{{app-id}}/node/{{node-id}}
Copied!
We will need the following information, app-id, node-id and some params if some elements in the page are bound to external data.
How to get app-id:
Open your app project in the Bravo dashboard, and copy the identifier in the URL between /apps/ and /screens
How to get node-id:
In your Bravo project screens, clicking on each page, the URL will look like this:
1
https://projects.bravostudio.app/apps/XXXXXXXXX/screens/XXXXX/bindings
Copied!
The node-id is the string between /screens/ and /bindings/.
Optional Query strings:
params: is a Base64 encode of a plain JSON containing the input parameters needed to fullfill the bound requests. Example {"input-name": <value>}
state: is a Base64 encode of a plain JSON containing the pagination state: { "limit": number, "start": number }
Below, we show code examples of how to generate the URL in case the target page has bound data. For instance, a detail page where the displayed data will depend on the associated ID.
Example with PHP (test the snippet https://3v4l.org/TQMHq#focus=7.3.28):
1
<?php
2
​
3
$appId = 'appID';
4
$nodeId = 'nodeID';
5
$recordId = 'recordID';
6
$params = base64_encode(json_encode([
7
	"Id" => $recordId,
8
]));
9
$url = "https://apps-service.bravostudio.app/devices/apps/$appId/node/$nodeId?params=$params";
10
echo $url;
Copied!
Example with Javascript:
1
appId = 'appID';
2
nodeId = 'nodeID';
3
recordId = 'recordID';
4
params = Buffer.from(JSON.stringify({
5
	Id: recordId,
6
})).toString('base64');
7
url = `https://apps-service.bravostudio.app/devices/apps/${appId}/node/${nodeId}?params=${params}`;
8
console.log(url);
Copied!
Where appId and nodeId are:
https://projects.bravostudio.app/apps/<appId>/screens/<nodeId>/bindings
and recordId is the ID of the data item associated to the detail page.
Generating the API request message
To create a push notification via OneSignal API, this is the endpoint that needs to be targeted (via POST):
1
https://onesignal.com/api/v1/notifications
Copied!
The JSON body you need to use in the request is the following:
1
{
2
  "app_id": "<app_id>",
3
  "include_player_ids": ["<player_id>"],
4
  "contents": {"en": "Text in English."},
5
  "data": {
6
    "action":"goto", 
7
    "params": 
8
      {"href": "node-id",
9
      "hrefRemote": "https://apps-service.bravostudio.app/devices/apps/{{app-id}}/node/{{node-id}}"
10
      }}
11
}
Copied!
app_id: The OneSignal application ID. It can be found on OneSignal, in the Keys & IDs section.
include_player_ids: This is used to send notifications only to specific devices or users. Read more in the OneSignal API reference.
contents: here, you need to specify the message of the push notification. In the example, the text is in English.
data: this JSON object contains the following objects inside it:
action: the action that the push notification will trigger when it's pressed. To create a go to page action, we need to set it to goto.
params: this object will contain another two objects:
href: here, we'll specify the node-id as defined here.
hrefRemote: this will be the Bravo internal URL specified here.
​
​
​