Progressive Web Apps - Web App Manifest

Web app manifests are part of a collection of web technologies called progressive web apps, which are websites that can be installed to a device’s home screen without an app store, along with other capabilities like working offline and receiving push notifications, and, more importantly, how it behaves when it’s launched from the home screen.

Installs to the home screen

When a user clicks “Add to home screen”, they will see the app being added on the home screen.

At a minimum, the manifest must contain the name of the app and a short_name.

The short_name is used on the home screen and in other places where there is limited space.

It also needs the start_url, the URL the app should open when launched from the home screen.

Defining the manifest metadata

Make sure the page you specify is cached as part of the app shell. Otherwise, you won’t get the benefits of a cached app shell and your app won’t work offline.

One quick tip

To track the number of users who are launching your app from their home screen, you can add a query string to the end of your URL.

And use any analytics to track launches, with that query string.

But don’t forget to ensure that you’ve cached the URL with the query string, in your service worker.

Adding icons and Splash screen color

Finally, we need to provide a set of icons for things like the home screen icon and the tab switcher, and the splash screen.

The icons parameter takes an array of icons and must include the source, the size of the icon, and the type.

For example, image/jpg.

I recommend providing eight icon sizes,

48 x 48, 96 bx 96, 128 bx 128, 144 x 144,
192 x 192, 256 x 256, 384 x 384 and 512 x 512.

Just make sure you have icons for 1x, 2x, 3x and 4x devices.

Chrome uses the 48 device independent pixel icons for the home screen icon and the tabs footer, and the 128 device pixel icons for the splash screen.

Those are the minimum requirements. But there are a few other helpful things that you should set in the manifest.

The background color and theme color are used by the browser along with an icon, as part of the splash screen.

The instant the web app is launched, until its first render, as we provide the splash screen color as blue in the manifest. The splash screen, icon, and short name are displayed while the browser is rendering the application.