vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.67k stars 6.2k forks source link

Service Worker Support #2248

Open Snugug opened 3 years ago

Snugug commented 3 years ago

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 commented 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?

tobias-kuendig commented 3 years ago

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

// 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 commented 2 years ago

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

amw commented 1 year ago

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 commented 10 months ago

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' });