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 can be added to the home screen of the user's terminal.
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.