Configure Progressive Web App Support

You can enable and configure Progressive Web App (PWA) support for both web and mobile applications from your app's Settings page.

Note:

Mobile apps have been deprecated starting with version 23.10. You can no longer create a mobile app, but you can import an existing mobile app and deploy it as a PWA to be able to use it. You can use your PWA-enabled mobile apps until July 2024 when mobile apps reach End of Life (EOL). To use your mobile-enabled PWAs beyond July 2024, we strongly urge you to transition your mobile app as a web app and deploy it as a PWA.

When you enable an application for PWA, Visual Builder adds the necessary files to your project such as a web manifest file (a JSON configuration file) as well as required icons and splash screens. The web manifest stores configuration settings required by the PWA. You can modify these settings from the Manifest Settings section of the PWA page. For more information on this file, see this page.

Oracle provides Redwood-themed icons and splash screens for your app. You can replace these images with your own branded versions if desired. For PWAs that run on Android 8.0 and higher devices, you can also use adaptive icons that display as a variety of shapes on different device models.

You can also add an offline fallback page to your PWA and customize it to suit your needs. This offline fallback page is displayed when the user performs an action that requires a connection but the device is offline.

1. Click Web Apps (or Mobile Apps) tab to navigate to the app that you want to configure as a PWA.

   Note:

   Responsive web app templates (starting with version 22.04) are designed to be visual appealing and can adjust to the size of the user's screen, ranging from small phones to wide-screen desktops. Here's how a web-enabled PWA that uses the Bottom Tabs navigation template renders in portrait and landscape modes; notice how the header items adapt based on device orientation:
   

   
   Description of the illustration responsive-web-app-tabbar.png

   
   
2. Click your app's <app name> node, then click Settings.
   The General tab is displayed.
3. Select the PWA tab.
4. Click Enable Progressive Web App (PWA).

   The Manifest Settings and Resources sections are displayed. Visual Builder also adds the necessary PWA resources to your app's folder tree.

   
   Description of the illustration mob_pwa_tab-png.png

   If you're working with a mobile app, you might see settings for advanced file caching. Advanced file caching is not supported for web apps.

5. Review and edit, if needed, the information in the Manifest Settings section.
   1. Specify the Application Name.
      The application name appears on the dialog that displays to prompt 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. (Optional) Customize the splash screen and icons to use with your app.
   1. From the Resources section, click Sample to download the pwabranding_redwood.zip archive file.

      
      
      Description of the illustration mob_pwa_branding-png.png
      

   2. Modify the icons and splash screens as needed.
      When you design adaptive icons, ensure that important information is within a "safe zone" circle, with a radius equal to 40 percent of the image size. By default, Redwood theme icons generated for PWAs in Visual Builder follow this guideline, as do the icons included in the sample archive. It is recommended that you download the sample from the Resources section and use the images within as a guideline to create your adaptive icons.
   3. Upload your modified application image archive either by dragging it to the drag-and-drop area or by clicking the link to launch the Open dialog box.
7. If you are using adaptive icons, modify the web manifest file to include the "purpose": "any maskable" setting as follows:

   {
    "sizes": "512x512",
    "src": "resources/icons/icon-512x512.png",
    "type": "image/png",
    "purpose": "any maskable"
   }

8. To include an offline fallback page for your application, click Create next to Offline Fallback Page.
   Visual Builder adds a Redwood-themed offline page (offlinePage.html) to your project and provides a link under Offline Fallback Page. If you want to customize the offline fallback page, click the link to open it in the Designer and modify it as required.
9. For mobile applications, specify the files to cache on the user’s device in the Advanced File Caching section.
   By default, when launched for the first time, the PWA caches all flows and pages on the user’s device. Use this section to narrow down the required resources to be stored in the browser cache.

After you enable PWA support, you can stage and publish a web app to distribute it as you would any web app. See Stage and Publish Visual Applications. To stage and publish a PWA-enabled mobile app, you must first build the app to generate a QR code. See Build a Mobile Application as a PWA.

When you open the link for a PWA in your browser, you can use the options in the address bar to install your app as follows:

• Click the address bar and use the QR Code icon to display the app's QR code which you can then scan to install the app:
  
  
  
  
• Or use the install icon in the address bar to install the app: