JavaScript modules in service workers
Module service workers let Service Worker code use native ES module imports. This makes complex offline and caching logic easier to split into maintainable units.
Overview
Module service workers let Service Worker code use native ES module imports. This makes complex offline and caching logic easier to split into maintainable units.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.ServiceWorker.ecmascript_modules | 91 | 91 | 147 | 15 | 91 | 15 |
| Statement | ||||||
service worker support Available in service workers | 91 | 91 | 147 | 15 | 91 | 15 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
- Nested workers support was introduced in Safari 15.5.
- Script loading in nested workers was introduced in Safari 16.4.
Notes 2 item(s)
Implementation note
- Nested workers support was introduced in Safari on iOS 15.5.
- Script loading in nested workers was introduced in Safari on iOS 16.4.
Syntax
JAVASCRIPT
navigator.serviceWorker.register('/sw.js', { type: 'module' });Use cases
Offline strategies
Split route handling, cache logic, and update behavior into separate modules instead of one long worker file.
Shared runtime utilities
Reuse serialization, request filtering, and versioning helpers across app code and worker code.
Cautions
- Service Worker lifecycle rules still apply, so module support does not remove the need to reason about install and activate flows.
- Be careful with deployment paths and update behavior because workers are sticky and cached aggressively.
Accessibility
- Better offline behavior can improve resilience for users on unstable networks or assistive setups that depend on predictable loading.
- If the worker changes content availability, communicate fallback and retry states clearly.
Related links
Powered by web-features