service-worker-loader

    4.0.2 • Public • Published

    service-worker-loader

    NPM version Node version Peer dependencies status Dependencies status Build status Dependabot badge

    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

    Install

    npm i service-worker-loader

    DownloadsWeekly Downloads

    2,436

    Version

    4.0.2

    License

    MIT

    Unpacked Size

    27 kB

    Total Files

    8

    Last publish

    Collaborators

    • dangreen
    • mohsen