gatsby-plugin-offline2.2.0 • Public • Published
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.jsplugins: `gatsby-plugin-offline`
When adding this plugin to your
gatsby-config.js, you can pass in options to
override the default Workbox config.
The default config is as follows. Warning: you can break the offline support by changing these options, so tread carefully.
const options =importWorkboxFrom: `local`globDirectory: rootDirglobPatternsmodifyUrlPrefix:// If `pathPrefix` is configured by user, we should replace// the default prefix with `pathPrefix`."/": `/`cacheId: `gatsby-plugin-offline`// Don't cache-bust JS or CSS files, and anything in the static directory,// since these files have unique URLs and their contents will never changedontCacheBustUrlsMatching: //runtimeCaching:// Use cacheFirst since these don't need to be revalidated (same RegExp// and same reason as above)urlPattern: //handler: `cacheFirst`// Add runtime caching of various other page resourcesurlPattern: /^https?:.*\.$/handler: `staleWhileRevalidate`// Google Fonts CSS (doesn't end in .css so we need to specify it)urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/handler: `staleWhileRevalidate`skipWaiting: trueclientsClaim: true
If you want to remove
gatsby-plugin-offline from your site at a later point,
substitute it with
to safely remove the service worker. First, install the new package:
npm install gatsby-plugin-remove-serviceworkernpm uninstall gatsby-plugin-offline
Then, update your
plugins: [- `gatsby-plugin-offline`,+ `gatsby-plugin-remove-serviceworker`,]
This will ensure that the worker is properly unregistered, instead of leaving an outdated version registered in users' browsers.
Empty View Source and SEO
Gatsby offers great SEO capabilities and that is no different with
gatsby-plugin-offline. However, you shouldn't think that Gatsby doesn't serve HTML tags anymore when looking at your source code in the browser (with
Right click =>
View source doesn't represent the actual HTML data since
gatsby-plugin-offline registers and loads a service worker that will cache and handle this differently. Your site is loaded from the service worker, not from its actual source (check your
Network tab in the DevTools for that).
To see the HTML data that crawlers will receive, run this in your terminal:
Alternatively you can have a look at the
/public/index.html file in your project folder.