Web App Manifest

The first, and easiest, part of building a Progressive Web Application is to add a Web App Manifest.

The Web App Manifest is a simple JSON file that identifies your application and defines key properties like colors and icons to use. Below is a sample manifest.webmanifest file from our Expense Manager demo.

{
"name": "Expense Manager",
"short_name": "Expenses",
"icons": [
  {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
  },
{
  "src": "images/icons/icon-512x512.png",
  "sizes": "512x512",
  "type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"background_color": "hsl(214, 27%, 26%)",
"theme_color": "hsl(214, 27%, 26%)"
}
The properties marked with a green square are required for adding the PWA to home screen.
Property Description
name, short_name Used for the home screen icon and in the splash screen. short_name is used if the full name is too long to fit under the icon.
icons Lets you define the icons for your application. You need at least a 192px and 512px icon to satisfy the add to home screen requirements.
icons Lets you define the icons for your application. You need at least a 192px and 512px icon to satisfy the add to home screen requirements.
start_url Define which URL should be launched when the app is started from the home screen. You can add a query parameter like ?homescreen=1 if you want to kno when the app has been launched from the home screen. One thing to note if you add query parameters is that you need to explicitly cache the URL with the query parameter in your ServiceWorker for it to work.
display Defines how the app will be shown when launched from the home screen. Valid options are:
  • fullscreen - Entire screen is used. OS toolbars are not shown.
  • standalone - Browser chrome is hidden, but OS toolbars are shown. Looks like any native app. You probably want this.
  • minimal-ui - Shows a minimal browser UI for back/forward etc.
  • browser - Full browser UI.
background_color Application background color. Can be RGB, HEX or HSL.
theme_color Application theme color. Can be RGB, HEX or HSL. Should match the meta theme color in your page head.

There are a few more, lesser used, properties you can set in the manifest. These are outlined on MDN.