HTML5在移动Web App中的应用研究

2017-05-30万红贾贻然王若飞朴雪��

科技风 2017年24期

万红　贾贻然　王若飞　朴雪��

摘要：在互联网科技高速发展的时代，HTML5因其强大的跨平台能力、自适应的网页显示、丰富的多媒体支持、实时更新的用户体验，为移动WebApp的开发注入了新的活力。移动应用开发人员应随互联网发展的步伐，充分利用HTML5优势，不断完善WebApp的功能，为用户带来更好的体验。

关键词：HTML5；移动Web App；用户体验

App开发随着智能手机的普及，人们对各种移动应用的需求也在迅速增加，截至2017年6月，我国网民规模达到7.51亿，互联网普及率为54.3%，我国手机网民规模达7.24亿，网民中使用手机上网的比至96.3%[1]。不同的操作系统和浏览器的不兼容使得移动应用开发人员不得不进行多次开发，移动应用开发难度和成本急剧增加，HTML5的出现使开发跨平台的Web App开发成为可能。

1 HTML5的特点

HTML技术自20世纪90年代以来经历了多个发展阶段，如图1所示。在2014年10月29日，HTML5标准规范公开发布，HTML5在全面的表示Web内容的同时还实现了跨平台的Web应用，Web标准迎来了巨大的革新，其主要特点体现在以下几个方面：

（1）结构化的语义标签。HTML5提供了header、footer、hgroud、section、article、navigation等标签，使文档的可读性和清晰性大大提高，更便于团队开发和维护。

（2）有效的离线存储。sessionStorage和localStorage提供了与cookies对应的功能。利用IndexedDB模块保存数据，OfflineAppCache通过缓存的方式将资源下载到本地[2]，用户处于离线状态也依然能够使用移动Web App。与cookie将内容随着请求一同发送到服务器不同，WebStorage中的数据只是存储在本地，并不会与服务器发生任何交互，大大避免了流量资源的浪费。

（4）直接的多媒体支持。

在HTML5出现之前，在网页上播放视频、音频、动画等，都需要借助如Flash、RealMedia和QuikTime等第三方插件。这类插件安装使用繁琐，不仅使网页的受众受到了限制，还存在一定的安全隐患。HTML5直接提供了video和audio标签支持多媒体内容，无需安装插件就可直接在浏览器上播放音视频，极大地方便了用户。

（5）丰富的应用API。

HTML5提供了若干驱动设备API函数，如摄像头API、地理位置定位API、重力感应API、触控交互事件等，为Web App提供了调用摄像头、地理定位、文件存储等终端功能操作的接口，极大地提升了Web App访问和调用终端设备的能力。

（6）多设备跨平台特性。HTML5是万维网联盟公开的技术，几乎所有的浏览器都会尽力支持HTML5，这就使得HTML5可以跨平台使用。开发一款HTML5的游戏，可以很轻易地移植到Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到AppStore或GooglePlay上[3]。HTML5的强大之处还在于它能够实现移动终端上的跨平台，在iOS、Android、blackberry等各大手机平台上实现对不同屏幕尺寸、分辨率的网页自适应。

2 移动Web app

目前主流移动应用主要有NativeApp，Web App和Hybrid App三种，如下图2所示。

（1）Native App。

Native App是指针对Windows、IOS、Android等操作系统利用不同的框架和编程语言开发的App，由云服务器数据和客户端构成，数据的运算和存储均在本地实现，需要用户下载安装才能使用，且每次获取最新的功能服务都需要更新应用。Native App调用系统自带API，响应快，功能丰富，界面友好，用户交互体验最好。

（2）Web App。

Web App是基于Web系统的应用，直接运行在Web引擎上，不受平台限制，无须下载安装，是一种全新的用户体验。Web App具有App的特性，更有Web的特性，可以像传统网页一样互相链接，实现Web App之间的直接跳转。基于HTML5的Web App更可以实现离线存储、音视频播放、照相机调用、手机定位等Native App的功能。

（3）Hybrid App。

Hybrid App介于Native App和Web App两者之间，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”[4]。Hybrid App只有一个UI WebView，里面访问Web App，用户体验上与Native App更为相似，同时具有基于HTML5的跨平台开发的低成本优势。

3 HTML5在移动Web App中的应用

（1）移动终端浏览器对HTML5的支持。

HTML5通常指包括HTML5，CSS3和JavaScript在内的一套技术组合[5]。Web App是基于Web的系统应用，Web App需要调用终端的应用API以实现各项功能提供良好的用户体验，所以浏览器对HTML5的各项技术的支持十分重要。笔者就目前手机端各大浏览器对HTML5技术的支持情况做了一些调查和统计，结果如下表所示。目前手机端iOS Safari 10.3、Chrome 59、UCBrowser 11.4、AndroidBrowser4.3、QQ Browser 1.2等浏览器对HTML5都提供了较好的支持。

（2）基于HTML5的Web App的实现。

Web App采用了UI界面——前端数据层——服务器——数据库的四层结构，如下图3所示。前端采用HTML+CSS结构构建界面，后端用PHP和MySQL实现数据存储和交互。在前端HTML提供页面框架，CSS负责页面表现，JavaScript添加动态功能，AJAX技术实现动态地更新页面内容。

4 结语

HTML5从本质上改变了移动App的开发方式，它的跨平台、低成本、随时动态更新优势备受移动开发者亲睐，有效的离线缓存、强大的多媒体能力、无需安装等特性极大的提升了用户体验，相信以HTML5为基础的移动Web App將会成为移动应用中的新趋势。

参考文献：

[1]中国互联网络中心.第40次中国互联网络发展状况统计报告[EB/OL].

[2]于洋.浅析HTML5的特点及其在移动Web App中的应用[J].计算机光盘软件与应用，2014，（24）：288+290.

[3]网易科技报道.Opera首席标准官谢子斌：HTML5的三大优点[EB/OL].

[4]尚鲜连，王勤宏，徐福扬，陆化梅，蔡道琦.基于HTML5的移动Web App开发研究[J].江苏科技信息，2017，（15）：3739.

[5]章斓.基于HTML5的Web App的开发与探索[J].长沙大学学报，2015，（05）：5053.

基金项目：江苏省大学生创新创业训练计划项目（项目编号：201710313047Y）

作者简介：万红（1995），女，江苏徐州人，本科在读，研究方向：物联网工程。