PWA Plugin: Transpile Service Worker

What problem does this feature solve?

There is an ever-growing list of things that need to be handled in service workers, which can’t be handled in normal web workers (like caching, push notifications, background sync, …) and it would be great to split the code into different files and use typescript, babel, and other loaders to improve the developer experience and type safety.

I can use worker-loader for web workers, but this loader doesn’t work for service workers.

What does the proposed API look like?

Add a transpile option to the pwa config section. When enabled, the service worker is transpiled instead of just copied (similar to worker-loader). The workbox script and the precache manifest and can be imported in sw.js via a dummy module (to support typescript).

// vue.config.js
module.exports = {
  pwa: {
    workboxPluginMode: "InjectManifest",
    transpile: true,
    workboxOptions: {
      swSrc: "src/sw.js",
    }
  }
};

[LinusBorg]

We will upgrade to workbox’s new major in our next major upgrade, yes.

[LinusBorg]

There’s still an open issue about this in the workbox repo: https://github.com/GoogleChrome/workbox/issues/1513

Do we want to work around that in some way, and if so, is there an idea how to achieve that?