Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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:

  1. Works in any network conditions, including offline
  2. Responsive web design
  3. Compatible with any device and screen dimension
  4. Background Sync
  5. Smooth app interactions
  6. Native-like app UI/UX
  7. Web push notifications
  8. 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

As a brand new feature of Joget DX, Joget apps support PWA features by default, built by using common web technologies that include HTML, CSS, and JavaScript. The whole intention of this is to make sure that the application can work on any platform that uses a standards-compliant browser.Here in Joget, the platform also supports this PWA feature by allowing end-users to install app created using Joget and the app that is installed will have many captivating features for the users.

Installing an app

Image Modified

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

Compatibility

Feature / DeviceChrome Browser on Android Chrome Browser on IOSiOSSafari Browser on IOSiOSJoget Mobile App on AndroidJoget Mobile App on IOSiOS
PWA Offline Storage and SyncYes (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)YesNot Supported
PWA Push NotificationYes (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 ApplicableNot Applicable
Native App Push NotificationNot ApplicableNot ApplicableNot ApplicableYesYes


Send Notifications

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

...

PWA Properties

Most userview menus support offline caching.
To configure them, you can directly edit the userview menu, or via the Builder Advanced Tools There are multiple ways to configure the PWA properties of the application. One of them is to configure it through the advanced tools in the userview builder.

Image Modified

1. Select Advanced Tools in the userview builder.


Image Modified

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.


Image Modified

3. Select the "Performance & Offline settings " tab, and you will be able to see the can configure PWA offline settings here.


Edit PWA Offline Settings

Image Added

Image Removed
NameDescriptionScreen ( 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 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 offline

when 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
iconfalse
titleHow to Check What is Being Cached?

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 "Settings" tab in the userview builder.

Image Modified

1. Click on settings Settings.


Image Modified

2. Click on Theme and then click on Progressive Web app (PWA) Settings.


Progressive Web App (PWA) Settings

Image Added

...

NameDescription
Screen ( Click to view )

Disable Progressive Web App (PWA) Support

This option allows users to disable PWA Support.Image Removed
If checked, this will disable PWA support for the current app.
Disable Web Push Notifications
This option allows users to
If checked, this will disable Web Push Notifications.
Additional URLs to CacheThis option allows users to cache additional
URLs that are
URL(s) that is relative to the Context Root
.

...

borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleAdditional Information
.