sia.hackernoon.com

unbug/DOMSnap_DOMSnap - Offline web pages by persist DOM to IndexedDB/WebSQL_github.com

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](https://github.com/unbug/DOMSnap/tree/master/dist) 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 = DOMSnap({onReady: function(){console.log('DOMSnap is ready');}});

//capture snapshot html of #mainDS.capture('#main');//capture with specified capture idDS.capture('#main', {id: 'my_id'});

//set the html of #main by it's captured snapshot htmlDS.resume('#main');//set by specified capture idDS.resume('#main',{id: 'my_id'});

APIs

DOMSnap(config)

Initialize DOMSnap

Parameters

config object [optional]
config.onReady function will be called when DOMSnap is ready
config.version number Version control, Nonzero. Update is required if web app has been updated. Default is 1
config.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.
config.expires number Milliseconds of how long every snapshot will expires, default is 1 week. Note, new snapshots will never expires until the page reload.

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 element
options object [optional]
options.id string or function capture id, if html is not null set id to null to store html as the default snapshot
options.html string or function snapshot html, set id to null to store html as the default snapshot
options.expires number Milliseconds of how long the snapshot will expires. Same value as initialize DOMSnap if it's not specified.

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 element
options object [optional]
options.id string or function capture id, if html is not null set id to null to store html as the default snapshot
options.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 id
options.html string or function snapshot html

Examples

//e.g.1DS.watch('#main');

//e.g.2DS.watch('#main',{id: 'my_capture_id',//capture idhtml: 'my_snapshot_html'//snapshot html});

//e.g.3DS.watch('#main',{id: function(selector){ return 'generated_capture_id_for_'+selector;}, //return capture idhtml: function(selector){ return 'generated_snapshot_html_for_'+selector;} //return snapshot html});

//e.g.4DS.watch(['#main', '#another']);//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 element
id 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 element
id 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

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising &sponsorship opportunities.

To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!