Skip to main content

Add offline support

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.

  1. You can add a manifest file.
  2. You can also add offline support, since another requirement for a website to qualify as a PWA is the use of a service worker. A service worker runs in the background, deciding to serve network or cached content based on connectivity, allowing for a seamless, managed offline experience.

Gatsby’s offline plugin makes a Gatsby site work offline—and makes it more resistant to bad network conditions—by creating a service worker for your site.

Using gatsby-plugin-offline

  1. Install the plugin:
npm install --save gatsby-plugin-offline
  1. Add the plugin to the plugins array in your gatsby-config.js file.
gatsby-config.js
{
    plugins: [
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                ...
            }
        },
        'gatsby-plugin-offline'
    ]
}

That’s all you need to get started with service workers with Gatsby.

💡 If you are also adding a manifest file, the manifest plugin should be listed before the offline plugin so that the offline plugin can cache the created manifest.webmanifest.


Was this helpful? edit this page on GitHub