离线应用的一种设计方案

所谓离线应用，就是在离线时能够把数据存储到本地，在线时同步到服务器上。HTML5提供了程序缓存和本地存储两种机制来实现， 可以用cache manifest和indexedDB来搜索相关内容。各个浏览器对此支持都不太一样，本文尝试出一种可行的方案。 程序缓存 程序缓存比

所谓离线应用，就是在离线时能够把数据存储到本地，在线时同步到服务器上。HTML5提供了程序缓存和本地存储两种机制来实现， 可以用cache manifest和indexedDB来搜索相关内容。各个浏览器对此支持都不太一样，本文尝试出一种可行的方案。

程序缓存

程序缓存比较容易设置，只要写一个.manifest文件，服务器空间，再把它写到html元素的属性就可以了。我遇到的一些问题：

因此对离线应用而言，我认为程序缓存的作用就是保存静态文件。

本地存储与数据库

据说浏览器限制本地存储为5M，所以就不考虑了。主要是利用浏览器支持的indexedDB来完成数据操作。

数据流/对象交互设计

浏览器中的视图view一般直接从服务器中存取数据。考虑了离线应用之后，需要加入一个中介mediator，如上图所示，为视图屏蔽掉在线与离线的区别，简化视图设计。在此有两者实现方式：

1.        以原有的在线方式为主，在原有的数据流上开分路。好处是不改变原有的数据格式，服务器空间，不中断原来网站的运行。

2.        以离线方式为主，无论在线与否，视图都只对indexedDB进行数据存取，在后台进行indexedDB与服务器的数据复制replication。

方式1的测试成本要比方式2高一些。方式1要测试视图到服务器，视图到indexedDB和indexedDB到服务器三条路径。方式2只要测试视图到indexedDB和indexedDB到服务器两条路径。因此我选择了方式2。

数据复制replication

视图到indexedDB的数据存取理论上是比较容易的，实际上有很多莫名其妙的地方。这里只讨论数据复制。需要考虑的是数据的版本控制。

复制前没人改过数据，本地数据版本与服务器版本一致，开启数据复制过程。

复制前有人已经改过数据了，本地数据版本比服务器版本低。此时可提示用户选择如何进行数据操作。这种情况我没有测试。

复制过程需要考虑数据表中每一条数据的状态，其转换图如下：

总结

从本文的方案可以看出，离线应用的难题在于本地数据与服务区数据的同步，网站空间，最好能得到浏览器的支持。