ZnetDK 4 Mobile

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
Be installable
Able to work offline
Be fast enough
Be secure
Check it out with Lighthouse

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.

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.

ZnetDK for Mobile Installation prompt
Photo 1 Installation prompt

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).

ZnetDK for Mobile User Panel
Photo 2 Installation and Uninstallation menu items on User panel

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.

ZnetDK for Mobile Installation
Photo 3 User panel installation screen

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.

ZnetDK for Mobile Uninstallation
Photo 4 User panel uninstallation screen

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"
}

Pay particular attention to the url set for the start_url field.
In 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 INSTALL_DIR folder, then the relative url set for the start_url field is ../../../../../.

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.

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 offline.
Par exemple : https//mywebapp.com/offline

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:

ZnetDK 4 Mobile - PWA - Lighthouse

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/.

ZnetDK 4 Mobile - PWA - Lighthouse

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