浅谈HTML5和Web App

【摘要】伴随着移动设备的快速崛起，App市场的发展也日渐迅猛，未来App的市场呈现一片光明景象，而对于移动开发商来说，不同平台的应用则需要开发不同的App来支持，无论在更新及维护上都需要一定的成本。于是更多人想到了基于HTML5的Web App，目前主流操作系统iOS、Android以及Windows Phone的浏览器都对于HTML5大部分特性的支持也更加突显HTML5在未来移动设备端的地位。

【关键词】HTML5 Web App

讨论HTML5和Web App，就不得不先想到Native App，也就是目前在苹果商店上下载的ipa以及在谷歌商店或其他网站下载的apk都是属于Native App，这种App有的优势是，优秀的用户体验和华丽的交互操作，能够针对不同平台提供不同用户体验；可不受网络速度限制，节省带宽成本；可访问本地硬件设备和资源；盈利模式明朗。那么又有什么劣势。不同平台之间的移植麻烦；维持多个版本的成本比较高；需要通过第三方审核；盈利需要与第三方分成。

针对Native App的不足，Web App很好了弥补了这些劣势，开发商只需了解HTML5、CSS3、js以及Device API即可完成应用在多终端设备和平台的运行，很好的保证了应用跨平台的一致性，相对于Native App开发成本更低，同时更新维护更容易，用户几乎没有安装成本，也更加自由和开放。但任何新技术总是有利有弊，Web App其自身也会遇到在用户体验、UI效果及调用本地设备和资源的相关问题。虽然2种模式各有优缺，但随着移动设备及html5的迅猛发展，让苹果、谷歌以及微软巨头认为只有HTML5才是web未来。众所周知，HTML5不仅仅给我们带来了更多语义化的标签，还有canvas绘图、音频视频、本地存储、离线应用、地理位置定位、WebGL等新特性。接下来从App的角度来看看HTML5带来了那些新特性。

Canvas绘图。Canvas在网页中类似于Flash的作用，是HTML5引入的一个新的标签，但其本身并不具备绘图的能力，只是为JavaScript提供一个绘制图像的区域，可以使用JavaScript来绘制图形、编辑图象。如Harmony，基于Canvas的一个绘图工具，使用其提供的独特画笔样式，在iPhone和Andriod手机上可以绘制一些精美的铅笔素描风格。很多HTML5站点也利用Canvas实现绘画功能和在线图像编辑功能，如Sketchpad，一个在线画板，拥有类似Windows 画笔的所有功能；CloudCanvas，基于HTML5的免费在线图像编辑软件，可以实现AI和PS的一些矢量与位图的编辑功能。

本地存储（Web Storage）能力的提升。很多App下载安装后，都是基于本地离线缓存运行，而无需请求网站。Web Storage很好的解决了之前Cookie的大小不能超过4K的尴尬和不同浏览器针对每个域名下Cookie数的限制。Web Storage可分为local storage和session storage，local storage提供了5MB的存储空间，而sessiong storage甚至没有限制。不仅在启动App的时候可以加载缓存数据来加快启动和显示速度，还可以减少网络流量，离线运行App。谷歌之前用Google Gears这个浏览器插件来解决网页应用的离线使用，如离线使用Gamil，随着浏览器对HTML5新标准的支持，Gears也逐渐被抛弃。目前Google Reader利用HTML5离线技术，可以让用户离线阅读订阅的最新浏览过的文章。

Geolocation（地理定位）。Geolocation API是W3C新添加的一个API规范，可以用通过浏览器来获取用户的地理位置。对浏览器版本要求相对较高，目前能支持的浏览器有IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+。可以通过geolocati-

on下的getCurrentPosition方法来获取用户的信息navigato-

r.geolocation.getCurrentPosition（getPositionSuccess，ge-

tPositionError）；同时还可以综合GoogleMaps API来监控用户的位置让其在地图上显示用户的准确位置。目前移动设备上的定位特性更多的体现在社交类型的LBS应用中，如微信，手机QQ、微博、Google maps。

音频和视频的无缝支持。HTML5定义了两个新的标签video和audio，音视频自由的嵌入页面，让多媒体的形式也更为灵活。特别是在iPhone和iPad对Flash的不支持，HTML5的音视频显得尤为重要。同时HTML5嵌入代码更简洁，如网站上的视频，调用flash需要很长一段代码，那么使用HTML5代码只需一行。而且HTML5对音频和视频的支持也克服掉了Flash 吃过多系统资源和卡机死机情况。

与CSS3先天性亲近。CSS3虽然不是HTML5的特性，但对于CSS3的新特性如：border-radius、border-image、box-shadow、transform、transitions、animation、user-interface等在HTML5浏览器上表现最佳。用过Path的开发者肯定会对里面的交互表现赞叹不已。

WebGL是OpenGL ES2与JavaScript的结合。因此，它可以使用OpenGL中标准化的变成图形管道，包括着色器。着色器可将高度灵活的渲染效果应用于3D场景，让显示效果更真实。WebGL着色器是用GLSL编写的，这是Web中又一种新的专用语音。HTML5的WebGL应用程序使用HTML搭建框架，用CSS控制样式，用JavaScript处理逻辑，用GLSL进行着色。开发人员可以借鉴OpenGL着色器方面的开发经验，按照类似的方式进行使用WebGL API。

除了上面列举的HTML5特性外，还有很多重要的特性如SVG、Form、Web SQL Database、Web Worker、Web Socket、Drag&D-

rop等，都是未来HTML5可能大力发展的方向，目前HTML5的规范还在进一步改进中，在运用Web App开发过程中仍然会遇到对事件的响应速度页面渲染等性能问题、不同机型及web浏览器内核的兼容性问题、对于移动设备硬件资源的访问等众多问题，业界也出现了很多如PhoneGap、Sencha Touch、Jquery Mobile等移动设备开发框架，同时也有以HTML5+Native加壳方式的App如网易博客Android客户端，各种新技术的尝试和主流浏览器及各大智能机操作系统对HTML5特性的支持。

作者简介：王君明，女，汉族，山东烟台人，烟台南山学院计算机与电气自动化学院，硕士，教师，助教，影视艺术；王 杰，男，汉族，山东烟台人，烟台南山学院计算机与电气自动化学院，硕士，教师，助教，教育技术。