Edit

Build a portal as a progressive web app

  • Article
  • 2 minutes to read

Note

Prerequisites

Enable your portal as a progressive web app

Use Power Apps portals Studio to configure your progressive web app (PWA). You can enable or disable PWA capability, customize PWA settings, and prepare to create an app package to publish to respective device stores if you choose.

  1. Sign in to Power Apps.

  2. On the left pane, select Apps.

  3. From the list of apps, select your portal.

  4. Select Edit.

  5. In portals Studio, select Progressive web app.

    Progressive web app icon in portals Studio.

  6. Select Enable PWA.

    Enable PWA capability from portals Studio.

Brand your app

You can create your own branded PWA by using the customization options to change the app name, starting page, color, and more.

Note

On iOS devices, icons for the PWA will be shown as thumbnails and the customized splash screen won't be displayed.

  1. In portals Studio, select Progressive web app.

  2. Under Customization, select Customize PWA.

  3. Update the following PWA settings for your portal.

    Setting Description
    Title The name of the portal PWA that will appear on the mobile device and in the app store.
    Description The description of the portal PWA that will appear on the mobile device and in the app store.
    Starting page of the app The start page for the portal when it's opened through the PWA.
    Splash screen background The background color for the splash screen when the PWA is loaded.
    App icon The icon for the app that will appear on the mobile device and in the app store.
    Note: Supports .jpg, .jpeg, .png formats with a maximum upload size of 5 mb. Size of icon must be 512 × 512 pixels.

    Customizing PWA settings such as title, description, and color.

    Note

    After customizing the PWA, select Browse website to clear the cache. This will cause changes to be reflected instantly.

Manage offline behavior

PWA offers support for a smooth navigation experience when the device being used is offline or disconnected from the internet. You can choose the pages within your portal that will be available offline (read-only), and a message page for the rest of the portal capabilities that haven't been enabled for offline access.

Configure offline pages for the portal PWA

  1. In portals Studio, select Progressive web app.

  2. Select Customize PWA.

  3. Under Offline behavior, select Manage offline pages.

    Selecting pages for offline mode.

  4. Select the pages that you want to enable users to access when they use the PWA offline.

    Managing offline pages.

Note

When configuring offline access for PWA pages, be sure to consider the storage limitations for user devices. When the storage requirement for offline PWA access exceeds the available storage on the device, the entire portal will be unavailable for offline access. We recommend that you test the user experience of offline access and only cache the pages that will be most helpful and important to your users. Remember that offline pages can only show information; pages that contain forms to fill out or run queries won't work while offline.

Set up an offline message page

When a device is offline, the page you configure as the offline message page appears when users try to access pages that haven't been enabled for offline access.

  1. In portals Studio, select Progressive web app.

  2. Under Customization, select Offline message page.

    Configuring the offline message page.

  3. Customize the page as you would any other portals page.

  4. Change the page template to suit your business needs.

    Customizing the offline message page in portals Studio.

Note

You can't change the Title or Partial URL ("/default-offline-page") fields for the offline page. A default offline page will be shown to users if the offline page is missing.

Tip

After configuring the offline PWA experience, select Browse website to clear the cache. This will cause changes to be reflected instantly.

Test your portal in offline mode

After you've enabled offline pages, you can now use a mobile device in offline mode and browse through different pages that have been enabled for offline access.

  1. Browse to your portal by using a web browser on your mobile device in online mode.

  2. Select Add to Home screen or a similar option. For example, on an Android device, the option might be + Add to > App screen.

    Adding the PWA to the home page on a mobile device.

    Note

    This action downloads portal pages that have been enabled for offline browsing. This might take a while, depending on network bandwidth and the size of the pages that were selected for offline browsing.

  3. Enable offline mode in your mobile device.

  4. Open your portal from the home screen. You'll see a notification at the top reminding you that you're browsing in offline mode. If you select any pages that haven't been enabled for offline browsing, the offline message appears.

    Read-only page in offline mode for a PWA app. Not connected to the internet page in PWA app.

Distribute your app

Distribute your app by using a browser

After your portal is enabled as a PWA, your users can pin Power Apps portals as an app to the home screen on their device. This is supported on all platforms (Android, iOS, Chromebook, and Windows) in addition to all form factors (mobile, desktop, and tablet).

Distribute your app through an app store

You can create an app package for your portal PWA and publish the package to different app stores such as Microsoft Store and Google Play.

To create an app package, go to portals Studio. Under App package, select Create app package.

Opening PWA Builder to create an app package in portals Studio.

You'll be taken to the PWA Builder website where you can create an app package for various app stores. The package you create by using PWA Builder contains:

  • An app package for the PWA to be used in its respective app store.

  • A step-by-step document about publishing the app.

For more details, go to the PWA resource hub.

Additional considerations for Android

For the Android platform, you can also update the Android certificate with the Update android certificate option.

Menu item in portals Studio to update the Android certificate.

Update the title and the SHA-256 certificate fingerprint to update the digital asset links file (assetlinks.json) that proves ownership of your PWA.

Updating the Android certificate details.

Advanced configuration

The PWA capability for portals uses the following configurations that you can update by using the Portal Management app.

Note

We recommend that you use Power Apps portals Studio to work with PWA features instead of customizing them by using the Portal Management app.

Type Name Description Value
Site Setting PWAFeature Site setting to enable PWA for the portal { "status": "enable" }

{ "status": "disable" }
Web file PWAManifestjson.en-US.json The PWA manifest file is stored as this JSON web file. This web file contains all customization-related properties of the PWA (such as app name and splash screen color).
Site marker Default Offline Page This site marker defines which page to show when the user is offline. By default, it points to the default offline page. "Default Offline Page"

See also

Overview of portals as progressive web apps
Overview of Progressive Web Apps (PWAs)