Modern service worker loader for Webpack: takes a file, emits it separately from the bundle, and exports a function to register the file as a service worker.
npm i -D service-worker-loader# oryarn add -D service-worker-loader
Example with Workbox Window:
;;if 'serviceWorker' in navigatorconst wb = scriptUrl;wb;
registerServiceWorker(options: RegistrationOptions): Promise<ServiceWorkerRegistration>
registerServiceWorker(mapScriptUrl: (scriptUrl: string) => string, options: RegistrationOptions): Promise<ServiceWorkerRegistration>
Registers the file passed through the loader as a service worker. The
options argument is passed as the second argument to
navigator.serviceWorker.register. The return value is a promise to a
The URL of the emitted service worker file.
class ServiceWorkerNoSupportError extends Error
The error type that
registerServiceWorker rejects with when the browser doesn’t support service workers.
"[name].js". Specify the file name for generated service worker file
"/". Overrides default
Overrides output path for all service workers.
workbox-webpack-plugin is a plugin that generates a list of assets to precache that is injected into a service worker file. With
service-worker-loader you can use
@flexis/workbox-webpack-plugin: a plugin that was specially created for a better experience with this loader.
Hot Module Replacement
Webpack's HMR did not designed for service workers, so need to disable HMR for them. You can do it with
Using with TypeScript
Add it to your
declare// or, for exampledeclare
Now you can import service worker: