How to set up push notifications for an app published through a portal

This article will detail the steps required to set up push notifications for a sub-app within a portal

The portal app is the app launched via the app stores or MDM (mobile device manager)

The sub-app is any app that is published through the portal app

Get started

1. Configure the portal app
2. Configure the sub app
3. Make note of your app ID
4. Add the JavaScript
5. Publish and test

Step 1 – Configure the portal app

1. Ensure your portal app is set up to send push notifications 
   1. To do this for Apple click here
   2. To do this for Google click here

Step 2 – Configure the sub app

1. In Fliplet Studio, open the sub app that you want to enable push notifications for
2. Select “Publish” in the top right corner
3. Copy over any push certificate information from the portal app and for both iOS.
4. You can find these in the “Publish” section if you go to Apple/Android, and then select the “Push Notifications” tab

Step 3 – Make note of your app ID

1. Click on the portal component to open the settings

2. Scroll down in the settings to where you can see your available apps

3. Make a note of the app ID for your sub app, as you’ll need it for the next step

Step 4 – Add the JavaScript

1. Inside Fliplet Studio, open your sub app and then open the developer options by choosing the “</>” icon on the right hand side toolbar
2. In the Javascript section, paste the following snippet of code, making sure to replace “1234” on lines 1 and 2 with the relevant app ID and save
3. Once saved you will see a message to say it was successful, you can then delete the code snippet and save the developer options again. 
   

   let portalApp = 1234; // change value 1234 to the ID of your portal app
   let subApp = 1234; // change value 1234 to the ID of your sub app
   
   Fliplet.API.request({
     url: 'v1/widget-instances/com.fliplet.push-notifications/?appId=' + portalApp
   }).then(function(response) {
     let portalSettings = _.pick(response.widgetInstance.settings, [
       'apn', 'apnKeyId', 'apnTopic', 'apnTeamId', 'apnAuthKey',
       'gcm', 'gcmSenderId', 'gcmProjectId', 'gcmServerKey',
       'gcmPackageName', 'project_id', 'client_email', 'private_key'
     ]);
   
     return Fliplet.API.request({
       url: 'v1/widget-instances/com.fliplet.push-notifications/?appId=' + subApp
     }).then(function(res) {
       let subAppSettings = _.get(response.widgetInstance, 'settings') || {};
   
       _.extend(subAppSettings, portalSettings);
   
       return Fliplet.API.request({
         url: 'v1/widget-instances/' + res.widgetInstance.id,
         method: 'PUT',
         data: subAppSettings
       });
     });
   }).then(function() {
     Fliplet.Modal.alert({ message: 'App push ID updated successfully. You can remove the code.' });
   });

Step – 5 Publish and test

1. In both the sub app and the portal app, open the notifications settings
2. To do this, choose “Publish” in the top right corner of studio
3. Select “More publishing options”
4. Select, “Notifications” at the top of the page followed by “Push notifications settings”
5. Ensure the “Apps inside a portal shouldn’t request users to subscribe to push notifications” setting is selected
   
6. Save the settings
7. Publish an in-app update
8. Test the app notifications as per the instructions here