Skip to main content
Feedback

Progressive Web Application players

warning

The content on this page is outdated and will not receive updates. For the most up-to-date feature, refer to Setting up and managing flows.

Players can be configured to deliver a Flow as a progressive web application (PWA).

About this tutorial

In this tutorial, we are going to learn how to configure a player to deliver a Flow as a PWA.

What you will learn

This tutorial is designed for intermediate users, and aims to introduce the basic concepts involved in delivering a Flow PWA, such as customizing players and using manifest files.

|Duration 30 minsDuration: 30 mins | Skill level: Intermediate Skill level Intermediate|

Before you begin

A Flow can be configured to work as a PWA by linking to a manifest JSON file from a custom player, allowing browsers (such as Google Chrome on Android) to deliver a PWA experience to your Flow users. For example, a visitor sign-in Flow PWA could be configured on a tablet to be used by visitors to your office location(s).

For more information on manifest files and properties, refer to the Google Developer guide to web app manifest files.

  • A manifest JSON file is required for this feature. This can be hosted in your asset library. Refer to Assets.

  • A custom player is required to deliver the Flow and link to the manifest file. Refer to Creating a custom player.

  • Service Workers are not currently supported for use with flows as PWA.

  • Ensure that your custom player is optimized for use on the target device that you wish to install your Flow PWA on. For example, fonts, button sizes and styles should be designed for use with a mobile/tablet touch interface.

Step 1 - Create and upload a manifest file

  1. Create a JSON manifest file.

  2. Edit the file to configure the PWA as required. An example JSON file is shown below:

    short_name: Enter a name for the pwa that will be used on the device home screen.

    name: Enter a name for the pwa that will be used for the app install prompt.

    icons: Define the icons that will be used on the device home screen.

    start_url: Enter the published Flow url for the Flow that you wish to deliver as a PWA. Do not use the 'join_url' Flow url as the PWA should start a new state for the Flow each time. For example, a valid url would be: 'https://flow.boomi.com/945f56a3-9a65-447e-b3ed-acaf1ac21005/play/pwaplayer?flow-id=7ac90e7b-ce95-49e3-82d5-821c466ed20x'.

    display: Set to 'standalone' to open your Flow web app as if it were a standalone native app; i.e. it will open in its own window and hide browser UI such as the address bar.

    {
        "short_name": "Boomi Flow PWA",
        "name": "Boomi Flow PWA",
        "icons": [
          {
            "src": "https://yoururl.com/assets/masthead/images/favicon.png",
            "type": "image/png",
            "sizes": "96x96"
          },
          {
            "src": "https://yoururl.com/assets/masthead/images/favicon.png",
            "type": "image/png",
            "sizes": "48x48"
          },
          {
            "src": "https://yoururl.com/assets/masthead/images/favicon.png",
            "type": "image/png",
            "sizes": "72x72"
          },
          {
            "src": "https://yoururl.com/assets/masthead/images/favicon.png",
            "type": "image/png",
            "sizes": "36x36"
          }
        ],
        "start_url": "https://flow.boomi.com/945f56a3-9a65-447e-b3ed-acaf1ac21005/play/pwaplayer?flow-id=7ac90e7b-ce95-49e3-82d5-821c466ed20x",
        "display": "standalone"
      }

  3. Save the file and upload it to your asset library. Refer to Uploading a new asset.

  4. Right-click on the file on the Assets page and copy the link. You will need this for the custom player.

  1. Create a custom player that you will use to deliver the PWA Flow. Refer to Creating a custom player.

  2. Edit the player and insert a link to the manifest file with the rel property set to 'manifest'. Refer to Adding CSS and Javascript to custom players.

    <link rel="manifest" href="{yoururl}/manifest.json">

    PWA player link

  3. Save the player and ensure that you publish the Flow using this player when generating your Flow url.

Step 3 - Configuring the PWA on a device

The Flow can now be set to display as a PWA on devices; as it will not be downloaded from an app store like a native mobile application, you may need to configure it to display as a PWA on your device.

For example, on an IOS device:

  1. Open the Flow url in the device Safari browser.
  2. Select Options | Add to Home Screen. An icon will be added to the device home screen.
  3. Tap this icon to launch the Flow as a PWA.
On this Page