Skip to main content
Version: 2.6

PWA - Installable apps

info

PWA is a widely spread web-standard allowing web applications to be installed on local devices. You can read more on MDN Documentation:

Enable PWA​

All applications built with Draw are PWA-ready out of the box. You just need a running backend on your environment (learn more why). In details, browsers require a few things to make an web-app installable (learn more):

  • a manifest file included with a <link> tag in the head of the HTML
  • a service worker installed and registered for the running application with a fetch handler.
    This feature is now optional for most browser.

Draw applications automatically ship with the manifest and you can opt-in for the service worker which implements the Cache API to allow offline start of the application.

Requirements​

FeatureRequirement
Add a manifest <link> in the HEADA backend running on the environment
A service worker registered with Cache APIoffline.enabled: true in the oConfig

Any backend on the environment is configured with a web-service that delivers the manifest file with some default values. You can customize the manifest. Read on to learn more.

Configuring the PWA​

Configuring the PWA is done by setting the right values in the manifest file. As explained above, the content of this manifest is built by the backend of your app. By default, the manifest only contains the minimal required properties for the PWA to work, specifically:

  • name : with the name of the UI app
  • short_name : with the name of the UI app
  • id : with the tag of the UI app
  • start_url : with the URL to launch the app
  • display : "standalone"
  • backgroundColor: "fff"
  • icons: with the Olympe icon
info

There are a lot more configurable properties, you can learn more on MDN documentation:

Every field are configurable using the oConfig.json of the node app. You can either configure values for the whole environment or per-app. Any configuration that you set will be merged in this order

  • default config (above)
  • instance manifest config (app.manifest.common)
  • app manifest config (app.manifest.<app_tag>)

Examples​

Add the same icon to all apps of the instance​

// The # symbol at the beginning of the config key indicates to the config parser that the value of this key should be serialized
{
    "#app.manifest.common": {
        "icons": [
            {
                "src": "https://cdn-icons-png.flaticon.com/512/891/891462.png",
                "sizes": "512x512",
                "type": "image/png",
                "purpose": "maskable any"
            }
        ]
  }
}

Set the name of a specific app​

// The # symbol at the beginning of the config key indicates to the config parser that the value of this key should be serialized
{
    "#app.manifest.<app_tag>": {
        "name": "Specific Name"
  }
}

Set a property not already included in the default manifest​

// The # symbol at the beginning of the config key indicates to the config parser that the value of this key should be serialized
{
    "#app.manifest.<app_tag>": {
        "description": "Awesome application that will help you achieve your dreams.",
        "orientation": "landscape-primary"
  }
}