cachee

Cachee is a simple library that helps developer cache resources and requests and reuse them during a long lived application. That way if the app looses connectivity during usage the user will not experience any problems

Install

bower install --save cachee

Usage

<!-- Format: -->
<!-- <tag-name cachee="<attr>:<resource-url>"></tag-name> -->
<img cachee="src:/my-resource1" />
<img cachee="src:/my-resource2" />
<img cachee="src:/my-resource3" />
 
<script>
  cachee.cache([
      cachee.resource('/my-resource1'),
      cachee.resource('/my-resource2'),
      cachee.resource('/my-resource3')
  ]).then(function() {
      //resources loaded
      cachee.load(); or cache.load(myElem);
  });
</script>

Documentation

cachee : object

A namespace that holds methods to help cache data inside blob urls

Kind: global namespace

• cachee : object
  • .cache(cacheRequests) ⇒ Promise
  • .load([elem])
  • .request(opt) ⇒ Promise
  • .resource(url, opt) ⇒ Promise
  • .readResource(url, [type]) ⇒ Promise
  • .writeResource(id, content, [mimeType]) ⇒ Promise
  • .deleteResource(id)
  • .$$(context, selector) ⇒ Array

cachee.cache(cacheRequests) ⇒ Promise

cache resource requests

Kind: static method of cachee

| Param | Type | Description | | --- | --- | --- | | cacheRequests | Array | list of chache requests |

Example

<!-- Format: -->
<!-- <tag-name cachee="<attr>:<resource-url>"></tag-name> -->
<img cachee="src:/my-resource1" />
<img cachee="src:/my-resource2" />
<img cachee="src:/my-resource3" />
<img cachee="src:custom-resource" />

<script>
 cachee.cache([
     cachee.resource('/my-resource1'),
     cachee.resource('/my-resource2'),
     cachee.resource('/my-resource3'),
     cachee.writeResource('custom-resource', 'Custom Content', 'image/png')
 ]).then(function() {
     //resources loaded
     cachee.load(); or cache.load(myElem);
     // => <img src="blob:http://...1" />
     // => <img src="blob:http://...2" />
     // => <img src="blob:http://...3" />
     // => <img src="blob:http://...4" />
 });
</script>

<!-- Using deep attribute set and template attribute -->
<!-- Format -->
<!-- <tag-name cachee-tpl="my url resource ${<attr>}" cachee="<attr>:<resource-url"></tag-name> -->
<div cachee="style.backgroundImage:/my-resource1" cachee-tpl="url(${style.backgroundImage})"></div>

<script>
 cachee.cache([
     cachee.resource('/my-resource')
 ]).then(function() { 
     cachee.load(); // => <div style="background-image: url('blob:http://...')" cachee-tpl="url(${style.backgroundImage})"></div>
 });
</script>

cachee.load([elem])

load specfic resources

Kind: static method of cachee

| Param | Type | Default | Description | | --- | --- | --- | --- | | [elem] | Element | document | root element or document |

cachee.request(opt) ⇒ Promise

send an http request

Kind: static method of cachee

| Param | Type | | --- | --- | | opt | Object |

Example

//get request
cachee.request({
 url: '/example/resource',
 method: 'GET',
 responseType: 'arraybuffer'
}).then(function(xhr) {
 console.log(xhr.response);
});

// post request
cachee.request({
 url: '/my-resource',
 method: 'POST',
 data: FormData,
 headers: {
     'Content-type': 'multipart/form-data'
 }
}).then(handle);

cachee.resource(url, opt) ⇒ Promise

Sends a resource request and if the resource is not in cache it will cache it and retun it's blob url

Kind: static method of cachee

| Param | Type | Description | | --- | --- | --- | | url | String | resource url | | opt | Object | http request options |

cachee.readResource(url, [type]) ⇒ Promise

Reads a resource and returns a specific type

Kind: static method of cachee

| Param | Type | Default | Description | | --- | --- | --- | --- | | url | String | | the resource url | | [type] | String | "text" | http compliant responseType string |

Example

cachee.readResource('/my-resource', 'arraybuffer').then(function(data) {
 console.log(data);
});

cachee.writeResource(id, content, [mimeType]) ⇒ Promise

Write a resource to the cache table

Kind: static method of cachee
Returns: Promise - the blob url in a promise

| Param | Type | Default | Description | | --- | --- | --- | --- | | id | String | | unique identifyer | | content | Mixed | | the resource content | | [mimeType] | String | "text/plain" | the resource's mime type |

Example

cachee.writeResource('hello-world', 'Hello, World', 'text/plain');

// reading the resource

cachee.readResource('hello-world', 'text').then(function(data) { 
 console.log(data); // => "Hello, World"
});

cachee.deleteResource(id)

removes a resource form cache

Kind: static method of cachee

| Param | Type | | --- | --- | | id | String |

Example

cachee.writeResource('hello-world', 'Hello, World', 'text/plain');
...
// delete the resource after we are done with it
cachee.deleteResource('hello-world');

cachee.$$(context, selector) ⇒ Array

Dom helper method

Kind: static method of cachee

| Param | Type | | --- | --- | | context | Element | | selector | String |

Example

cachee.$$(myElement, '.item-selected').forEach(...);

Contribution

Pull requests, Bug reports and feature requests