The web application manifest is a crucial element in Progressive Web Apps as it allows us to add applications to the home screen on our mobile devices, run the web app in full-screen as a standalone application and assign an icon which will be displayed once the application is installed onto the device, amongst many other features.

Additionally, if you have a valid web app manifest, serve content over HTTPS and have a service worker registered, Chrome on Android will also suggest to users to install the web app using web app install banners, and that's pretty sweet.

An example manifest.json

{
 "short_name": "My App",
 "name": "My Application",
 "description": "My application that connects to the internets",
 "icons": [
 {
 "src": "launcher-icon.png",
 "sizes": "48x48",
 "type": "image/png"
 },
 {
 "src": "launcher-icon-2x.png",
 "sizes": "96x96",
 "type": "image/png"
 },
 {
 "src": "launcher-icon-4x.png",
 "sizes": "192x192",
 "type": "image/png"
 },
 {
 "src": "launcher-icon-8x.png",
 "sizes": "256x256",
 "type": "image/png"
 }
 ],
 "start_url": "./?utm_source=web_app_manifest",
 "display": "standalone",
 "orientation": "portrait",
 "theme_color": "#29BDBB",
 "background_color": "#29BDBB"
}

 

  • short_name is a the name for the application that is used to label the icon on the home screen.
  • name defines how the application will be listed.
  • description provides a general description of the web app.
  • icons contains an array of images (png) that will be used as the launcher icon on the splash screen and the icon once the app is added to the home screen.
  • start_url is the URL from where the application will launch if run as standalone.
  • display could be fullscreen, standalone, minimal-ui or browser and dictates how the application will be opened.
  • orientation portrait, landscape...etc.
  • theme_color is the default colour of the application and used to colour the status bar on Chrome and the task switcher on iOS.
  • background_color is the background colour of the application and mostly used to set the background colour of the splash screen.
  • related_applications is used to specify native application alternatives (from the respective stores) to the web application and will result in displaying a native app install banner (Chrome only).

The manifest.json must then also be referenced within our web app's <head> tag.

<link rel="manifest" href="./manifest.json">

 That's all folks, and within minutes you have yourself a greatly improved user experience and on the way to building a truly progressive web app.