When auto-generating SW with workbox-webpack-plugin there is no way to keep custom SW code?

[johnnyreilly]

Library Affected:
workbox-webpack-plugin

Browser & Platform:
"webpack*

Issue or Feature Request Description:
Hello! I've been trying workbox out over the last week and it's great! I'm using the workbox-webpack-plugin to generate my service worker. Now I've gone beyond naive scenarios I'd like to try generating a SW and including some custom code as well. Alas, there doesn't seem to be a way to generate a SW that includes custom code.

This is my config: https://github.com/johnnyreilly/reactspike/blob/master/webpack.config.production.js#L52

What I want to do is include this custom code in my SW:

// You can also create an optional default handler that can respond to requests
// that don't match anything.
// If you don't create a default handler, then requests that don't match will
// just be passed along to the network without service worker involvement.
router.setDefaultHandler({
  handler: ({event}) => {
    console.log('Routed through the default handler.');
    return fetch(event.request);
  },
});

From what I can tell there doesn't appear to be a way to plug custom SW code into the webpack build pipeline. Or have I missed something?

All help appreciated. Much ❤️ 🌻

[johnnyreilly]

Seems like others have stumbled here too: nuxt-community/pwa-template#5

[johnnyreilly]

There's definitely some overlap between this issue and #696 but this issue doesn't seem to have been particularly discussed. See also #808

[jeffposnick]

Hello @johnnyreilly—Apologies, as this is an area that should be clearer in the v3 docs. Translating the v2 docs from JSDoc to HTML lost a lot of the examples.

You should be able to use the Webpack plugin in "inject manifest" mode, where you pass in your custom service worker code in as a the swSrc parameter to the plugin, with a placeholder call to workboxSW.precache([]) somewhere in the code, and then the Webpack build process will result in the empty placeholder array being populated with all of the resources to precache.

E.g.

new WorkboxBuildWebpackPlugin({
  globPatterns: ['**\/*.{html,js,css}'],
  swSrc: './src/sw.js',
  swDest: './build/sw.js',
});

and inside of ./src/sw.js:

const workboxSW = new WorkboxSW();
// The [] will be replaced:
workboxSW.precache([]);

// Custom code...

[johnnyreilly]

Thanks that's brilliant - glad it's possible! The more I learn about workbox, the more I like it! I've put my money where my mouth is with my latest blog post too 😉 https://blog.johnnyreilly.com/2017/11/the-typescript-webpack-pwa.html

I look forward to seeing the V3 release. I'd say that the only criticism I have of workbox is the documentation. And that's been visibly improving over the last couple of weeks so good work! Looking forward to even more goodness!