Home  >  Article  >  Database  >  离线应用的一种设计方案

离线应用的一种设计方案

WBOY
WBOYOriginal
2016-06-07 17:56:371268browse

所谓离线应用,就是在离线时能够把数据存储到本地,在线时同步到服务器上。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的数据存取理论上是比较容易的,实际上有很多莫名其妙的地方。这里只讨论数据复制。需要考虑的是数据的版本控制。

  • 复制前没人改过数据,本地数据版本与服务器版本一致,开启数据复制过程。
  • 复制前有人已经改过数据了,本地数据版本比服务器版本低。此时可提示用户选择如何进行数据操作。这种情况我没有测试。
  • 复制过程需要考虑数据表中每一条数据的状态,其转换图如下:

    总结

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

    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn