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 Worker Configuration.
See Also:
Creating a Progressive Web App (PWA)Parent topic: Managing Application Attributes
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:
Parent topic: Configuring Progressive Web App Attributes
5.8.5.2 Progressive Web App Page
The Progressive Web App page is divided into the following sections: General, Appearance, and Service Worker Configuration.
Tip:
To learn more about the attributes on this page, see field-level Help.
Parent topic: Configuring Progressive Web App Attributes
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:
|
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:
|
See Creating a Progressive Web App (PWA) |
Parent topic: Progressive Web App Page
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 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.
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:
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:
|
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. |
|
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. |
Parent topic: Progressive Web App Page
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.
-
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.
Parent topic: Progressive Web App Page