voxylu / gatsby-plugin-sw

Similar to gatsby-plugin-offline but you can customize the service worker (e.g. add notifications).

gatsby-plugin-sw

Tested only on linux with gatsby v2

Add support for making a Gatsby site work offline and more resistant to bad network connections. It creates a service worker using workboxBuild.injectManifest.

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.

Install

npm install --save gatsby-plugin-sw

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-plugin-sw',
    options: {
      swPath: 'src/utils/my-service-worker.js', // Default to 'src/sw.js'
    },
  },
]

// In your service worker e.g. src/sw.js

// Required stuff
importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js'
)

// The plugin will pass the files to cache here
workbox.precaching.precacheAndRoute([])

// Another things
self.addEventListener('push', () => {
  // ...
})

Options

For now the only option avaible is swPath and it's the location of your service worker file.

gatsby-plugin-sw's Issues

Set service worker version

How we can set the version of the service worker cache? Currently, because of cache, my website loads older versions of the content. Thus, I'd like to check for service worker version to load new content. This is my first Gatsby website, so, I am not sure how to add the version in the service worker and the contents of the sw.js are generated automatically during export.

My current sw.js contents:

importScripts(
    'https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js'
  )
  workbox.precaching.precacheAndRoute([])

P.S.: I haven't yet tested the build with the new (5.1.2) version. I just happened to find that verion now, my current live build uses the version mentioned in the docs of the plugin (3.4.1). I'll publish another build to the website, tomorrow, and will test the version update then, hopefully, shouldn't cause any problems.

Is there any way you can import some configs?

Thanks for this, really needed this plugin.

Was just wondering how can I include a list of configs that I can pass on to my custom service worker? Seems like gatsby doesn't build sw.js file so the imports won't work correctly.

Lots of 404 errors in conole

I'm seeing a lot of 404 errors in browser console on the Netlify deployed website. The path to the requested resource is domain/undefined. Chrome mentions the cause of the error as gatsby-browser.js:39, clicking on which, I get this part of code fetch(jsUrl) which comes here:

  // Loop over all resources and fetch the page component and JSON
  // to add it to the sw cache.
  prefetchedPathnames.forEach(path => {
    const { jsUrl, dataUrl } = getResourceURLsForPathname(path)
    fetch(jsUrl)
    fetch(dataUrl)
  })

I've also attached a screenshot from the network tab.

Can this be fixed?

[closed]