-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Service Worker Support #2248
Comments
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:
// 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: |
hey @amw , you are right !!! Register Worker with ES module is available right now
|
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.The text was updated successfully, but these errors were encountered: