Skip to content
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

Open
Snugug opened this issue Feb 25, 2021 · 5 comments
Open

Service Worker Support #2248

Snugug opened this issue Feb 25, 2021 · 5 comments

Comments

@Snugug
Copy link
Contributor

Snugug commented Feb 25, 2021

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
Copy link

rungta commented May 19, 2021

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
Copy link

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
Copy link
Contributor

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

@amw
Copy link

amw commented Nov 16, 2023

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
Copy link

jackhuynh95 commented Jan 23, 2024

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

@sapphi-red sapphi-red changed the title Service Worker Compilation during Development Service Worker Support May 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants