Progressive Web Apps

AppStudio 7.4 adds support for making Progressive Web Apps (PWAs). The intent of Progressive Web Apps is to combine the flexibility of the web with the experience of a native application.

PWAs offer a number of benefits:

• An improved method of storing apps so they can run online
• Android automatically displays "Add to Home Screen" prompt
• Can be saved as desktop apps on Windows and MacOS (via Chrome)
• Does not rely on deprecated Application Cache (for fun, read this: Application Cache is a Douchbag)

How to make your app an PWA

If you have an existing app in AppStudio which you would like to run as a PWA, you don't need to do anything. AppStudio takes care of what needs to be done behind the scenes.

To use your own icons instead of the default, read the next section.

The manifest file

The manifest file contains information about the PWA. It is located in the Progressive Web App section of Project Properties. Icons are required in sizes 57x75, 192x192 and 512x512. TIts default content is as follows:

{{
  "short_name": "{title}",
  "name": "{title}",
  "display": "standalone",
  "start_url": "index.html",
  "background_color": "black",
  "theme_color": "black",
  "icons": [
    {{
      "src": "nsb/images/72.png",
      "sizes": "72x72"
    }},
    {{
      "src": "{icon}",
      "sizes": "192x192"
    }},
    {{
      "src": "nsb/images/512.png",
      "sizes": "512x512"
    }}
  ]
}}

Field with brackets like {icon} get their values from other items in your Project Properties.

If you would like to use your own icons, substitute their paths for the values here. The files should be in your project folder. There is no need to list them in extraFiles project property - AppStudio will include them automatically.

A complete list of options for the manifest file can be found here.

How it works

When your project is deployed, two new files are included.

• manifest.json: This file is taken directly from the manifest property. Add to Home Screen uses the information here to create the pointer to your app from the Home Screen.
• pwa.js: This is an extra JavaScript file which contains the Service Worker to manage the offline copies of the files in your app.

It is generated automatically by AppStudio.