PWA Plugin: Transpile Service Worker

[lukas-tr]

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]

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?

[gaomd]

@LinusBorg, The issues was closed and transpile is available in Workbox v5, do vue-cli has plan to update to use Workbox v5?

https://github.com/GoogleChrome/workbox/issues/1513#issuecomment-531929941

https://forum.vuejs.org/t/cli-3-0-pwa-plugin-using-the-injectmanifest-option/63452

[LinusBorg]

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

[JaekwanLee]

@LinusBorg is this release? what version should I look for?

[FossPrime]

@JaekwanLee Vue-CLI 5... the version that aligns with the game changing Webpack 5 HMR with the offline ESM Workbox 6, and of course, good community support for Vue 3 and Typescript