基于Html5的webapp

基于Html5的webapp摘要：webapp的发展离不开html5和互联网，webapp和html5将会是是互联网的未来，webapp将通过UC浏览器开放平台。本文还分析了现在的webapp与nativeapp相比，它的劣势，探讨了html5在html4基础上所增加的功能和基于html5的webapp的优势。关键词：webapphtml5UC浏览器Webappbasedonhtml5Abstract:withthedevelopmentofwebappwithoutHTML5andtheInternet,webappandHTML5willbeisthefutureoftheInternet,webappthroughtheopenplatformUCbrowser.Thispaperalsoanalyzesthenativeappcomparedtowebappnow,itsdisadvantages,discussestheHTML5increaseonthebasisofhtml3functionandHTML5basedwebappadvantage.Keywords:webappHTML5UCbrowser引言现在互联网的发展正在处于一个转折点，随着3G和4G网络的大规模应用，移动互联网迅猛发展，而在这之中，移动手机应用作为主角，对于网络供应商，用户，开发商，投资商都有着重大的影响。为了支持互联网的发展，国际标准组织W3C于2007年成立新的HTML工作团队，2008年发布了HTML5的第一份草案。Html5添加了许多新的语法，组合了css、javascript、html等技术，提供了更多的可以有效增强网络应用标准、减少浏览器对于插件的繁琐要求。所以基于html5的应用具有很好的跨平台性，能够很好地解决nativeapp的平台割裂问题，1.HTML5的发展史与优势HTML5的前身身是2004年由来自Apple、Google、Opera等浏览器厂商成立的WHATWG制定的WebApplication1.0草案规范。其目的是为HTML和Web技术提供更多解决问题的方案以及新API接口。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。HTML5拥有全新的，更合理的Tag，多媒体对象将不再全部绑定在object或embedTag中，而是视频有视频的Tag，音频有音频的Tag。本地数据库。这个功能将内嵌一个本地的SQL数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web程序也将因此获益匪浅。不需要插件的富动画。Canvas对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着我们可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。一些最新的浏览器，除了IE，已经开始支持Canvas。浏览器中的真正程序。将提供API实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag将被剔除，而使用CSS。HTML5应用技术指面向HTML5应用开发的主要关键技术，包括OfflineApplication技术、Sever-sentEvents技术、Websocket技术、WebWorkers技术、HTML5视频和音频技术以及DeviceAPI技术[1]。下文将对上述关键技术进行简单的介绍与分析。1)OfflineApplication，即离线应用。在开发支持离线的Web应用程序时，要使用以下三个方面的功能。①离线资源缓存。需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5中，通过CacheManifest文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。②在线状态检测。开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在HTML5中，提供了两种检测当前网络是否在线的方式。③本地数据存储。离线时需要把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5提供了DOMStorage和WebSQLDatabase两种存储机制。在应用中可以考虑将用户的一些数据存储在本地，供离线模式下应用。2)Sever-sentEvents，即服务器推送技术。客户端使用EventSource对象实现。服务端也有相应的要求，表现在如下两方面：一是要求网页的MIME类型为text/event-stream，这个MIME类型定义了事件框架格式，二是text/event-stream有一定的格式。主要内容是根据需要在应用中向用户推送通知等信息。3)Websocket，也叫套接字技术[4]正常情况下，浏览器访问Web页面时，一般会向页面所在的Web服务器发送一个HTTP请求；Web服务器识别请求，然后返回响应。大多数情况下，当内容呈现在浏览器页面上时，可能已经没有时效性。如果用户想要获得最新的实时信息，就需要不断地手动刷新页面，这显然不是一个明智的做法。目前实时Web应用的实现方式，大部分是围绕轮询和其他服务器端推送技术展开的，包括轮询、长连接、流解决等方案。4)WebWorkers技术[5]可以让一部分JavaScript程序代码运行在客户端操作系统的线程中，而非浏览器的线程中，从而可以实现多线程。WebWorkersJavaScript代码执行复杂运算的过程中起到优化效果。每一个运行在客户端操作系统线程中(非浏览器线程)的JavaScript程序代码被称为一个Worker，分为专职Worker和共享Worker两种。5)HTML5视频和音频。在HTML5网页中不再需要插件播放音频或视频多媒体文件，只需要加入video和audio标签并使用JavaScript代码开发操作面板，即可实现在网页灵活播放多媒体，同时可以结合Canvas技术增加对多媒体文件的效果与控制操作。图1是HTML5新特性的展示图图12.webapp的发展Webapp实际上就是WebApplication，指利用Web技术，配合Web浏览器，跨越网络实现一个或多个任务的Web应用程序。通过Web浏览器，由Web技术实现出来的WebApp有别于传统的网站，它具有更丰富的交互体验，使得WebApp看上去更像是NativeApp,而且webapp的开发难度较之nativeapp大幅降低，易用性更高。现在的webapp仍然存在着许多问题。1.由于WebApp的开发几乎完全构建在Webview的基础之上，因此在Webview上对事件的处理以及响应的能力就直接决定了用户的体验。在这里有两方面的性能，一个性能是对事件响应的速度。在Web上控件的响应速度比原生的控件响应速度要慢；另外一个是直接在渲染和执行速度上面的速度。2.分辨率的问题和适配的问题。和NativeApp的开发方式一样，不同的分辨率，横竖屏切换，以及对于不同机型的识别，甚至与对不同的web浏览器内核的适配，同样存在一样的问题。同样需要比较多的调试和适配的工作。3.跨平台问题。WebApp和NativeApp另一个不同在于访问硬件资源上的不同。由于受限于浏览器的功能，有很多的硬件资源不能直接访问3.离线的问题。和NativeApp相比，可能这是最应突破的一件事情。一是这是一个0或者1的问题，实质上是突破了原有的Web开发的限制，二是界面和逻辑数据的分离。对于Web的页面来说，这可以认为是界面，中间涉及到分离的js,css文件以及没有更新的img等静态元素的缓存问题，同时也存在把动态数据元素（比如某个控件里的状态，比如离线邮件中的邮件信息）缓存以及载入的问题。这需要重新建立起一套解决方案来实现。以上问题都说明，现在的webapp正处于比较早的原始阶段。图2是简单的webapp前后台交互图23.Html5助力webapp在HTML5出现之前，webapp有许多缺点，例如服务器端的开发工作量大，逻辑复杂；需要在更多设备上进行测试；前端技术还未标准化；难使用设备的特性（传感器、GPS定位、本地文件系统等）等[3]。但是HTML5的出现，给webapp的发展带来了极大的转机。从webapp的技术体系来讲，它的技术体系包括图形图像、多媒体、设备适配、表单、用户交互、数据存储、个人信息管理、传感器和硬件集成、网络协议、通讯与发现、封装、性能与优化。在图形图像技术范畴里，背景、圆角、阴影、动画、SVG等一系列技术[2]。根据图1中的HTML新增功能中，不难看出webapp的技术体系有赖与HTML5标准。有了HTML5助力的webapp将摆脱它原来的诸多缺点。4.对于基于HTML5的webapp的未来展望第一、Webapp的发展优势Webapp与nativeapp一直处于竞争状态，而webapp一直落于下风。但是在html5标准推出之后，业界人士多认为webapp的发展将成主流。原因可以大致的分为以下几点：1.从商业的角度来看，因为开发成本的原因，会推动WebApps会赢得更多项目的订单，从而会推动更多的开发者和更多的WebApps项目出现。2.从技术的角度来看，HTML5的标准推动以及硬件的处理能力会使得WebApps有能力实现类似NativeApps的功能。3.从历史的角度来看，移动互联网上会复制PC互联网上所曾经发生的事情，而今PC上基于Web的开发远胜于传统的NativeApp开发。第二、webapp的发展趋势HTML5的蓬勃发展跟移动互联网的发展是密不可分的。过去几年，无线上网的设备数量都在翻番，但终端、操作系统等平台的差异非常大，开发模式、开发语言等都也有不小差异。HTML5的出现会是移动互联网的一把万能钥匙。因此，WebApp很可能首先在移动平台取得较好的发展。从技术角度看，以下三个特点会是WebApp未来发展的三个主要趋势：1.网页应用化2.支持离线使用3.支持调用手机硬件接口网页应用化和支持离线使用会让WebApp的能力得到进一步的拓展。还有就是支持调用手机硬件接口，例如照相接口，除了对焦、光圈、快门之外，还包括白平衡、调色等。如果WebApp可以支持的东西全都弄出来之后，Web开发者会觉得很幸福，因为可以用非常简单的方式做出非常专业的应用。未来，基于HTML5的WebApp将成为手机上的主流应用形态。我们希望UC可以帮助WebApp的相关标准的应用和普及。我们也会致力于将UC打造成对WebApp支持最完善的一体化服务平台。5.结束语HTML与webapp几乎同时出现，经历了20年的磨砺之后，已经相当的成熟完善，随着移动互联网的兴起和各种移动设备的涌现年的磨砺和发展，已经相当成熟和完善。随着移动互联网的兴起和各种移动智能设备的涌现，HTML5所提供的强大的多媒体呈现能力、交互能力、云端服务集成能力与本地处理能力，以及快速部署和简单升级的特性，使其成为一个被寄予厚望的概念。虽然在W3C诞生的HTML5作为标准是一种群体妥协的结果，但其仍不失为一个相当进步的技术。HTML5正在逐渐被证实为Web从网页向网应用升的必然工具，同时也是广大厂商开拓新兴的持续增长的市场领域，改变Web生态格局的战略制高点。更重要的，HTML5跨平台、跨终端的特性以及丰富的互联网应用为我们描绘出一副美妙的用户体验的蓝图，清晰地勾勒出科技让生活更美好的画面。比尔·盖茨曾说：“人们总在短时间内高估技术对社会的影响，而在长时中又低估重大技术对社会的影响。”WebApp的框架可能就是这样一种快速发展的重大技术，就让时间来证明吧。[1]张成岩.基于html5的移动web应用浅析.[D].优势公司：2012-2-25:57[2]李秋花.html助力web应用发展实践.[D].北京：2012-10-08:15[3]张玉晴黄瑾娉.基于HTML5的跨平台移动应用关键技术的研究与实验.[D].安徽马鞍山：2012.12.27:57[4]