djmetzle.io

Add to Home Screen

Gatsby is not just a static site generator. It is a static Progressive Web App generator.

Using the plugin gatsby-plugin-manifest, we can easily add a web app manifest to our site.

Configuring the manifest plugin is straight-forward. We can configure several properties of our app. It seems that the documentation is very concerned with the icon generation.

But a hallmark characteristic of PWAs is being available offilne. This can be accomplished with the complementary gatsby-plugin-offline. Adding the plugin is easy. We can use the defaults, and just add the plugin by name. Just be sure (as the docs mention) to add the offline plugin after the manifest plugin.

Now our site is a Static Progressive Web App! Together, these plugins allow adding our app to the home screen!

// in gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `djmetzle.io`,
        short_name: `djmetzle.io`,
        start_url: `/`,
        background_color: `#004040`,
        theme_color: `#00FF80`,
        display: `standalone`,
        icon: `src/images/djmetzle-light.png`,
      },
    },
    `gatsby-plugin-offline`,
  ],
}

After all this todo, the App Maniffest is recognized in the Application tab of the devtools!