service-worker-updater
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/service-worker-updater package

    0.0.3 • Public • Published

    Service Worker Updater - React Hook & HOC

    npm npm bundle size npm NPM

    This package provides React hook and HOC to check for service worker updates.

    Why would I need that?

    If you use service worker in your app and would like to provide nice new update button/notification, it's perfect for you. Service Worker Updater will periodically check for new service worker. If found one, hasUpdate prop is set to true (now you can show something to your users) and use updateHandler() to activate new SW.

    Service Workers are self updating by default (when user reopens your app or after some time - depending on browser). When users aren't often reloading the app, they will have old app version. Service Worker Updater = solution for that.

    Installation

    $ yarn add service-worker-usage
    

    Usage

    Use updater with React Hook

    const [hasUpdate, updateHandler] = useSWUpdateChecker(options)

    Example:

    import React from "react"
    import { useSWUpdateChecker } from "service-worker-updater"
     
    const CHECK_INTERVAL = 30 * 60 * 1000 // 30 minutes
    const UPDATE_ON_NAVIGATE = true // trigger update when changing route/window.location
     
    function UpdateButton() {
      const [hasUpdate, updateHandler] = useSWUpdateChecker({
        checkInterval: CHECK_INTERVAL,
        updateOnLoad: UPDATE_ON_NAVIGATE
      })
     
      if (!hasUpdate) return null
     
      return (
        <button
          onClick={() => {
            updateHandler()
          }}
        >
          Update app
        </button>
      )
    }

    Use updater as HOC (Higher Order Component)

    export default withSWUpdateChecker(WrappedComponent, options)

    Example:

    import React from "react"
    import PropTypes from "prop-types"
    import { withSWUpdateChecker } from "service-worker-updater"
     
    function UpdateButton({ hasUpdate, updateHandler }) {
      if (!hasUpdate) return null
     
      return (
        <button
          className='updateButton'
          onClick={() => {
            updateHandler()
          }}
        >
          Update app
        </button>
      )
    }
     
    const CHECK_INTERVAL = 30 * 60 * 1000 // 30 minutes
    const UPDATE_ON_NAVIGATE = true // trigger update when changing route/window.location
     
    export default withSWUpdateChecker(UpdateButton, {
      checkInterval: CHECK_INTERVAL,
      updateOnLoad: UPDATE_ON_NAVIGATE
    })
     
    UpdateButton.propTypes = {
      hasUpdate: PropTypes.boolean.isRequired,
      updateHandler: PropTypes.func
    }

    Do I need to modify my service worker?

    Yeah, probably. This package was tested with Gatsby and gatsby-offline-plugin, which uses Workbox behind the scenes. To activate new SW, it must trigger self.skipWaiting() event.

    If you use custom Service Worker, add message event listener to it and handle 'SKIP_WAITING' event:

    self.addEventListener("message", event => {
      if (event.data && event.data.type === "SKIP_WAITING") {
        self.skipWaiting()
      }
    })

    Options

    There are only two options:

    • checkInterval (int) - time in milliseconds how often check for Service Worker updates. Default: 3600000 (1h)

    • updateOnLoad (bool) - activate new service worker on route change? Default: true

    How to use it in Gatsby.js?

    WIP

    Resources

    I definitely recommend reading more about Service Workers lifecycles and their possible states:

    Install

    npm i service-worker-updater

    DownloadsWeekly Downloads

    7

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    28.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • cactoo