Customization of Service Worker

[raymondsze]

Apart from offline support, service worker could be used for handling notification.
Seems in 1.0.0, there is no way to do this kind of customization.

sw-precache-webpack-plugin provide the 'importScripts' option to do that purpose.
offline-plugin also provide an option 'entry' for this purpose.

References
https://github.com/NekR/offline-plugin/blob/master/docs/options.md
goldhand/sw-precache-webpack-plugin#67

[addyosmani]

Right now, the importScripts configuration for Push Notifications should be possible by ejecting and then customizing the precache configuration.

Does that help? Or were you asking if there's a way to accomplish this without ejection.

[gaearon]

We’re not planning to add configuration, but generally we’re open to add “conventional” hooks. For example we we call src/setupTests.js if it exists for tests. We could do something similar for other kinds of entry points if somebody writes up a proposal for how it should work.

[binki]

Couldn’t you just check if src/serviceWorkerImportScripts.js exists and set the importScripts option to that file when it exists? Preventing one from being able to inject code into the service worker sounds a lot like not allowing the user to supply a custom src/App.js… (though I’m quite new to all this, so I don’t know if I know what I’m talking about).

[RyanEwen]

I recently ported a web app from Polymer to React (create-react-app) and am running into what sounds like the same issue. My web app relies heavily on the ability to receive background notifications from GCM, which it does using a serviceworker.

I've had to rename my existing service worker to gcm-service-worker.js in order to be able to use it, but I would love to be able to use sw-precache-webpack as well. Not to mention that it's always generating the precache service-worker.js even when I don't want it.

It would be great if I could use my own worker in conjunction with sw-precache somehow, without ejecting. :)

[piotr-cz]

Custom code should be in the public directory, as its being imported by the service worker at runtime, not at build time using importScripts method.

in config/paths.js I've added a check if file exists and appended to module.exports

const sWPrecacheImportScript = fs.existsSync(resolveApp('public/service-worker-import.js'))
  ? 'service-worker-import.js'
  : undefined;

module.exports = {
   //...
  sWPrecacheImportScript: sWPrecacheImportScript,
};

and added an option in config/webpack.config.prod.js:

module.exports = {
  //...
  plugins: [
   //...
    new SWPrecacheWebpackPlugin({
      //...
      importScripts: paths.sWPrecacheImportScript ? [paths.sWPrecacheImportScript] : undefined,
    })
  ]
}

Now contents of public/service-worker-import.js are imported by service worker and executed.

What do you think?

[RyanEwen]

Are you proposing that change be implemented in create-react-app or just a solution for those who have ejected? If part of cra, then sounds good to me, I think.

[piotr-cz]

Yes, I'm proposing it to be implemented in create-react-app, as it's a modification of core package.

The concept is similar to the usage of src/setupTests.js file (see docs): developer interested in such functionality just have to create a file.

I'm interested in opinions on implementation as I'm new to CRA and not an expert in service workers. /cc @jeffposnick, @addyosmani
My motivation is to include a listener for Push Notifications in service worker.

One thing I didn't mention is that the sw-precache package doesn't have an option to include scripts directly in outputted service-worker.js file and such implementation creates an extra request to get service-worker-import.js on first page load.

As the file is located in the public folder, it's not processed (minified) by plugins. It's possible to change that (and add more logic like swapping the %PUBLIC_URL% string or environment variables), but implementation would have to be more complex.
Another option is to intercept the request via backend and replace variables at runtime like described in docs Injecting Data from the Server into the Page.

[piotr-cz]

In meanwhile third bullet point in documentation Making a Progressive Web App should state that it's possible to use push notifications only after ejection and tweaking SWPrecacheWebpackPlugin configuration by hand.

[jeffposnick]

From my perspective, if c-r-a wanted to establish of convention of checking for a service-worker-import.js file in some standard path, and then using it in importScripts if it exists, that certainly sounds fine. It would be useful for both runtime caching and push notifications.

I'm mindful of the fact that c-r-a's goal is to minimize the amount of customization that could otherwise overwhelm developers, so @gaearon who should give final sign-off as to whether this proposal crosses the line.

[gaearon]

I can't promise we'll get it in but I'm curious to look at a possible implementation.

[piotr-cz]

Please comment on possible implementation in #2714