Open Snugug opened 3 years ago
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?
I've had some luck using this plugin: https://www.npmjs.com/package/rollup-plugin-workbox
yarn build
and yarn serve
yarn dev
, since the workbox manifest is not injected.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' })
})
}
Vite plugin pwa supports dev mode https://vite-plugin-pwa.netlify.app/guide/development.html
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
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' });
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.