×

PWA - Progressive Web App

PWA

Web App: a Web App is a website, which is available by an internet connection. It don't need to be installed.

Progressive Web App: a progressive Web App is a website with this major advantages:

  • no installation.
  • it can be placed on the desktop or screen like an App.
  • it offers functionality even without internet connection.

K8 Web Kit has added additional functions by reading and saving data in the master data form by Ajax. After the connection is re-established, the data is read or saved again.

Icon on desktop thanks to "manifest.json"

A web application manifest, defined in the Web Application Manifest specification, is a JSON text file that provides information about a web application. It is placed in the <head> area of your website:

The most common use for a web application manifest is to provide information that the browser needs to install a progressive web app (PWA) on a device, such as the app's name and icon.

This is the manifest of K8 Web Kit manifest.json:

Create the icon

Computer Desktop

You can create an Icon on your Desktop with Chrome:

  •  ⁝   / Save / Shortcut (english)
  •  ⁝   / Speichern und teilen / Verknüpfung erstellen (deutsch)

In firefox it's not possible for the moment.

Android

You can create an Icon on your Screen with Chrome:

  1. Open Chrome.
  2. Navigate to the website or web page you want to pin to your home screen.
  3. Tap the menu icon (3 dots in upper right-hand corner) and tap Add to home screen.
  4. Choose a name for the website shortcut, then Chrome will add it to your home screen.

More details on:

No internet: the service worker

The browser needs to support a service worker. Most browser do this. The configuration of the brower also needs to support it. For example in firefox private browsing service worker are not supported. K8 Web Kit handles the service worker like this:

  • masterdata/_init.jsdomain_serviceworker:
    • 0: disabled
    • 1: enabled
  • js/standard.js: starts the service worker, when user is logged in with "remember me" mode
  • service-worker.js, the JavaScript file for the service worker
  • offline.html, the HTML offline page
  • masterdata/masterdata.js by datadefinition: settings.masterdata.cbConnectionfail

The website offline.html is loaded, when the service worker recognizes a connection loss. In this website the offline functions need to be implemented. K8 Web Kit checks only if the connection is restored and loads the desired page after the connection restart.

More details on:

Ajax

The Ajax data access is implemented in:

  • masterdata/js/masterdata.js

The datadefinition needs the function:

  • settings.masterdata.cbConnectionfail()

The event "cbConnectionfail" is fired by the following errors:

  • tabulator.dataLoadError
  • saveRecord()

The brand is displayed in red color by an error. When the connection is availabe again the data is saved or displayed and the brand is set to normal color.