| Table of Contents |
|---|
Introduction
| English |
|---|
| 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:
...
Read here for full details about PWA and its benefits: https://developers.google.com/web/updates/2015/12/getting-started-pwa
As a brand new feature of Joget DX, Joget apps support PWA features by default.
Installing an app
Joget allow allows users to easily install apps into mobile devices through compatible browsers.
...
| 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 userview menus support offline caching.
To configure them, you can directly edit menu configurations by directly editing the userview menu, or via the Builder Advanced Tools in the userview builder.
1. Select Advanced Tools in the userview builder.
2. Choose Edit the element userview menu you wish to configure PWA settings for. In this case, we are using the Manage My Vendor Details CRUD element and click on the edit button.
3. Select the "Performance & Offline" tab, and you can configure PWA offline settings here.
...
Edit PWA Offline Settings
| Name | DescriptionScreen ( Click to view ) | |
|---|---|---|
| Enable cache for offline support | This option allows users to cache for offline support for userview elements. | Scope: Available in all Userview Menu |
| Cache list actions (Non POST action) | This option allows users to cache datalist actions but it does not include any POST actions. Scope: Only available in Userview Menu that makes use of Datalist such as CRUD, List, Datalist Inbox Example of what will be cached: 1. New Button in CRUD Example of what will NOT be cached: 1. Delete Button in CRUD 2. JDBC Datalist Action in List / CRUD | |
| Cache all datalist links in first page | This option allows users to cache all links found on the first page of the datalist links in the first page so that users will still be able to view the datalist even though they are offlinewhen they are offline. (i.e. Hyperlink Datalist Action) Scope: Only available in Userview Menu that makes use of Datalist such as CRUD, List, Datalist Inbox Example of what will be cached: 1. Hyperlink Datalist Action in List / CRUD |
| Note | ||||
|---|---|---|---|---|
| ||||
If your runtime URL is http://localhost:8080/jw/web/userview/leaveApp/v/_/welcome, you can change "welcome" to "cacheUrls" in order to see the list of URLs that will be cached. |
Progressive Web App (PWA) Settings
Users can access this setting by going through the "Settings" tab in the userview builder.
1. Click on Settings.
2. Click on Theme and then click on Progressive Web app (PWA) Settings.
...
Progressive Web App (PWA) Settings
| Name | Description | Screen ( Click to view ) |
|---|---|---|
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 is relative to the Context Root. |
...
| borderColor | purple |
|---|---|
| borderWidth | 1 |
| titleBGColor | #ddccff |
| borderStyle | solid |
| title | Additional Information |
There are several plugins that complements PWA features:
...
| . |