Web app 离线新方案: DOMSnap - 网页快照离线存储和恢复

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3161 天前的主题，其中的信息可能已经有所发展或是发生改变。

#背景和基本原理

HTML5 提供了 LocalStorage, IndexedDB, 和 window.caches 来帮我们构建可 offline 的 web app. 但这些技术里我们都忽视了本地数据库. DOMSnap 则将其充分发挥之, 将 HTML 快照保存到本地的 IndexedDB/WebSQL,在页面离线或者网络不好时再恢复.通过 DOMSnap, web app 可以最大限度的离线页面的状态和减少网络请求和前端模板渲染. 离线的路还很长, 为何不试试 DOMSnap 呢?

DOMSnap GitHub DEMO

#目前的特点

DOMSnap API 非常简洁, capture 和resume 分别负责持久化快照和恢复
支持同一个元素保存多份快照
支持 watch 的方式自动保存快照
支持预先快照, 在用户没有产生相应交互之前就离线相应的页面结构以增加交互的流畅性
支持自定义快照, 方便 SPA 类 Web App 将快照与路由对应
支持作用域, 同一个域名下不同项目不会冲突
支持版本控制, 页面改版后不会冲突

#使用方法

方式 1. 页面中引入脚本

<script src="DOMSnap.min.js"></script>

方式 2. 安装包

npm install --save domsnap

然后包含到你的模块中

var DOMSnap = require('domsnap');

Examples

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

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

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

DOMSnap GitHub DEMO

domsnap