Enable Progressive Web App Support from Mobile Applications

Mobile applications that you develop in Oracle Visual Builder can be distributed as Progressive Web Apps (PWA) if you enable PWA support for the application.

When a mobile app with PWA support enabled is deployed using Oracle Visual Builder, the application runs as a web app and not as a native mobile app. A PWA app created in Visual Builder:
  • Allows you to install the application from the browser window and add the application to the Home screen

    As a developer, you don’t need to publish the app to an app store. Instead, you can distribute a URL which prompts the user with the Add <PWAappName> to Home screen message (in Chrome on Android).

  • Runs on your device like a native app

    Similar to a native app, no address bar is displayed when a PWA app runs.

  • Offers the user experience of a native app

    PWA apps deliver user experiences through progressive enhancement. This refers to the ability to gradually add more features to a PWA app to make it closer to a native app (as browser support becomes available). For more information on PWAs, see the documentation.

  • Works offline similar to a native app

    If you implement data caching using the offline toolkit, PWA apps work offline similar to native apps.

Here is what a PWA app looks like when running in the browser.

Description of mob_pwa_run_browser-png.png follows
Description of the illustration mob_pwa_run_browser-png.png

Here is what the same PWA app looks like when running on a device.

Description of mob_pwa_run_app-png.png follows
Description of the illustration mob_pwa_run_app-png.png

When developing PWA apps, select the Oracle Cloud option in the Authentication Mechanism list in the Security tab for the mobile application.
  1. Click the Mobile Applications tab.
  2. Click the <app name> node and click the Settings icon (Settings icon).
    The General Settings tab is displayed.
  3. Select the PWA tab.
  4. Click Enable Progressive Web App (PWA).
    The Manifest Settings, Resources, and Advanced File Caching panes are displayed.
  5. Review and edit, if needed, the information displayed in the Manifest Settings pane.
    These settings are included in the web manifest file (a JSON configuration file) that contains information about your application. When an application is configured as PWA, a Web Manifest is added to the application with content required by PWA. For more information on this file, review this page.
    1. Specify the Application Name.
      The specified name appears on the dialog that displays prompts you to install the application.
    2. Review the short name of the application.
      If both application name and short name are specified, the short name is used on the Home screen (below the app icon), launcher, and other places where space is limited.
    3. Change the background color and theme color, if needed, by clicking the currently selected color and choosing a new color in the color picker or by entering a RGB value in the text field.
  6. Customize the splash screen and icons to use for your app in the Resources pane.
    By default, Oracle-provided images are used for your app. Replace these with images to use splash screen and icons that conform to your brand. Upload an application image archive either by dragging it or by using the Open dialog box.
  7. Specify the files to cache on the user’s device in the Advanced File Caching pane.
    By default, when launched for the first time, the PWA app caches all flows and pages on the user’s device. Use this pane to narrow down the required resources to be stored in the browser cache.
After you successfully build your PWA enabled mobile app, scan the generated QR Code for the PWA app from a QR Code scanner or camera app installed on your Android device.
Click the Launch in Browser link to open the PWA in the browser. After you launch the PWA application in a browser on a mobile device, you can add it to the Home screen.
  • On the iOS platform, select the Add to Home Screen option.

    Description of mob_pwa_add_to_home-png.png follows
    Description of the illustration mob_pwa_add_to_home-png.png

  • On the Android platform, when PWA applications are deployed on Android, a new install application dialog is displayed to allow users to install the application on the Home screen. The dialog displays when the application receives the new vbBeforeAppInstallPrompt lifecycle event.

    When you enable PWA for an application, a sample implementation is added to the application start page for the UI and event handling. We recommend that you customize the UI and handling of the vbBeforeAppInstallPrompt event to meet your needs.