Motivation

As we can see, web surfing became more mobile and there is no guarantee that your user will always on 4g/5g connection, so here we should deliver to our users some offline functionality. This library will help you easily add offline cache of all GET request for your app. Without complicated setup, a lot of settings and any other things, simple resource caching.

Installation

npm i js-static-cache

Usage

All is you need it's array of resources or URL's to be cached, you can find plugin or library that will handle this job for you by your build lib (parcel, webpack, etc).

Next create (if you don't do it already) service worker file and instantiate StaticCacheController at start of script.

Don't forget add fetch event listener to globalObject with controller handler

import { StaticCacheController } from "@essaenko/js-static-cache";

const controller: StaticCacheController = new StaticCacheController({
  version: 1, // Required field: version will helps you remove old cache and recreate storage with new one
  name: 'myAppCache', // Optional field: you can name cache for your app to exactly know where your data stored, default name is 'static_cache_controller'
  manifest: ['/', '/index.js', '/index.css', '/api/json/news'], // Required field: array of assets or url's to be cached
  shouldProcessRequests: true, // Optional field: if you want to cache all sent GET requests - set this field to true, false by default
  debug: true // Optional field: This option can get you some information for debugging
});

self.addEventListener('fetch', controller.onFetch);

StaticCacheController - realises singleton pattern, if you'll try to create more than one instance it will return you existed one

Examples

You can find some examples in folder 'examples' Just run npm run serve:examples and navigate to http://localhost/

Commands

npm run watch - ts build watcher

npm run build - builds project by ts-compiler

npm page

https://www.npmjs.com/package/js-static-cache