Web application manifest

You may have seen the benefits of applications that use a web app manifest already—if you've ever been on a website that asks you to install this on your home screen or if you've noticed that the color of the address bar change from default gray to a different color on Android Chrome, that's a progressive app.

Let's head over to static/manifest.json and investigate the contents:

{
  "name": "vue-pwa",
  "short_name": "vue-pwa",
  "icons": [
    {
      "src": "/static/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

We have the option to give our application name and short_name; these will be shown when installing on the home screen of a device.

The icons array is used to provide varying sizes of our icon for a high-definition experience across devices. The start_url defines the file to be loaded upon startup when installed on a user's home screen and thus points toward index.html.

We can change how our application appears when running on a device as a PWA with the display attribute. There are various options available, such as browser, standalone, minimal-ui, and fullscreen. Each one changes how our application is displayed on the device; (https://developers.google.com/web/fundamentals/web-app-manifest/)

here's an example of both browser and standalone:

Display options—the web app manifest

We can also take advantage of the background_color option to change the color of the splash screen background when our PWA starts, as seen in the following screenshot:

If we want to change the color of the toolbar, we can use the theme_color option (we'll look at an example as we move ahead).

There are other options you can pass to your web app manifest and you should customize these based on the needs of your project. You can find more information about the web app manifest on MDN at https://developer.mozilla.org/en-US/docs/Web/Manifest.