Click here to Skip to main content
13,588,909 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

3.6K views
Posted 8 Apr 2016
Licenced CPOL

DOMSnap Offline your VIEWs

, 8 Apr 2016
Rate this:
Please Sign up or sign in to vote.
DOMSnap Offline your VIEWs

Editorial Note

This article is for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers

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 resuming 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 install the package:
    npm install --save domsnap

    and require it in your files:

    var DOMSnap = require('domsnap');

Examples

//init DOMSnap
var DS = DOMSnap({
  onReady: function(){
    console.log('DOMSnap is ready');
  }
});

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

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

domsnap

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.

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 stores 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

Returns DOMSnap

.resume(selector, options)

Set the HTML of the element matches the selector [and capture id] by its 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.1
DS.watch('#main');

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

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

//e.g.4
DS.watch(['#main', '#another']);//watch multi elements

Returns DOMSnap

.get(selector, id)

Returns 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 will be the default snapshot if it's not specified

Returns string html

.getAll(selector)

Returns 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)

Removes 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

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)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

tidelgl
Web Developer
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04-2016 | 2.8.180615.1 | Last Updated 8 Apr 2016
Article Copyright 2016 by tidelgl
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid