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.
To be PWA compliant, a web application must mainly comply with the following requirements:
When an application is installable, a shortcut icon (see A2HS) can be added to the home screen of the user's terminal.
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
The display of the Installation prompt can be disabled by setting the
CFG_MOBILE_INSTALL_MESSAGE_DISPLAY_AUTO PHP constant to
FALSE in the
config.php script of the application.
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).
No prompt is displayed on web browsers which do not support totally the A2HS feature (A2HS means Add to Home screen).
This is for example the case with the Apple Safari web browser at the time of writing this article (August, 2022).
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.
When user authentication is disabled (see
CFG_AUTHENT_REQUIRED PHP constant), the User panel is not available and so the Installation screen can't be displayed. Nevertheless, the Installation screen can be displayed calling the
znetdkMobile.install.showInstallView JS API method.
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.
The Uninstallation screen can be displayed calling the
znetdkMobile.install.showUninstallView JS API method.
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:
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
Pay particular attention to the url set for the
mymanifest file above, it matches the relative url of the App main page from the directory where is installed the Manifest file.
As the Manifest is installed within the
INSTALL_DIR/applications/default/public/images/favicons directory and the main page of the application (
index.php) is located into the
then the relative url set for the
start_url field is
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.
A custom offline page can be added to your ZnetDK 4 Mobile app in replacement of the standard one.
To do so, you just have to install a script named
offline.php with-in the
INSTALL_DIR/applications/default/public/app/view folder of your app.
To check the display of your offline page, type in the address bar of your web browser, the url to load the application, followed on the right by the word
Par exemple :
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
A custom service worker can be developed in replacement of the buit-in one and be specified through the ZnetDK for Mobile
Your web application must be served in a secure way (accessible over HTTPS) to be considered a Progressive Web Application.
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.