Magic Cache

Tiny lib with zero dependencies that can handle all GET requests, store them in Browser's Cache and return them back in case of connection issues (Offline, DNS Errors).
It's so simple to make your site available in offline as never before.
With the Magic Cache you can even preload important resources in any time.

The DEMO

Limitations

Cache API is available over HTTPS only. Time to switch to HTTPS!
Chrome 40+ / Firefox 44+ / Opera 24+ / Chrome for Android 49+

Installation

npm install --save magic-cache
# or
git clone https://github.com/pfrankov/magic-cache

Check the examples/react-webpack example if you are using the Webpack

// ES6
import {MagicCache} from "magic-cache";

// CommonJS
var MagicCache = require("magic-cache").MagicCache;

// Including via `script` tag
<script src="magic-cache.js"></script>

Then just copy sw.js and magic-cache-sw.js to the root directory (important) of your site.
Almost done. Now we need only one line of initializing code.

Usage

init(options)

Initializer. MagicCache will not work without it.
Can be executed only once.

|Option|Type|Default Value|Description| |---|---|---|---| |url|string|"./sw.js"| | |forceReload|boolean|false|Reload page if the registration of the ServiceWorker was failed (usually it happens at the first start)|

MagicCache.init();

// is the same as

MagicCache.init({
    url: "/sw.js"
});

Methods

onCached(callback)

Subscribe to an event when any request has gotten from the cache. Additionally executed after init method if the current status is Cached.

var cancelHandler = MagicCache.onCached(function(){
   console.log("Looks like you offline, but don't worry -- you are still geting cached pages"); 
});

// cancelHandler(); to obviously cancel the handler

onOnline(callback)

Subscribe to an event when any request has received from server. Additionally executed after init method if the current status is Online.

var cancelHandler = MagicCache.onOnline(function(){
   console.log("Online"); 
});

// cancelHandler(); to obviously cancel the handler 

add(request)

request: String, Object, Array of mixed Strings or Objects

Load and add the request resources to the offline cache. Useful for an important resources or on initialization step.
If passed an Object -- url field is mandatory. The other fields is the same as in the Request docs.

MagicCache.add(["/some-important-resource.html", {url: "/important-request/"}]);

MagicCache.add("/some-important-resource.jpg");

remove(request)

request: String, Object, Array of mixed Strings or Objects

The opposite of add method. Remove the request resources from the cache. Don't know why you might want that. Maybe after logout?

MagicCache.remove(["/some-important-resource.html", {url: "/important-request/"}]);

MagicCache.remove("/some-important-resource.jpg");

Properties

isCached

Boolean. Helps to understand what's going on in this particular moment.

if (MagicCache.isCached) {
    alert("Oh, no!");
}