Neat Pidgeon Manure

    sw-helper

    3.0.9 • Public • Published

    sw-helper

    NPM

    This library provides an easy approach towards working with service worker, highly inspired from sw-toolbox

    Install

    npm install sw-helper --save
    

    Usage

    import sw from 'sw-helper'
     
    const prefetchFiles = [
        'css/modal.css'
    ]
    var cacheFiles = [
        {
            url: ".css"
        },
        {
            url: ".js"
        }];
    const strategy = 'cacheFirst'
     
    sw({cacheName: 'v1', cacheFiles, prefetchFiles, strategy});
     

    And you are done!

    Options

    cacheName

    This the name of the cache. Change the name when you want to flush all the resources cached by browser.

    prefetchFiles : string[]

    These are the files that should be cached as soon as page loads (Actually whenever service worker is installed).

    const prefetchFiles = [ 'css/modal.css' ]
     

    cacheFiles : Object[]

    These are the files that should be cached whenever its first request is made.

    cacheFiles accepts regex too.

    To cache all the js files, use

    const cacheFiles = [{ url: new RegExp(".*\\.js") }]
     

    Options:

    1. maxAgeSeconds: If resource is requested maxAgeSeconds after it was cached, it will be served directly from network.
      Default value: Infinity

      const cacheFiles = [{
      url: new RegExp(".*\\.js"),
      maxAgeSeconds: 86400    // 24 hours
      }]
       
    2. strategy: Caching strategy for the resource

        const cacheFiles = [{
        url: new RegExp(".*\\.js"),
        strategy: 'cacheFirstUpdate'
        }]

    Default value: The one globally defined

    getKey : Function : Request => any

    It is the function to specify key of the cache. If not specified, key is Request

    const getKey = request => request.url

    To cache index.html i.e navigation request/document page, specify index.html in cacheFiles.

    To cache all js files and index.html, use

    const cacheFiles = [ new RegExp(".*\\.js") , 'index.html']

    strategy

    Currently following caching strategies are supported

    • cacheFirst: Every time a resource is requested, it is served from cache if available, otherwise from network.
    • cacheFirstUpdate: Every time a resource is requested, it is served from the cache and then cache is updated in the background so that user gets the latest data next time.

    PS - we will increase the list going forward.

    Install

    npm i sw-helper

    DownloadsWeekly Downloads

    6

    Version

    3.0.9

    License

    none

    Unpacked Size

    34.7 kB

    Total Files

    32

    Last publish

    Collaborators

    • minaseem