Introduction to PWA (Progressive Web Apps) Development with Oracle Visual Builder

Progressive Web Apps (or PWA for short) combine the advantages of on-device mobile app experience with the distribution simplicity offered by regular web applications. The latest version of Oracle Visual Builder offers a very easy way to create and distribute your PWAs in a visual cloud development environment.

PWA apps can work offline, leverage device features such as access to the camera, photo gallery, and location information. The app is downloaded to the device, represented as an icon on the device list of apps, and when it is invoked you don't see a browser wrapper (no address bar and browser navigation buttons). As such the user experience of working with such application is very close to applications that you get from the app store.

A key difference between PWA and on-device mobile apps is the distribution mechanism. To first "install" the application the user will navigate to a URL using their browser, this will pop-up an option for them to "add the application to home screen". Once they do this the app is now part of their "apps list" on the device. When a new version of the app is published, the end user doesn't need to go to the app store to download it. The application will automatically update on the device the next time you'll open it. Pulling the new UI from the server and caching it for future use.

One more point to mention is that PWA can also install on your laptop, for example as a chrome app. This means that unlike the on-device mobile apps in VB that are limited to just iOS or Android devices, PWA apps are able to also run on windows, macs and other OSs.

As you'll see in the demo video below, developing a PWA app is no different then developing regular mobile apps in Visual Builder, there is a configuration tab that allows you to turn on the PWA packaging for any mobile app. Once you do this, when you stage the app, you'll get a URL (and a QR code) that customers can access to invoke/install the app.

Check out this demo

A couple of notes about the app in the demo

• While we enabled unauthenticated access to the app, you can of course limit application access to specific users
• The data caching shown in the demo is the result of the REST service specifying a caching mechanism in the header. For more complete caching control and capabilities VB PWA apps can leverage the Oracle JET offline toolkit.
• The take a picture action also works when running on your laptop, it will open the local file selection dialog.