APIs

Configuration

Configuration is set by using meta[name="portable-cache"]. The content attribute accepts comma separated parameters as listed below.

<meta name="portable-cache" content="version=20130627, preferred-storage=localstorage, root-path=/portable-cache, debug-mode=yes, auto-init=no>

Key	Value	Default	Details
version	string	''	Required. String that indicates current version. If this differs from cookie stored previous version, resources will be updated.
preferred-storage	(auto|filesystem|idb|sql|localstorage)	'auto'	Optional. Preferred storage to use. If the preferred storage is not available on the browser, PCache gracefully falls back.
root-path	string	'/'	Optional. Cache version usually is tied to the URL path you are on. Specify a root path when you want the cache to be restricted to the directory.
auto-init	(yes|no)	'yes'	Optional. You can manually bootstrap PortableCache by setting this 'no'.
debug-mode	(yes|no)	'no'	Optional. Enables debug messages in console if 'yes'

Declarative APIs

Caching and loading resources

All you have to do is to replace URL related attributes (such as src, href) of the resource to data-cache-url. Currently, following HTML tags are supported.

script

<script data-cache-url="js/main.js"></script>

Use async attribute to execute the script as soon as it gets loaded. Otherwise, scripts will be executed in DOM tree order. defer attribute is not supported (for natural reason).

<script data-cache-url="js/main.js" async></script>

link[rel="stylesheet"]

<link rel="stylesheet" data-cache-url="css/style.css">

img

<img data-cache-url="img/image.jpg">

Add lazyload attribute to defer loading of images until user actually see them in viewport.

<img data-cache-url="img/image.jpg" lazyload>

Use data-cache-srcset with srcset semantics to load responsive images depending on viewport.

<img data-cache-url="img/image.jpg" data-cache-srcset="img/image-320.jpg 320w, img/image-640.jpg 320w 2w, img/image-640.jpg 640w">

Per element versioning

You can optionally specify cache versions per element. These versions will override global version specified in meta[name="portable-cache"].

<img data-cache-url="img/image.jpg" data-cache-version="20131228">

As a technique, by assigning empty string to data-cache-version, you can skip caching resource and apply lazyload and / or responsive image.

<img data-cache-url="img/image.jpg" data-cache-srcset="img/image-320.jpg 320w, img/image-640.jpg 320w 2w, img/image-640.jpg 640w" data-cache-version="" lazyload>

Imperative APIs

For configuration, use meta[name="portable-cache"] explained at Configuration.

CacheEntry

Properties

url URL of this resource that can replace src when fallback.
src Resource URL to be replaced with src or href
tag HTML tag associated with this CacheEntry
type Request type on XHR (binary|json|text)
mimetype MIME Type of remote resource.
version Cache version string.
content Resource content which is either Blob or text.
elem Original DOM Element.
lazyload Boolean value that indicates if lazyload is requested.
async Boolean async flag for script tag

Methods

load(callback)

Load resource of specified and resolved URL from cache if possible, otherwise from remote server. Returns itself as an argument of callback function.

readCache(callback, errorCallback)

Reads cache from a storage. Returns as an argument of callback function (null if not found).

createCache(cacheExists, callback, errorCallback)

Creates cache in a storage.

removeCache()

TBD

fetch(callback, errorCallback)

TBD

constructDOM(callback)

TBD

getContentAs(type, callback, errorCallback)

TBD

Events

PortableCache fires pcache-ready event after loading link and script resources.