Adding a Progressive Web App Manifest File

Progressive web apps (PWAs) are websites that can run in the browser but also leverage certain functionality to provide native application–like advantages. For those Gatsby developers who wish to enable their Gatsby sites as PWAs, the most important step is to add a manifest file, manifest.webmanifest, that indicates PWA compatibility.

The gatsby-plugin-manifest plugin can create a manifest file on your behalf. To install the plugin, execute the following commands and ensure a favicon is available at src/images/icon.png:

$ gatsby new gtdg-ch13-pwa gatsbyjs/gatsby-starter-default
$ npm install gatsby-plugin-manifest

Then, add the plugin to the plugins array in your Gatsby configuration file, as follows:

// gatsby-config.js
{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "GatsbyJS",
        short_name: "GatsbyJS",
        start_url: "/",
        background_color: "#6b37bf",
        theme_color: "#6b37bf",
        // Enables "Add to Homescreen" prompt and disables browser UI
        // (including back button)
        display: "standalone",
        icon: "src/images/icon.png", // Relative to the root of the site.
        // An optional attribute which provides support for CORS check.
        // Without this attribute, it will skip CORS for manifest.
        // Any invalid keyword or empty string defaults to `anonymous`.
        crossOrigin: `use-credentials`,
      },
    },
  ]
}

Whenever you perform another build of your Gatsby site, a manifest.webmanifest file will automatically be generated for your PWA-enabled site.

NOTE

For more information about PWA functionality in Gatsby, consult the Gatsby documentation’s guide to PWAs and the gatsby-plugin-manifest plugin documentation. See also Google’s PWA overview.