| CARVIEW |
Navigation Menu
-
Notifications
You must be signed in to change notification settings - Fork 3
APIs
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' |
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 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" data-cache-url="css/style.css">
<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">
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>
For configuration, use meta[name="portable-cache"] explained at
Configuration.
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
Load resource of specified and resolved URL from cache if possible, otherwise from remote server. Returns itself as an argument of callback function.
Reads cache from a storage. Returns as an argument of callback function (null if not found).
Creates cache in a storage.
TBD
TBD
TBD
TBD
PortableCache fires pcache-ready event after loading link and script
resources.