How to make a Gatsby blog into an offline first PWA (Progressive Web App)

Photo by Lee Campbell on Unsplash

Web applications have always been second to native apps because of their dependency on an active Internet connection. People wouldn't be able to read their favourite blogs or news articles while travelling through areas of limited or no internet connectivity. But PWAs have since caused a paradigm shift. There are plenty of web apps that are seen as a lightweight and low-commitment alternative to native apps - especially on modern mobile phones.

Enough selling PWAs, let's get started on how I turned this Gatsby Blog into a Progressive Web App in just 3 steps!

Step 1: Install gatsby-plugin-manifest

yarn add gatsby-plugin-manifest

The plugin gatsby-plugin-manifest allows users to add your web application to their home screen on mobile devices.

You can then add it to the list of plugins with some basic options:

// in gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
      },
    },
  ],
}

Step 2: Install gatsby-plugin-offline

The plugin gatsby-plugin-offline adds a service worker with some default configurations to cache your application into browser's IndexedDB.

yarn add gatsby-plugin-offline

Similar to the above step, you also need this plugin in your configuration gatsby-config.js.

// in gatsby-config.js 
module.exports: {
  plugins: [
    // after the manifest plugin
    `gatsby-plugin-offline`
  ]
}

Step 3: Deploy!

And that's it, you've converted your static website into an offline-first PWA!