Install the App?
Progressive Web App (PWA)
Turn your ZnetDK 4 Mobile application into Progressive Web App
The ZnetDK for Mobile applications are natively designed to be Progressive Web Apps.
Let's review the features of a ZnetDK 4 Mobile Web Application that make it a Progressive App.
SUMMARY
Main PWA requirements
To be PWA compliant, a web application must mainly comply with the following requirements:
- Installable: the app is easily installable on user's terminal.
- Work offline: the app is able to work offline (no internet connection).
- Fast: the app should launch quickly.
- Secure: the app must be served in HTTPS.
Be installable
Easing installation | Manifest file
When an application is installable, a shortcut icon (see A2HS) can be added to the home screen of the user's terminal.
Easing installation
In version >= 2.7 of ZnetDK 4 Mobile, user is prompted to install the App once loaded (see Photo 1 below).
The installation prompt is shown until user answers Yes or No.
It is no longer displayed when user clicks the No
button.

Even if the installation prompt is not displayed, users can try to install the App and get useful information by clicking the Installation menu item from the User panel (see Photo 2 below).

The installation screen (see Photo 3 below) allows users to install the application by clicking the Install the App... button.
The internet address of the application, required for installation, is displayed on the screen and can be copied to the clipboard or sent by SMS.
Other useful informations are also given about installation procedure on iOS and Safari and about web browser A2HS compatibility.

As the process of uninstalling a PWA application depends on the operating system and the web browser used, the Uninstallation screen (see Photo 4 below) only provides some instructions to guide users through the uninstallation procedure.

Manifest file
To be installable, your application should include in the main page, a manifest file correctly filled in.
The ZnetDK 4 Mobile's Starter App is by default configured with the following Manifest:
EXAMPLE: default ZnetDK 4 Mobile's Manifest site.webmanifest
{
"name": "ZnetDK 4 Mobile",
"short_name": "ZnetDK",
"start_url": "../../../../",
"icons": [
{
"src": "./android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "./android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
A custom Manifest file can be set up for the ZnetDK Starter App in replacement of the default one.
For example, it is named mymanifest
and placed into the INSTALL_DIR/applications/default/public/images/favicons
directory, the same one where the custom favicons are stored (see the Getting Started | The favicon logo heading to customize the favicons, including the Manifest file).
Here is below an example of the custom Manifest file mymanifest
:
EXAMPLE: custom file mymanifest
{
"name": "My custom APP",
"short_name": "My APP",
"description": "The description of my custom APP",
"start_url": "../../../../../",
"icons": [
{
"src": "./android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "./android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Able to work offline
For chrome browser in particular, a service worker must be registered for handling the case of running the app offline.
In standard, the ZnetDK framework is configured to register its own service worker in charge of displaying an offline page when no internet connection is available.
Be fast enough
Thanks to the ZnetDK for Mobile built-in service worker, your web app is loading faster by caching its resources.
This service worker is automatically registered when accessing the web app for the first time.
It is located in the root directory of ZnetDK for Mobile and it is named service-worker.js
.
A custom service worker can be developed in replacement of the buit-in one and be specified through the ZnetDK for Mobile CFG_MOBILE_SERVICE_WORKER_URL
parameter.
Be secure
Your web application must be served in a secure way (accessible over HTTPS) to be considered a Progressive Web Application.
Check it out with Lighthouse
Lighthouse can help you diagnose your application and verify if it is compatible with the PWA standard.
Chrome browser includes a built-in version of Lighthouse as shown below:

Another option is to run Lighthouse online at https://lighthouse-ci.appspot.com/try. Here is a report obtained with Lighthouse by submitting the following address: https://mobile.znetdk.fr/livedemo/first/.

Feel free to post your questions on the ZnetDK forum if you have any issues making your ZnetDK For Mobile web application PWA compliant.