DOMSnap
Offline web pages by persisting DOM to IndexedDB/WebSQL. Please try the demo.
How it works
HTML5 provides LocalStorage, IndexedDB, and window.caches to build offline web apps. But all of these technologies, we can't miss local database. DOMSnap takes full advantage of offline technologies. Storing HTML to local IndexedDB/WebSQL and resumeing when you're offline. With DOMSnap, web pages can resume to their last state with less request to the server and less template render. Think offline is a long way out, why not just give DOMSnap a try?
Usage
1.Include dist/DOMSnap.min.js
file in your HTML
<script src="DOMSnap.min.js"></script>
2.Or insttall the package
npm install --save domsnap
and require it in your files
var DOMSnap = require('domsnap');
Examples
//init DOMSnapvar DS = ; //capture snapshot html of #mainDS;//capture with specified capture idDS; //set the html of #main by it's captured snapshot htmlDS;//set by specified capture idDS;
APIs
DOMSnap(config)
Initialize DOMSnap
Parameters
config
object [optional]config.onReady
function will be called when DOMSnap is readyconfig.version
number Version control, Nonzero. Update is required if web app has been updated. Default is 1config.scope
string "host|path|or any string value". "host": location.host; "path": location.host+location.pathname; default is "path"config.storeType
string Data store to use. "IndexedDB" or "WebSQL", if not defined, use "WebSQL" for iOS and "IndexedDB" for others.
Returns object {{capture: capture, resume: resume, get: get, getAll: getAll, remove: remove, clear: clear}|*}
.capture(selector, options)
capture snapshot html of the element matches the selector and store the result with a capture id
Parameters
selector
string selector of the elementoptions
object [optional]options.id
string or function capture id, if html is not null set id to null to store html as the default snapshotoptions.html
string or function snapshot html, set id to null to store html as the default snapshot
Returns DOMSnap
.resume(selector, options)
set the html of the element matches the selector [and capture id] by it's captured snapshot html
Parameters
selector
string selector of the elementoptions
object [optional]options.id
string or function capture id, if html is not null set id to null to store html as the default snapshotoptions.fallback
function a callback function, will be called if no snapshot matched
Returns DOMSnap
.watch(selector, options)
watch and auto capture the element matches the selector
Parameters
selector
string or array selector[s] of the element[s]options
object [optional]options.id
string or function capture idoptions.html
string or function snapshot html
Examples
//e.g.1DS; //e.g.2DS; //e.g.3DS; //e.g.4DS;//watch multi elements
Returns DOMSnap
.get(selector, id)
retrun the captured snapshot html of the element matches the selector and capture id
Parameters
selector
string selector of the elementid
string [optional]capture id, the result be the default snapshot if it's not specified
Returns string html
.getAll(selector)
retrun all the captured snapshots html of the element matches the selector
Parameters
selector
string selector of the element
Returns object all snapshots as object - e.g. {DEFAULT_CAPTURE_ID: 'html of DEFAULT_CAPTURE', my_id: 'html of my_id'}
.remove(selector, id)
remove the captured snapshot html of the element matches the selector [and capture id]
Parameters
selector
string selector of the elementid
string [optional]capture id, will empty all snapshots if it's not specified
Returns DOMSnap
.clear(version)
clear all captured snapshots
Parameters
version
number [optional]Same value as initialize DOMSnap if it's not specified.
Returns DOMSnap
Roadmap & Make contributions
- on-going Auto watch and auto resume.
- on-going Auto clear expired capture.
- Resume with DOM diff.
- on-going Events(ready, before resume, after resume, before capture, after capture)
- Replace lovefiled with a lightweight IndexedDB/WebSQL wrapper.
Build
- install requirements run
npm install
- build and watch run
gulp
Find me
Dependencies
LICENSE
The MIT License (MIT)
Copyright (c) <2016>