@medipass/react-service-worker

    1.0.4 • Public • Published

    React Service Worker

    A headless React component that wraps around the Navigator Service Worker API to manage your service workers. Inspired by Create React App's service worker registration script.

    Table of Contents

    Installation

    npm install @medipass/react-service-worker --save
    

    or install with Yarn if you prefer:

    yarn add @medipass/react-service-worker
    

    Usage

    Basic

    Import the <WithServiceWorker> component and wrap it around your application.

    import React from 'react';
    import WithServiceWorker from 'react-service-worker';
     
    import App from './App';
     
    export default () => (
      <WithServiceWorker publicServiceWorkerDest="/service-worker.js">
        <App />
      </WithServiceWorker>
    );

    Less basic

    import React from 'react';
    import WithServiceWorker from 'react-service-worker';
     
    import App from './App';
     
    export default () => (
      <WithServiceWorker
        onError={err => console.log(`An error occured: ${err}`)}
        onInstalled={() => console.log('Service worker installed')}
        onUpdated={() => console.log('Service worker updated')}
        publicServiceWorkerDest="/service-worker.js"
      >
        {({ registration, update, unregister }) => (
          <div>
            <App />
            <button onClick={update}>Update service worker</button>
            <button onClick={unregister}>Unregister service worker</button>
          </div>
        )}
      </WithServiceWorker>
    );

    <WithServiceWorker> props

    publicServiceWorkerDest

    string

    The destination of where your service worker is located.

    Example usage:

    <WithServiceWorker publicServiceWorkerDest="/service-worker.js">

    publicUrl

    string | Optional

    The public URL of your application. Defaults to the root origin.

    Example usage:

    <WithServiceWorker publicUrl="https://example.com/app">

    onError

    function(error: Error) | Optional

    Invoked when an error occurs during service worker registration.

    Example usage:

    <WithServiceWorker onError={err => console.log(`An error occured! Error: ${err}`)}>

    onInstalled

    function() | Optional

    Invoked when the service worker is installed.

    Example usage:

    <WithServiceWorker onInstalled={() => console.log('Service worker successfully installed.')}>

    onUpdated

    function() | Optional

    Invoked when the service worker is updated.

    Example usage:

    <WithServiceWorker onUpdated={() => console.log('Service worker successfully updated.')}>

    registerOnMount

    boolean | Optional | Default: true

    If true, service worker will be registered when the component is mounted.

    Example usage:

    <WithServiceWorker registerOnMount={process.env.PRODUCTION}>

    children Render Props

    registration

    Object

    The instance of the registered service worker.

    register

    function()

    When invoked, register will register the service worker.

    update

    function()

    When invoked, update will update the service worker.

    unregister

    function()

    When invoked, unregister will unregister the service worker.

    License

    MIT © Medipass Solutions Pty. Ltd.

    Install

    npm i @medipass/react-service-worker

    Homepage

    jxom.io

    DownloadsWeekly Downloads

    80

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    155 kB

    Total Files

    9

    Last publish

    Collaborators

    • williape
    • paulwcy
    • kazfukuda
    • richardlay
    • likquid
    • claudia13
    • jackzz
    • zl4bv