基于移动智能终端的离线缓存技术研究

王丽娜++孙艳华

摘要：移动互联网技术迅速发展，移动应用开发备受关注，但存在问题是移动网络的不稳定性使用户断网后无法访问应用数据，论文提出一种基于移动智能终端的离线缓存技术，应用HTML5等终端技术相结合智能终端WebView组件技术在移动终端提出一种新的数据存储机制，有效解决了移动网络不稳定造成移动应用不可用的问题。

关键词：移动智能终端；离线缓存；JS服务接口；跨平台；HTML5

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）33-0027-02

近年来，移动互联网技术迅猛发展，移动应用开发借助移动互联网技术正处于赤手可热的阶段，很多PC端应用已经移动智能终端化。智能终端位置不固定，依赖无线网络信号，目前移动互联网络的可靠性不够强大，造成移动应用断网后无法继续访问数据且无法继续使用，为解决这一问题，基于移动智能终端离线缓存技术的研究是有必要的。

在移动智能终端采用基于Web的移动应用开发可解决移动系统的差异性问题，实现跨平台一次开发多处安装。传统Web离线缓存Cookie技术存在不足：存储空间小，费流量，存在一定的安全隐患。针对移动智能终端系统及网络特点，本文提出一种基于HTML5、JavaScript等终端技术的移动智能终端离线缓存技术架构，解决移动网络不稳定情况下用户能够继续访问或操作移动应用。

1移动智能终端离线缓存技术分析

1.1 HTML5在线侦测

HTML5技术推出对于互联网Web开发是一次技术飞跃，虽然没有制定统一的标准但已被广大浏览器支持，对于移动互联网来说也促进了移动应用的推陈出新。HTML5技术突破了移动应用必须本地开发的局限性，其新特性和和跨平台特点都迎合了移动系统平台多样性的需要。HTML5具有在线监测网络状态的新特性，主要是通过navigator.online和online/offline事件进行。前者通过返回值true或false得知移动智能终端与服务器连接状态，后者是通过事件触发HTML中的标签元素进而调用JavaScript服务接口，决定远程调用数据是否缓存到本地。

在移动智能终端离线缓存技术架构中，要掌握移动智能终端与服务器的连接状态，需实时检测网络状态。利用HTML5在线侦测服务监听online/offline事件，根据监听结果触发HTML标签进而调用JavaScript服务调度接口，简称JS接口。若移动APP与服务器连接良好，则接口请求远程数据；若与服务器断开，则接口调用数据存储机制将远程数据或文件进行缓存，且此时用户的操作请求或更新都会存储到本地。

1.2 JavaScript接口封装

在移动应用的客户端开发过程中Web技术与本地WebView组件相结合，使其具有本地应用特色给用户更好地体验，应用与本地组件的交互在本技术架构中通过JS服务接口实现。采用JavaScript语言实现事件服务接口封装，服务接口是移动平台本地组件与应用服务器端进行数据交互的一个中间通道，根据网络检测状态事件调用JavaScript服务接口，对远程数据实现本地存储与否。图1为离线缓存技术架构中服务接口模块：

若在断网状态下，数据有更新操作同样缓存到本地，网络重新建立时更新数据会通过接口同步到远程应用服务器。

1.3移动智能终端数据存储机制

HTML5提供了DOM Storage和Web SQL Database两种存储机制，并且提供maninfest属性以引用cache.manifest文件，该文件声明了需要本地缓存的所有资源文件或数据。针对移动智能终端的特点，若直接采用HTML5缓存技术离线全部数据都存在自带数据库中，鉴于移动网络不够强大会造成应用反应迟钝且耗费大量流量，增大用户负担。在本文提出的离线缓存技术架构中借鉴HTML5缓存技术设计了一种适用于移动智能终端的数据存储机制，把数据分为交互数据和资源数据。

资源数据主要包括图片、CSS文件、JavaScript接口文件等，在移动平台开发打包过程中直接将这些文件放到本地。交互数据为在用户操作过程中请求、响应的数据，将数据封装为JSON格式以文件形式存于本地，需要缓存的数据文件都会在manitest文件中记录。JSON格式化数据是一种以（key，value）形式处理轻量级的数据交换格式，在数据传输过程中占用流量少易于存储，恰好适应移动互联网及各移动平台的特点。图2为移动智能终端数据存储机制。

2应用于移动智能终端的离线缓存技术实现

2.1移动智能终端离线缓存技术架构

基于移动智能终端离线缓存技术架构如图3所示，此技术主要应用在网络断开时用户能够正常访问应用。在此技术架构中，根据Mamifest离线缓存文件将基于JS封装的服务接口、页面样式表、页面HTML会以文件的形式加载到移动终端本地，其中用户的每一次请求都会将本地数据进行更新。远程服务器接口将交互数据被封装为JSON数据格式，通过JavaScript接口通道缓存到移动应用本地存储空间中。HTML5在线监听网络状态，监听到offline事件后，此时用户发起请求Web页面做出响应，页面展示数据将从本地缓存文件或数据库中读取。在此过程中HTML页面基于WebView组件展示，Web页面与本地数据进行交互，符合本地移动应用响应快的特点，满足用户的体验要求。

在本技术架构中，离线状态下若用户有数据需上传同样通过JavaScript接口将数据封装为JSON数据格式，首先由移动智能终端获取并保存至本地以文本文件格式保存至本地。此时数据在文本文档中被封装为JSON数据格式串，如此WebView组件中不必处理与本地数据库之间的复杂数据处理逻辑，在联网时文件中的数据将自动提交至远程服务器。

3总结

本文在传统离线缓存技术的基础上提出了基于移动智能终端的离线缓存技术，传统Web技术与移动开发技术相结合，WebView控件加载HTML网页，满足当前移动互联网技术的发展同时也克服传统离线存储的局限性，在移动网络不稳定的情况下，为移动应用提供一种有效的离线缓存方法。

参考文献：

[1] 黄永慧，陈程凯. HTML5在移动应用开发上的应用前景[J].计算机技术与发展，2013，23（7）：207-210.

[2] 郑艳.HTML5本地存储和离线缓存机制应用研究[D].武汉：武汉理工大学，2014：4-13.

[3] 刘宇.基于跨平台的移动应用开发框架研究[D].北京：北京交通大学，2014：4-16.

[4] 杨安宁， 周莹， 吕康.一种Android平台GIS软件的新型数据缓存策略的实现[J].计算机与现代化，2012（10）：46-49.

[5] 王明超.基于脚本的客户端软件结构化存储技术研究[J].计算机技术与发展，2010，20（2）：25-28.

[6] 吴广才，郑杰生.HTML5技术在移动管理驾驶舱中的应用[J].现代计算机，2014（1）：60-63.

[7] 刘斌.HTML5——未来网络应用的核心技术研究[J].自动化与仪表，2010（4）：30-33.

[8] 张玉晴，黄瑾娉.基于HTML5的跨平台移动应用关键技术的研究与实现[J].工业控制计算机，2013（3）：56-58.