5.8.5 Configuring Progressive Web App Attributes

Use the Progressive Web App page to configure attributes for both new and existing Progressive Web App applications.

Tip:

Progressive Web App attributes only display if the Application Definition, Properties, Friendly URLs attribute is On.

• Accessing the Progressive Web App Page
  Access the Progressive Web App page from the Application home page.
• Progressive Web App Page
  The Progressive Web App page is divided into the following sections: General, Appearance, and Service Configuration.

See Also:

Creating a Progressive Web App (PWA)

5.8.5.1 Accessing the Progressive Web App Page

Access the Progressive Web App page from the Application home page.

To access the Progressive Web App page:

1. On the Workspace home page, click the App Builder icon.
2. Select an application.

   The Application home page appears.

3. From the Application home page, you can access the User Interface page in two ways:
   • Edit Application Definition button:

     1. Click Edit Application Definition to the right of the application name.

     2. Click the Progressive Web App tab.

   • From Shared Components:

     1. Click Shared Components.

     2. Under User Interface, click Progressive Web App.

   The User Interfaces page appears.

4. Edit the appropriate attributes.
5. Click Apply Changes to save your changes.

5.8.5.2 Progressive Web App Page

The Progressive Web App page is divided into the following sections: General, Appearance, and Service Configuration.

Tip:

To learn more about the attributes on this page, see field-level Help.

• General
  
• Appearance
  
• Service Worker Configuration
  

5.8.5.2.1 General

Tip:

Progressive Web App attributes only display if the Application Definition, Properties, Friendly URLs attribute is On. See Properties, Friendly URLs.

Use General attributes to enable and disable to configure Progressive Web App applications.

Table 5-20 Progressive Web App, General

Attribute	Description	To Learn More
General	Enable Progressive Web App functionality. Enabling this option: Serves static files more efficiently using advanced caching. Enables the display of declarative Progressive Web App settings.	See Creating a Progressive Web App (PWA)
Installable	Only displays if Enable Progressive Web App is On. A Progressive Web App can be installed on devices. Installing a Progressive Web App, adds an icon to the device home screen to feel like a native application. Enabling this option: Add a new navigation bar entry: Install App. Enables users to install the APEX app on devices.	See Creating a Progressive Web App (PWA)

5.8.5.2.2 Appearance

Tip:

Appearance attributes only display if the Progressive Web App, General attributes Enable Progressive Web App and Installable attribute are On.

Use Appearance attributes to configure attributes for display, screen orientation, theme color, background color, IOS status bar style, app description, and custom manifest.

Table 5-21 Progressive Web App, Appearance

Attribute	Description	To Learn More
Display	Select the preferred display mode for the application. This option controls how much of the browser UI the user sees. Options include: Fullscreen - Opens the PWA without any browser UI. This option takes the entirety of the screen or window. Standalone- Opens the PWA to look like a standalone application. The app runs in a distinct window, separate from the browser. Standard browser UI components like the URL bar and buttons are not visible. Minimal UI - Similar to standalone, except with browser controlling navigation buttons like back and refresh. Browser - Opens the PWA is a regular browser UI. Note: Some devices and browsers ignore this attribute. Oracle APEX is only relaying this information to the device which handles the Progressive Web App appropriately. For more information, see https://web.dev/add-manifest//	See Creating a Progressive Web App (PWA)
Screen Orientation	Select the preferred screen orientation when using this Progressive Web App. This option applies mostly for mobile devices. Note: Some devices and browsers ignore this attribute. APEX is only relaying this information to the device which handles the Progressive Web App appropriately.	See Creating a Progressive Web App (PWA)
Theme Color	Defines the default theme color for the application. This attribute affects how the operating system displays the application (for example, for an Android's task switcher, the theme color surrounds the application). Note: Some devices and browsers ignore this attribute. Oracle APEX is only relaying this information to the device which handles the Progressive Web App appropriately	See Creating a Progressive Web App (PWA)
Background Color	Select the background color. The background color defines a placeholder background color for the application to display before its stylesheet is loaded. Therefore, the background color should match the theme body background color for a smooth transition between launching the web application and loading the application content. This affects how the operating system displays the application (for example, for an Android's task switcher, the theme color surrounds the application). Note: Some devices and browsers ignore this attribute. Oracle APEX is only relaying this information to the device which handles the Progressive Web App appropriately	See Creating a Progressive Web App (PWA)
iOS Status Bar Style	Determines the style of the iOS status bar of your progressive web app. Apple offers three distinct choices: Black Text and White Background Black Text and Black Background - This option makes it appear completely black Translucent - This option has white text takes the same background color as the body of your web app. The text color will remain white even if you use a light background color. If using translucent, the page content is displayed on the entire screen.	See Creating a Progressive Web App (PWA)
App Description	Explains what the application does. Use this attribute to provide more information to users when they are prompted to install the application.	See Creating a Progressive Web App (PWA)
Custom Manifest	Used to store additional JSON properties for the Web App Manifest file. The properties found here will be used to extend the declarative options above, by overriding existing properties or appending new properties.	See Creating a Progressive Web App (PWA) For more information on building a Custom Manifest, you can read the Web App Manifest specifications: https://www.w3.org/TR/appmanifest/.

5.8.5.2.3 Service Worker Configuration

Use the Service Workers Configuration attributes to configure service workers. Service workers are JavaScript files that can execute code even when the app is not in use.

Service Workers can listen to events such as fetching resources or handling notifications. You can modify a service worker through hooks, or by replacing events completely.

Service Worker options include:

• Default - The APEX engine generates it with the following strategy:

  • Install and activate the service worker

  • Serve resources from cache if cache exists

  • Otherwise serve from network, then put resource in cache

  • Serve an offline page if network fails

• Configure Hooks - Fill in the placeholders in the service worker code to add your own. Hooks locations are provided by Oracle APEX. When using this option, you can choose to "Download Configuration" and use it as a File URL.

• File URL - Provide a URL reference to a file that contains the service worker hooks interface. This is useful for sharing service worker hooks across multiple applications. If using the file reference, make sure to follow the interface architecture appropriately or else the service worker will fail at runtime.

  To view the interface structure, see field-level Help for this attribute.