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.

The only change you should have to make is specify your icons. Icons are required in sizes 57x75, 192x192 and 512x512. There is a new property called manifest. Its 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 - AppStudio will include them automatically.

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