Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Running Oracle JET as Progressive Web App

DZone 's Guide to

Running Oracle JET as Progressive Web App

A dev walks us through how to was able to get Oracle JET to run on his Android device as a PWA.

· Web Dev Zone ·
Free Resource

Progressive Web Apps (PWAs) is a hot topic in web development these days. The beauty and power behind PWAs is that the user can install a web app to their mobile device without going through the app store. This simplifies the update process too, when a new version of the app is available, the user will get it straight away, because it is essentially a web page, wrapped to look like an installed app.

Inspired by this post, A Simple Progressive Web App Tutorial, I decided to add a PWA config into an Oracle JET app and test how it works (on Android, didn't test this on iOS, but there is nothing JET specific; if PWAs are supported on iOS, it should work).

The Oracle JET PWA sample app is deployed on Heroku (PWAs will work only if the app is coming through HTTPS) and available under this URL. The sample app is available on my GitHub repo. A Node.js wrapper for this sample is available in another GitHub repo and you can use it to deploy on Heroku or another service.

Access the JET app URL and the app will be loaded and you should see an Android notification at the bottom. The Google Chrome mobile browser is automatically recognizing the PWA app via its manifest and offers to "install" it by adding it to the home screen:


Select the notification and you will get a confirmation message:

Select "Add" and the web app will be added to the home screen. It will look like a real mobile app for the user. For example, the user could get runtime stats for the app and check storage and data usage metrics:

The app is added to the home screen (look for Oracle JET icon):

Select the app icon and the app will be opened. There is no URL address bar in the header and indeed it looks like a mobile app, not a web page:

The app will be recognized as a PWA, if certain config steps were implemented. For one of them, you need to add a manifest file (add it to Oracle JET in the same folder as the index.html file) and provide app icons, name, etc.:

The manifest file must be included through a reference in the app entry point, i.e. the index page (Oracle JET index.html page, for example):

In addition to the manifest, the app must define a service worker (just like with the manifest file, you can create this file in the same directory as the Oracle JET index.html file). PWAs don't only bring the visual experience of the real app to the web application. You can also define a cache store for the app files, this means next time you go offline the app files will load from local cache storage, meaning there will be no need to download them from the internet:

Service workers can be registered from the main.js file where Oracle JET context is initialized on the application initial load. Add a service worker registration at the bottom of main.js:

The idea of this post was to share a simple example of a PWA for Oracle JET. This should help you to get started quickly with PWA support config for an Oracle JET app.

Topics:
web dev ,progressive web app ,pwa ,oracle jet

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}