Skip to main content

Add Offline Support with a Service Worker

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. Ensure that the manifest plugin is listed before the offline plugin so that the offline plugin can cache the created manifest.webmanifest.
  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. 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.

What is a service worker

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. They increase your site availability in spotty connections, and are essential to making a nice user experience.

It supports features like push notifications and background synchronization.

Using service workers in Gatsby with gatsby-plugin-offline

Gatsby provides an awesome plugin interface to create and load a service worker into your site: gatsby-plugin-offline.

We recommend using this plugin together with the manifest plugin. (Don’t forget to list the offline plugin after the manifest plugin so that the manifest file can be included in the service worker).

Installing gatsby-plugin-offline

npm install --save gatsby-plugin-offline

Add this plugin to your gatsby-config.js

gatsby-config.js
{
    plugins: [
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                ...
            }
        },
        'gatsby-plugin-offline'
    ]
}

That’s all you need to add offline support to your Gatsby site.

References


Was this helpful? edit this page on GitHub