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

Step 1 – Configure the portal app

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 – Make note of your app ID

Click on the portal component to open the settings
Scroll down in the settings to where you can see your available apps
Make a note of the app ID for your sub app, as you’ll need it for the next step

Step 3 – Add the JavaScript

Inside Fliplet Studio, open your sub app and then open the developer options by choosing the “</>” icon on the right hand side toolbar
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
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.

const
 portalApp = 1234; // change value 1234 to the ID of your portal app
const subApp = 1234; // change value 1234 to the ID of your sub app
(async function() {
  try {
    const portalResponse = await Fliplet.API.request({
      url: `v1/widget-instances/com.fliplet.push-notifications?appId=${portalApp}&includeSensitiveData=true`
    });
    const pushNotificationSettings = portalResponse.widgetInstance.settings || {};
    const pushNotificationKeys = [
      'apn', 'apnKeyId', 'apnTopic', 'apnTeamId', 'apnAuthKey',
      'gcm', 'gcmSenderId', 'gcmProjectId', 'gcmServerKey',
      'gcmPackageName', 'project_id', 'client_email', 'private_key'
    ];
    const portalSettings = pushNotificationKeys.reduce((settings, key) => {
      if (Object.prototype.hasOwnProperty.call(pushNotificationSettings, key)) {
        settings[key] = pushNotificationSettings[key];
      }
      return settings;
    }, {});
    const subAppResponse = await Fliplet.API.request({
      url: `v1/widget-instances/com.fliplet.push-notifications?appId=${subApp}&includeSensitiveData=true`
    });
    const subAppSettings = subAppResponse.widgetInstance.settings || {};
    Object.assign(subAppSettings, portalSettings);
    await Fliplet.API.request({
      url: `v1/widget-instances/${subAppResponse.widgetInstance.id}`,
      method: 'PUT',
      data: subAppSettings
    });
    Fliplet.Modal.alert({ message: 'Push notification settings updated successfully. You can remove the code.' });
  } catch (error) {
    Fliplet.Modal.alert({ message: 'Failed to update push notification settings. Please try again.' });
    console.error(error);
  }
})()

Step 4- Publish and test

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

Related Articles

Was this article helpful?

YesNo