Search by Algolia


Adds drop-in support for making a Gatsby site work offline and more resistant to bad network connections. It creates a service worker for the site and loads the service worker into the client.

If you’re using this plugin with gatsby-plugin-manifest (recommended) this plugin should be listed after that plugin so the manifest file can be included in the service worker.


npm install --save gatsby-plugin-offline

How to use

// In your gatsby-config.js
plugins: [`gatsby-plugin-offline`];

Overriding options

When adding this plugin to your gatsby-config.js, you can pass in options to override the default sw-precache config.

The default config is as following. Warning, you can break the offline support and AppCache setup by changing these options so tread carefully.

const options = {
  staticFileGlobs: [
  stripPrefix: rootDir,
  navigateFallback: `/offline-plugin-app-shell-fallback/index.html`,
  // Only match URLs without extensions.
  // So will pass but
  // will not.
  // We only want the service worker to handle our "clean"
  // URLs and not any files hosted on the site.
  navigateFallbackWhitelist: [/^.*(?!\.\w?$)/],
  cacheId: `gatsby-plugin-offline`,
  // Do cache bust JS URLs until can figure out how to make Webpack's
  // URLs truely content-addressed.
  dontCacheBustUrlsMatching: /(.\w{8}.woff2)/, //|-\w{20}.js)/,
  runtimeCaching: [
      // Add runtime caching of images.
      urlPattern: /\.(?:png|jpg|jpeg|webp|svg|gif|tiff)$/,
      handler: `fastest`,
  skipWaiting: false,

Was this helpful? edit this page on GitHub