domsnap
Version:
Offline web pages by persisting DOM to IndexedDB/WebSQL.
180 lines (178 loc) • 5.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DOMSnap</title>
<meta name="description" content="Offline web pages by persisting DOM to IndexedDB/WebSQL" />
<meta name="keywords" content="DOMSnap, offline html, application cache, window.caches, IndexedDB, WebSQL">
<style>
html,body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
color: #555;
background-color: #eee;
}
a,a:visited{
color: #3498db;
text-decoration: none;
}
p{
margin: 0.3em 0;
}
h1,h2,h3,h4,h5{
margin: 0.5em 0;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
button {
padding: 5px;
margin: 2px;
border: 0;
color: #fff;
background: #3498db;
text-decoration: none;
cursor: pointer;
}
button:hover {
background: #3cb0fd;
text-decoration: none;
}
button.green{
background-color: #4CAF50;
}
button.green:hover{
background-color: #74A976;
}
.container{
min-height: 100%;
padding: 20px 40px;
background: #fff;
}
.container>header{
vertical-align: middle;
}
.container>header>div{
display: inline-block;
}
.container>header .title{
width: 70%;
}
.container>header .links{
width: 28%;
text-align: right;
}
[contenteditable]{
height: 80px;
margin: 10px 0;
padding: 10px;
border: solid 1px #FFC107;
background-color: #FBFBE8;
}
@media screen and (min-width: 832px) {
.container {
width: 800px;
margin: 0 auto;
}
}
</style>
</head>
<body ontuchstart="">
<main class="container">
<header class="clearfix">
<div class="title"><h1>DOMSnap</h1></div>
<div class="links">
<a href="https://github.com/unbug/DOMSnap">GitHub</a>
</div>
</header>
<hr>
<h3>
<p>DOMSnap helps you to offline web pages by persisting DOM to IndexedDB/WebSQL.</p>
</h3>
<p>HTML5 provides LocalStorage, IndexedDB, and <a href="https://googlechrome.github.io/samples/service-worker/window-caches/">window.caches</a> to build offline web apps.
But all of <a href="http://www.html5rocks.com/en/features/offline">these technologies</a>, we can't miss local database.
DOMSnap takes full advantage of <a href="http://www.html5rocks.com/en/features/offline">offline technologies</a>.
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?</p>
<section id="demo1">
<h4>Demo 1</h4>
<div contenteditable="true">
Please type something at here and click Capture to take a snapshot of this page.Then just reload it and click Resume to see what you just typed.
</div>
</section>
<button onclick="capture()" title="Capture for default">Capture</button>
<button onclick="capture(2)" title="Capture with specified id 2">Capture 2</button>
<button onclick="preCapture()" title="Capture with specified html">Pre-Capture</button>
<button onclick="watch()" title="Watching change and auto Capture">Watch</button>
<button class="green" onclick="resume()" title="Resume default">Resume</button>
<button class="green" onclick="resume(2)" title="Resume Capture 2">Resume 2</button>
<button class="green" onclick="resume('pre_id')" title="Resume Pre-Capture">Resume Pre</button>
<section id="demo2">
<h4>Demo 2</h4>
<div contenteditable="true">
Please type something....
</div>
</section>
<button onclick="watchAll()" title="Watching change and auto Capture">Watch all demos</button>
<button class="green" onclick="resumeAll()" title="Resume default">Resume all demos</button>
</main>
<script src="dist/DOMSnap.min.js"></script>
<script>
var DS = DOMSnap({
onReady: function () {
console.log('DOMSnap is ready');
}
});
function capture(id){
DS.capture('#demo1',{id: id});
console.log('captured');
}
function preCapture(){
DS.capture('#demo1',{
id: 'pre_id',
html: '<h4>Demo 1</h4>'+
'<div contenteditable="true">This content was pre rendered!</div>'
});
console.log('captured');
}
function watch() {
DS.watch('#demo1');
console.log('watched');
}
function customWatch() {
var id = 0;
DS.watch('#demo1',{
id: function(selector){ return id++},
html: function(selector){
return '<h4>Demo 1</h4>'+
'<div contenteditable="true">This content was generated for id '+id+'</div>'}
});
console.log('watched');
}
function resume(id){
DS.resume('#demo1',{id: id});
console.log('resumed');
}
function watchAll() {
DS.watch(['#demo1','#demo2']);
console.log('watched');
}
function resumeAll(){
DS.resume('#demo1');
DS.resume('#demo2');
console.log('all resumed');
}
</script>
</body>
</html>