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

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:

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.