5.10.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, Installability, Push Notifications, and Service Worker Configuration.

See Also:

Creating a Progressive Web App (PWA)

5.10.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 Progressive Web App page appears.

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

5.10.5.2 Progressive Web App Page

The Progressive Web App page is divided into the following sections: General, Installability, Push Notifications, and Service Worker Configuration.

Tip:

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

• General
  
• Installability
  
• Push Notifications
  
• Service Worker Configuration
  

5.10.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.

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.10.5.2.2 Installability

Tip:

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

Use Installability attributes to configure Progressive Web App (PWA) attributes for display, screen orientation, theme color, background color, IOS status bar style, app description, and custom manifest as well as upload screenshots and shortcuts.

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	The iOS Status Bar Style attribute is rendered as a meta tag on the page to control the appearance of the status bar in a web application when it is added to the home screen on an iOS device. Options include: Default - This is the default value and it displays the status bar in the usual way. Black - This value makes the status bar black. Translucent - This value makes the status bar translucent, enabling the content to be displayed behind it. Note: Only iOS devices use 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)
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/.
Screenshots	Include screenshots for promotional purposes when users are prompted to install the Progressive Web App. Click Add Screenshot to upload a promotional screenshot. For best results, Oracle recommends all screenshots have the same aspect ratio.	See Creating a Progressive Web App (PWA)
Shortcuts	Note: An APEX application can only use PWA Shortcuts if Rejoin Sessions is enabled. Before configuring shortcuts, click either Enable for Public Sessions or Enable for All Sessions. To learn more, see Session Management. Use shortcuts enable users of installed PWAs to quickly access a specific page. For touch-enabled devices, shortcuts are accessible when doing a long-press on the application icon on the home screen. For other devices, shortcuts are accessible when doing a right click on the application icon on the task bar. Click Add Shortcut to provide users with a shortcut to quickly access a specific page.	See Creating a Progressive Web App (PWA)

5.10.5.2.3 Push Notifications

Web push notifications enable web apps to send notifications to a user's device even when the user is not currently on the website. Notifications can be sent to a user's desktop or mobile device and can be used to alert the user to new content or events on the website, or to re-engage the user with the website.

Enabling this option:

• Adds a new navigation bar entry: User Settings
• Enables users to subscribe and unsubscribe to push notifications.
• When subscribed, users can receive push notifications from the APEX app.

If Enable Push Notifications is enabled, the following attributes appear:

• Credentials - Select the credential to authenticate against. To edit the credential, navigate to Shared Components, Credentials.

  Credentials are required to setup push notification securely. A public and private key pair are used respectively to allow users to subscribe to push notifications on the client side, and for the server to send the notifications to the subscribers.

• Settings Page - If this application already has the push notification feature page, the page number displays here. If the application does not have the push notification feature page, it will show that the feature page is available to add.
• Contact Email - Enter the email address to contact in case the push notification service provider (Google, Mozilla, Apple, etc.) wants to contact the owner of the application. We recommend using a group email so it's not dependent on a single individual.

5.10.5.2.4 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.

  To learn more, see field-level Help.

• 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.

  Use File Reference URL to 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.