service-worker-loader

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.

Install

npm i -D service-worker-loader
# or
yarn add -D service-worker-loader

Usage

import registerServiceWorker, {
    ServiceWorkerNoSupportError
} from 'service-worker-loader!./sw';

registerServiceWorker({ scope: '/' }).then((registration) => {
    console.log('Success!');
    console.log(registration);
}).catch((err) => {

    if (err instanceof ServiceWorkerNoSupportError) {
        console.log('Service worker is not supported.');
    } else {
        console.log('Error!');
    }
});

Example with Workbox Window:

import {
    Workbox
} from 'workbox-window';
import {
    scriptUrl
} from 'service-worker-loader!./sw';

if ('serviceWorker' in navigator) {

    const wb = new Workbox(scriptUrl);

    wb.register();
}

API

Loader exports

export default registerServiceWorker;
export {
    ServiceWorkerNoSupportError,
    scriptUrl
};

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 ServiceWorkerRegistration object.

scriptUrl: string

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.

Loader options

filename: string

Defaults to "[name].js". Specify the file name for generated service worker file

publicPath: string

Defaults to "/". Overrides default publicPath.

outputPath: string

Overrides output path for all service workers.

workbox-webpack-plugin

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 hmr-filter-webpack-plugin.

Using with TypeScript

Add it to your globals.d.ts:

declare module 'service-worker-loader!*' {
    const register: import('service-worker-loader/types').ServiceWorkerRegister;
    const ServiceWorkerNoSupportError: import('service-worker-loader/types').ServiceWorkerNoSupportError;
    const scriptUrl: import('service-worker-loader/types').ScriptUrl;
    export default register;
    export {
        ServiceWorkerNoSupportError,
        scriptUrl
    };
}
// or, for example
declare module '*?sw' {
    // ...
}

Now you can import service worker:

import registerServiceWorker from 'service-worker-loader!./serviceWorker';
// or
import registerServiceWorker from './serviceWorker?sw';

Credit

This loader is based almost entirely on worker-loader by @sokra.

License

MIT