Adding a Manifest File

If you’ve run an audit with Lighthouse, you may have noticed a lackluster score in the “Progressive Web App” category. Let’s address how you can improve that score.

But first, what exactly are PWAs?

They are regular websites that take advantage of modern browser functionality to augment the web experience with app-like features and benefits. Check out Google’s overview of what defines a PWA experience and the Progressive web apps (PWAs) doc to learn how a Gatsby site is a progressive web app.

The inclusion of a web app manifest is one of the three generally accepted baseline requirements for a PWA.

Quoting Google:

The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when ‘installed’ on the user’s mobile device or desktop.

Gatsby’s manifest plugin configures Gatsby to create a manifest.webmanifest file on every site build.

Using gatsby-plugin-manifest

1. Install the plugin:

2. Add a favicon for your app under src/images/icon.png. The icon is necessary to build all images for the manifest. For more information look at the docs of gatsby-plugin-manifest.

3. Add the plugin to the plugins array in your gatsby-config.js file.

That’s all you need to get started with adding a web manifest to a Gatsby site. The example given reflects a base configuration — check out the plugin reference for more options.