Introduction

Creating a seamless and engaging user experience has become a cornerstone of modern web development, and Progressive Web Applications (PWAs) are at the forefront of this transformation. PWAs offer the reliability, speed, and user engagement of native apps while being accessible through a web browser. Join me as we delve into the practical steps and best practices for creating PWAs with Oracle APEX, ensuring your web applications are not only functional but also future-proof.

Install Progressive Web App

Progressive Web Apps are web applications designed to be capable, reliable, and installable. A Progressive Web App feels like a platform-specific application.

Enabling this option will:

Add a new navigation bar entry: Install App
Allow users to install this APEX app on devices

If Persistent Authentication is enabled for this instance, the Login Page will display a "Remember me" checkbox, which when selected, allows end users to stay signed in to their Progressive Web App.

New application

Configuring a Progressive Web Application (PWA) for your new Oracle APEX application is a straightforward process that can significantly enhance the user experience. To begin, navigate to your Oracle APEX App Builder and create a new application. Under the Features section, select Install Progressive Web App checkbox from the list. Here, you can enable the PWA features by toggling the appropriate options.

Existing application

Enabling PWA for an existing Oracle APEX application that wasn't initially configured as a PWA is a simple process. Begin by opening your existing Oracle APEX application and navigate to the Shared Components section and select Progressive Web App tab. Here, activate the Enable Progressive Web Application and the Installable switches to add a service worker and a default web app manifest to your application respectively. Fill in any other details such as the App Description, that will be displayed to users when they install your PWA.

Installation

An exceptional benefit is found in the effortless installation process of PWAs on various devices. Users can effortlessly add the web application to their home screens, replicating the native app experience without requiring laborious downloads from app stores. This not only enhances accessibility but also guarantees consistent performance across all devices.

Desktop

To install an Oracle APEX PWA application on your desktop, start by opening the application in your web browser. Look for the install prompt, typically represented by a "+" icon or an "Install" button in the browser's address bar. Clicking this prompt will initiate the installation process, creating a shortcut on your desktop and enabling offline capabilities and faster loading times. This seamless installation turns your web application into a native-like experience, allowing you to access it directly from your desktop, just like any traditional desktop application.

iOS

To transform your Oracle APEX application into a Progressive Web Application (PWA) for iOS devices, follow these simple steps. Begin by opening your desired Oracle APEX application in Safari on your iOS device. Once the application is loaded, tap the Share button located at the bottom of the screen, resembling a square with an arrow pointing upwards. From the options presented, select Add to Home Screen. Customise the app name if desired and then tap Add in the upper right corner. Your PWA is now accessible from your home screen of your iOS device.

Screenshots

Incorporating screenshots into your Oracle APEX Progressive Web Application not only enhances its visual appeal but also offers invaluable benefits to users and developers alike. By strategically embedding screenshots of key features and functionalities within your PWA, you provide users with a clear and intuitive preview of what to expect, thereby boosting user engagement and retention. Moreover, these screenshots serve as effective documentation for developers, facilitating seamless collaboration and troubleshooting.

Start by accessing your current Oracle APEX application. Navigate to the Shared Components area, then select the Progressive Web App tab. From there, proceed to the Screenshots section and attach some screenshots for your application.