gatsby-plugin-offline custom serviceworker

[davemeyer]

Summary

custom serviceworker with gatsby-plugin-offline doesn't seem to work

Relevant information

according to https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/#using-a-custom-service-worker-in-gatsby

i can use my own serviceworker in just a couple of steps. i created a simple worker in static/sw.js and added exports.registerServiceWorker = () => true; to gatsby-browser.js.

but it looks like that file is always overwritten with the generated worker via https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-offline/src/gatsby-node.js#L119

is this expected? am i missing something else regarding custom serviceworkers?

Environment (if relevant)

System:
OS: macOS 10.14.2
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
npmPackages:
gatsby: ^2.1.19 => 2.1.19
gatsby-image: ^2.0.30 => 2.0.30
gatsby-plugin-emotion: ^4.0.4 => 4.0.4
gatsby-plugin-eslint: ^2.0.4 => 2.0.4
gatsby-plugin-manifest: ^2.0.20 => 2.0.20
gatsby-plugin-offline: ^2.0.24 => 2.0.24
gatsby-plugin-react-helmet: ^3.0.7 => 3.0.7
gatsby-plugin-sharp: ^2.0.23 => 2.0.23
gatsby-source-filesystem: ^2.0.23 => 2.0.23
gatsby-transformer-sharp: ^2.1.15 => 2.1.15
npmGlobalPackages:
gatsby-cli: 2.4.8

[DSchau]

@davemeyer the documentation mentions to use static/sw.js (which will be copied to public) _not_ public/sw.js which you seem to have used.

If you use static/sw.js is the issue resolved?

[davemeyer]

@DSchau sorry that was a mistake in my description. i did indeed use static/sw.js. i was watching the content of public/sw.js during the build process, and i can see the stages that it goes through: first it is a copy of my file from static/sw.js, then it is replaced by the generated content.

[framini]

I'm also having the same issue. Here is a sample project to reproduce it (blank project created using npx gatsby new custom-sw and following the steps outlined here)

Sample:

custom-sw.zip

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[haezl]

@davemeyer @framini Probably all the author wanted to express is that if the plugin is not sufficient enough for your need you can just register your own service worker without that plugin. So when the plugin is not installed your version of the file static/sw.js gets copied to public/sw.js (without getting overwritten) and is then picked up from Gatsby when export const registerServiceWorker = () => true is set in gatsby-browser.js

https://www.gatsbyjs.org/docs/browser-apis/#registerServiceWorker
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/register-service-worker.js#L12

[framini]

Thanks for taking the time to review it @haezl. Yeah, that makes sense and that's what I ended up doing. I guess that what I was looking after was extending the plugin more than completely replacing it.

[Zyclotrop-j]

Hi all,
I am successfully using a workaround.

Workaround

TL;DR: Use importScripts-option of the plugin in conjunction with worker-loader to compile & load own sw.js.

Steps

0) Install the worker loader (yarn add worker-loader) if you don't already have it
(see https://github.com/webpack-contrib/worker-loader)

1) Use importScripts-option to add additional script to offline-plugin, like so:

resolve: "gatsby-plugin-offline",
      options: { importScripts: ['sw.js'], .... }

[In gatsby-config.js]
(also see https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generateSW-importScripts)

2) Create file mysw.js anywhere in your project and note the path
This is your own, custom service-worker code!

3) Load that file using worker-loader **using the name option:

import('worker-loader?name=sw.js!./src/foo/mysw');

Note that name=sw.js is important to create a named script - whatever is in this param is what you added in step 1 (['sw.js'])
I loaded it in gatsby-browser.js to make sure. I also only load it in prod, because otherwise, my dev-build keeps crashing.

if(process.env.NODE_ENV !== "development") {
  import('worker-loader?name=sw.js!./src/foo/mysw');
}

---

Variations:

If you don't need your code compiled, you just use importScripts: ['sw.js'] and add the script to the static-folder.

---

Maybe a path to enable the behaviour described in this ticket in the plugin?

Potentially this approach could be used in the plugin
a) Check if sw.js in static exists
b) If yes, modify importScripts-option to add 'sw.js'
c) Optional (needed for compilation of sw.js): Require 'sw.js' via import with worker-loader + name as seen above

I hope it helps :)

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Zyclotrop-j]

Issue still exists, not stale

[sidharthachatterjee]

gatsby-plugin-offline 3.x now supports an appendScript option which lets you append custom code to your service worker. That should serve this use case.

Closing this issue as a result.