Service Worker Compilation during Development

[Snugug]

Is your feature request related to a problem? Please describe.
The current path for using ESModules for web workers doesn't work for Service Workers, which do not support a the type option. Because of this Service Workers with import statements must always be compiled, even during development. There doesn't currently appear to be a clear path to allow this to happen. While using a solution like Workbox precaching during a production build may work for some, it does not work for everyone, especially those looking to leverage more powerful features of Service Workers and need to be able to test that during development.

Describe the solution you'd like
Service workers to be compiled during development, either by identifying the registration signature and acting on it, or by importing the service worker into the codebase and getting a URL that can be passed to the registration, like the wmr sw-plugin does

Describe alternatives you've considered
I tried setting build.rollupOptions to an array containing the input/output/compile options as an object that I wanted for a service worker but that didn't appear to run during development.

[rungta]

Hit the same dead-end after a fair few experiments trying to get a custom service worker script compiled and working. Any update on this issue?

[tobias-kuendig]

I've had some luck using this plugin:
https://www.npmjs.com/package/rollup-plugin-workbox

• Everything works when using yarn build and yarn serve
• Pre-caching has to be skipped when using yarn dev, since the workbox manifest is not injected.
• Only works using yarn dev with browsers that support type module service worker (Chrome/Edge, not Firefox)

// vite.config.js
import replace from '@rollup/plugin-replace'
import { injectManifest } from 'rollup-plugin-workbox'

// ...
plugins: [
    vue(),
    injectManifest({
      swSrc: 'service-worker.js',
      swDest: 'dist/service-worker.js',
      globDirectory: 'dist',
      mode: 'production', // this inlines the module imports when using yarn build
    }),
    replace({
      'is_vite_preview': true, // this is used to conditionally call Workbox's precacheAndRoute function
    }),
    ...
]

// service-worker.js
import {precacheAndRoute} from 'workbox-precaching';

console.log('Your custom service worker code');

if (typeof is_vite_preview === 'undefined') {
  precacheAndRoute(self.__WB_MANIFEST);
  console.log('precache!')
} else {
  console.log('skipping precache in dev')
}

// main.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    // It's important to use type: 'modlue' here in dev.
    navigator.serviceWorker.register('/service-worker.js', { type: import.meta.env.DEV ? 'module' : 'classic' })
  })
}

[userquin]

Vite plugin pwa supports dev mode https://vite-plugin-pwa.netlify.app/guide/development.html

[amw]

I think this issue is outdated. Today I am able to use modules with static imports in ServiceWorkers at least in Chrome and Safari. Only dynamic imports using ‘await’ don’t work, but those don’t get bundled anyway.

More info here:
https://web.dev/articles/es-modules-in-sw

[jackhuynh95]

hey @amw , you are right !!! Register Worker with ES module is available right now

const wb = new Workbox('/dev-sw.js?dev-sw', { type: 'module' });