Progressive Web Application

In layman's terms, Progressive Web Application (PWA) is a type of application software that is easily installable directly via the web browser, that offers a native-like app experience to end users regardless of device variants.

PWA promises many key capabilities as compared to regular web applications, such as:

Works in any network conditions, including offline
Responsive web design
Compatible with any device and screen dimension
Background Sync
Smooth app interactions
Native-like app UI/UX
Web push notifications
and so much more...

Read here for full details about PWA and its benefits: https://developers.google.com/web/updates/2015/12/getting-started-pwa.

Since Joget DX 7, Joget applications have supported PWA capabilities by default.

Installing an app

Joget allows users to easily install apps into mobile devices through compatible browsers.

Compatibility

Feature / Device	Chrome Browser on Android	Chrome Browser on iOS	Safari Browser on iOS	Joget Mobile App on Android	Joget Mobile App on iOS
PWA Offline Storage and Sync	Yes (15 May 2020, Android 9)	No (15 May 2020, iOS 13.1.2 iPhone X)	Yes (15 May 2020, iOS 13.1.2 iPhone X)	Yes	Not Supported
PWA Push Notification	Yes (15 May 2020, Android 9)	No (15 May 2020, iOS 13.1.2 iPhone X)	No (15 May 2020, iOS 13.1.2 iPhone X)	Not Applicable	Not Applicable
Native App Push Notification	Not Applicable	Not Applicable	Not Applicable	Yes	Yes

Send notifications

If you require sending notifications to Joget PWA users, you can use these plugins to do so:

Push Notification Tool Plugin as a Process Tool in the Joget Marketplace.
User Notification Audit Trail Plugin in Plugin Default Properties in app properties.
User Notification (Customizable) Audit Trail Plugin as Plugin Default Properties in the Joget Marketplace. (This plugin allows per-activity customization)

PWA properties

Most UI menus support offline caching.
To configure them, you can directly edit the UI menu, or via the Builder Advanced Tools in the UI builder.

Select Advanced Tools in the UI builder.
Edit the UI menu for which you wish to configure PWA settings.
Scroll down the Properties to select the Performance & Offline tab, and you can configure PWA offline settings here.

Edit PWA offline settings

Fields to configure:

Enable cache for offline support:
This option allows users to cache for offline support for UI elements.

Scope: Available in all UI Menu
Cache list actions (Non POST action):
This option allows users to cache list actions, but it does not include any POST actions.

Scope: Only available in UI Menu that makes use of List such as CRUD, List, List Inbox

Example of what will be cached:
- New Button in CRUD

Example of what will NOT be cached:

- Delete Button in CRUD
- JDBC List Action in List / CRUD
Cache all list links in first page:
This option allows users to cache all links found on the first page of the List links when they are offline. (i.e. Hyperlink List Action)

Scope: Only available in UI Menu that makes use of List such as CRUD, List, List Inbox

Example of what will be cached:
- Hyperlink List Action in List / CRUD

How to Check What is Being Cached?
If your runtime URL is http://localhost:8080/jw/web/UI/leaveApp/v/_/welcome, you can change the welcome to cacheUrls to see the list of URLs that will be cached.

Progressive web app (PWA) settings

Users can access this setting through the Properties tab in the UI builder.

Click Properties and then click Theme.
Click Progressive Web Application (PWA) Settings.

Fields to configure:
- Disable Progressive Web App (PWA) Support: If checked, this will disable PWA support for the current app.
- Disable Web Push Notifications: If checked, this will disable Web Push Notifications.
- Additional URLs to Cache: This option allows users to cache additional URL(s) that are relative to the Context Root.