摘要： 移动智能终端和移动网络在日益发展，而不同平台和浏览器的移动App开发成本加剧。为了满足人们对移动智能设备的需求，基于HTML5的移动应用大量涌现。
文章先介绍了HTML5的新特征，进而介绍了移动App的三种实现方式，对比分析了移动Web App的特点和优势，最后提出了基于HTML5的移动Web App开发的设计方案。
移动互联网络的迅速发展为智能移动设备的发展及广泛应用提供了有利的环境和空间。智能手机和其他移动智能设备持有量的迅速增长，人们的上网习惯已变成手机上网。截至2016年，中国网民规模达7.31亿，互联网普及率达到53.2%。其中，手机网民占比达95.1%，手机网民规模达6.95亿，增长率连续三年超过10%。
人们对移动应用的需求急剧增加，迫切需要将各种移动应用使用到工作、生活和娱乐等各种日常生活中来。目前移动端设备的操作系统（如iOS和Android）和浏览器不尽相同，升级换代频繁，导致开发App的成本大幅度增加，同时用户需要安装和应用不断升级，也使用户体验较差。跨平台和跨浏览器的问题使得很多App不得不针对各类设备进行多次开发，而HTML5的出现为解决这一问题注入了新的动力，更加速了HTML5在移动设备的普及，促进了移动应用的发展。
HTML5使快速开发各种移动Web App成为现实，其覆盖面广、简便快捷受到了个人及商业用户的青睐，如何实现这样的开发就是开发者需要研究的问题。
一、HTML5的主要特点
2014年10月29日，万维网联盟宣布HTML5标准规范公开发布。HTML5实现了跨平台的Web应用，引进了新功能，在移动设备上支持多媒体，从技术层面带来了革新。
（1）提供了语义化标签。语义化标签可增强文档的易读性，清晰明了。丰富的标签带给了网页更好的意义和结构，这样的网页对用户、对程序更有价值。
（2）有效支持离线存储。一般的Web都要求在线状态下浏览，如果离线状态下正常查看则必须要有离线存储支持才可。对离线存储技术和存储条件都要求较高，Web App则能够进行数据存储与交换业务，保证程序的正常运行。在开发中，该技术涉及以下3种功能实现：①离线资源缓存；②在线状态检测；③本地数据存储。
（3）3D/图形和特效技术。HTML5中的3D和图形渲染更高效、页面效果更加炫酷。Canvas是用于在网页中绘制位图的技术，对于Web App开发意义重大，支持绘制各种2D图形、图表、动画效果。在HTML5上创建3D图像也有多种方案。
（4）丰富多媒体的能力。音频视频能力的增强是HTML5的最大突破。支持网页端的Audio，Video等多媒体功能，与网站自带的APPS、摄像头、影音功能相得益彰。
（5）设备访问技术。增强了设备感知能力，使得Web应用在电脑、Pad、手机上均能使用。兼容各种不同类型、系列的移动设备的屏幕尺寸、分辨率、键盘类型、媒体摄录能力等。
总体架构的前端部分包括UI界面和前端数据层，UI界面层负责界面显示和用户交互，它在实现时使用了HTML，CSS，JavaScript等技术。前端数据层介于UI界面和后端之间，对前端数据的处理工作都封装在这里。前端数据层主要完成两方面工作。（1）与UI界面层：存储缓存数据，并提供接口供UI界面层调用；（2）与服务器端：根据用户的操作需求，将用户的操作封装成HTTP，调用服务端接口，并在服务端处理后以XML形式返回处理结果，根据解析处理结果更新数据缓存。
（6）提供丰富的支持Web应用扩展的API。HTML5提供的若干API，可操作移动设备硬件，如：地理位置感知API、运动感应事件、触控交互事件等。提供了Web App调用摄像头、邮件、地理定位、电话、短信、文件存储等终端功操的接口。
二、移动Web App
后端部分包括服务器端和数据库，服务器端主要负责完成前端的接口调用并处理相应的业务逻辑，将处理结果保存到数据库中，同时将处理结果返回给前端数据层。数据库负责数据存储，保证数据永远是前端操作经服务端处理后的最新数据。
移动设备的生产厂家和品种较多，开发的技术和平台使用也五花八门。目前的移动平台有三类，其中流行的主要是是iOS和Android两大平台，Windows Phone占比较少。iOS的应用是基于Objective-C语言开发，用户体验较好，因此用户群体较有优势。Android应用使用Java语言开发，其App使用开放，不受限于注册用户，用户群体与iOS群体势均力敌。
目前移动产品的实现方式主要有3种，即Native App，Web App与Hybrid App。三者各有优缺点，其中性能最优的是Native App，它调用系统自带的API，界面美观，用户体验佳，但需要下载安装，不同的平台下载不同的App，占用存储空间，开发成本高。Web App无须下载安装，使用时直接打开浏览器输入信息即可，然后进行离线下载，不受平台限制，不需要开发若干版本，这是一种全新的用户体验。Hybrid App兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。目前，基于信息流方式及类似方式的应用最适合使用HTML5进行开发。
Web App的最大的优势之一就是用户不需要下载安装，也不要实时更新，每次使用时的版本都是最新版本，开发人员对App所做的修改、更新都直接在服务器更新和生效。这是用户喜欢使用Web App的最大原因。这也就要求开发过程需要有一个良好的技术架构才能保证产品生命周期中频繁的迭代和更新，降低开发和维护成本。
微软与ZeptoLab合作推出的基于IE9和HTML5框架的《Cut the rope》（即“割绳子游戏”），手机端新浪微游戏平台登场之初主打的也是HTML5游戏，中国移动游戏基地也表示将把HTML5作为其未来游戏平台发展的重要方向。这些都证明WebApp的用户体验良好，完全有可能取代Native App。
三、基于HTML5的移动Web App的设计
HTML5通常指包括HTML5，CSS3和JavaScript在内的一套技术组合。HTML5使得网页的表现力更丰富，而JavaScript脚本和AJAX的广泛应用，改变了传统网页的技术架构和页面组织形式，为Web App的发展打下了良好的基础。
相比原生Native App，Web App优势明显，比如：无须下载安装，只需浏览器即可使用；一次开发多次使用，开发成本相对较低；响应式布局可适配多种移动终端设备；方便发布，随时保持着最新版本状态，美中不足的是可能短期内用户体验无法与Native App相提并论。
3.1 Web App技术架构
基于HTML5的Web App的基于B/S结构，分为前端和后端两部分，如图1所示。
Web App是基于Web的系统和应用，是指通过使用Web和Web浏览器技术，跨越网络（互联网或内联网）完成一个或多个任务的应用程序，通常需要使用Web浏览器。
分层设计的目的使得各层负责的工作相互独立、分工明确，但是又可以通过接口传递数据，在业务、接口甚至技术方案发生变更时，层次之间的影响度最小。
3.2 Web App实现关键技术
在上述架构中，后端使用多种技术都可以实现，如PHP和MySQL，ASP.NET，JSP，SQL Server等，只要与前端的框架和协议保持对接，用哪种技术实现并不受影响。
HTML在UI界面层中完成页面框架，页面框架是整个Web App的骨架，使用div进行页面结构的搭建。HTML5也给HTML来了一些新的语义化标签，如<header><section><footer>等，不仅提升了网页的质量和语义，而且对搜索引擎能起到良好的优化效果。
本文围绕主题主要讨论前端的关键技术，涉及的主要有HTML5，CSS（层叠样式表），JavaScrip，jQuery，XML等。界面构建采用经典的结构和表现分离，主要用到HTML和CSS。
CSS主要用于在网页制作时，对页面中的元素进行样式设置，从外观和格式上进行控制，使得页面的布局、字体、颜色、背景和其他效果更完美。CSS3是CSS技术的升级版本，朝着模块化发展，加入了更多新的模块，如：盒子模型、超链接方式、背景和边框、文字特效、多栏布局等，使页面的表现能力更优。
JavaScript用来给HTML网页添加动态功能，是Web App开发中的重要技术。它运行在客户端浏览器上，不需要服务器的支持，其跨平台、容易上手，因此经久不衰。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。jQuery是一个轻量级的JavaScript库，让用户可以更方便地处理HTML元素和事件。jQuery提供了强大的选择器和良好的AJAX封装，因其跨平台的良好兼容性在Web App中被大量使用。
AJAX的原理就是在不刷新页面的情况下访问服务器处理数据，并根据数据的处理结果按想要的方式对页面做出即时更改。这个技术用在前端数据层与服务端进行交互时。AJAX指的是异步的JavaScript和XML，它让页面可以在不刷新的情况下，异步访问服务器的接口并且接收XML格式的返回值。这样页面就可以动态地根据请求服务端的结果，来更新页面的显示内容。
3.3 Web App页面体验优化
Web App必须解决用户在网页中操作时每一次点击都会产生一次页面刷新的问题，才能得到和Native App一致的用户体验。JavaScript动态改变页面元素的能力给我们提供了OPOA这个针对页面刷新问题的良好解决方案。OPOA，即One Page，One Application，也就是单页面应用。在传统网站中，导航里的每一个链接点击后都会跳转到一个独立的页面。而在OPOA的网页中，在用户点击导航栏的Tab标签时，并没有进行页面跳转，而是执行了一段JavaScript脚本，这段脚本会隐藏当前显示的内容，并且将下一个页面的内容展示出来。
四、结语
HTML5技术的不断发展面临着机遇和挑战，但目前移动Web App的开发应用越来越受到欢迎，市场前景较好。HTML5从本质上转变了开发移动Web App的方式，无须下载，用户体验好，媒体功能丰富，实现真正意义上的跨平台、跨浏览器、响应式布局，解决兼容性问题。相信在未来HTML5将会有更加广泛的发展空间，为用户带来新的体验。
