html5的移动开发详解

http://www.58player.com/blog-2327-108437.html

曾被人问到Android界面用Html5写有什么优势，当时由于没有想过这个问题，也对html5不是很了解，现在在这总结一下。 
        android和iphone都提供了webview的控件，这个控件实质是一个webkit浏览器内核，用于解析html、css、js代码。 
        所以，native app可以调用webview空间来展示我们的web页面。同时，由于对css3的较好支持，native那种绚丽的界面就可以用html+css较好的实现出来，达到逼真的native app的效果。 
        正因为Webview的控件的存在,我们能够在我们的应用中加入Web网页的元素.也就为我们的开发提供了更多的思路.  
          
        总的来说，关于Android的开发有三种解决方案：Native , Web 和 Hybrid. 
        Native app就是用Android SDK来实现的应用； 
        Web app是基于浏览器来实现的一种应用。 
        Hybrid app是一种可以下载的Native App，其用户界面的全部或者部分元素在嵌入式浏览器组件（WebView之类的）里面运行。对用户来说，Hybrid App与Native App几乎难以区别：它们都可以从应用程序商店或市场来下载，存放在移动设备上，其运行方式完全如同其他任何应用程序。但是对开发者来说，这存在巨大的差异，因为他们无需为每一种移动操作系统从头开始重新编写应用程序，而是只要用HTML、CSS和JavaScript编写其中一部分应用程序代码，就可以在多个设备上重复使用。 
          
        首先说一下各自主要的优缺点。 
        Native app 
        优点：  
        可以充分发挥系统特性（调用系统服务、内存管理等），操控设备硬件（如相机、蓝牙、振动器等）； 
        可提供最佳的用户体验，最优质的用户界面，最华丽的交互,比较适合制作游戏等性能要求比较高的应用； 
        可访问本地资源； 
        与web app相比，性能更好，交互流畅（尤其是复杂应用）。 
        缺点： 
         
        在更新的时候需要发布新的版本，不够方便；  
        各平台开发语言、sdk和开发环境不同，学习成本高； 
        各平台不兼容，多平台的开发、移植比较复杂，开发成本高，开发周期长； 
        针对多种设备（不同分辨率、不同硬件配置等）的调试和适配较麻烦，开发成本高，开发周期长； 
        维持多个版本的成本比较高。 
         
        Web app（纯web，也就是不需要下载，通过手机浏览器打开的一种应用） 
        优点： 
        使用web方式可以实现网页完成之后，可以在其他设备上使用，实现跨平台；  
        使用web方式制作mobie app最大的好处是，客户端无需更新，而且界面的更新由于是基于html5，可能只需要写几个插件就完成了功能的更新添加； 
        并且数据显示很多手机用户不是经常更新他的app程序，同时相对于native app，web方式修改app的界面的成本更低一些。 
        所以说，对于对界面的灵活性有较高要求的app，比较倾向于用web方式实现mobie app。 
        缺点： 
        受限于手机浏览器的支持，  
        纯粹的移动Web App（指在浏览器里面运行的应用程序，而不是Hybrid App）目前只能访问摄像头、麦克风和地址簿等设备功能。 
        虽然万维网联盟（W3C）方面的工作取得了进展，让Web App可以访问这类设备服务， 
        但是移动浏览器目前并不提供这样的功能——移动浏览器提供这样的功能对许多创新型的移动应用程序来说是一个关键要求； 
        而且性能上无法充分发挥系统特性（调用系统服务、内存管理等），无法操控设备硬件（如相机、蓝牙、振动器等）。 
          
        Bybrid app 
        Hybrid App开发利用了原生功能，同时又为将来采用HTML5充当着具有战略意义的台阶。  
        优点： 
        混合方式开发的app拥有上述两者的一些优点,比如Web app的更新迅速,简单,成本低之类的,也能像Native app一样访问本地的很多资源和服务，在Hybrid App领域， 
        有了开源PhoneGap库等框架，JavaScript代码就有可能访问手机罗盘、拍照片、寻找或创建联系人或约会事项，以及充分利用移动Web App无法访问的其他许多设备功能。 
        能否访问设备功能并不是Hybrid App和移动Web App的唯一区别。 
        另一个重要的区别是，Hybrid App基本上是通过应用程序商店分发的：不是用浏览器浏览至Hybrid App，而是下载和安装它。 
          
        另外，Hybrid App的HTML页面可以由Web服务器来传送，但这并不是硬性要求。为了提升性能，Hybrid App可以添加全部所需Web资源（即HTML、JavaScript、CSS和图像）的一整套副本，以便用户可以立即访问这些资源，而不必等Web服务器将这些资源发送过来。 
          
        缺点： 
        缺点跟Web app有点类似,除了这些区别外，Hybrid App与移动Web App有一些共同的特点。不像纯粹的Native App可直接使用操作系统提供的图形API和用户界面服务，在Hybrid App中，大多数页面由浏览器的渲染引擎来执行——就好比它们是在网页里面。这就意味着，目前，只有以原生方式编写的页面才能获得游戏质量的图形.  
          
          
          
        有些应用程序只是将来自相应网站的一些页面作为应用程序的一部分来装入，比如美国银行、Facebook和Yelp的iPhone应用程序。另一些应用程序包含了用HTML编写的几个嵌入式页面，比如《疯狂塔防》（Tower Madness）游戏。但还有一些应用程序的整个用户界面都是用HTML实现的，比如Harmounius（一种图形画板）或罗技公司的Squeezebox Controller。  
          
        下面是我看到一个前辈说的关于Web app 和 Hybrid app 存在的缺陷,也就是利用在原生的开发过程中嵌入Webview存在的缺陷。 
        地址:http://www.cnblogs.com/muguaworld/archive/2011/05/27/html5-mobieapp.html  
          
        但是，web实现mobie app有一些瓶颈。以下是我在项目实战中碰到的，如果各位看官有好的解决方案，请不吝赐教。 
         其一，根据百度移动互联网发展趋势报告2010Q4，iphone下下载一个1.407k的网页，建立连接耗时1.35s左右，传输耗时0.15s左右。这样，导致app在建立连接的时候，屏幕处于白屏状态。也就是说这个app在一秒多的时间内，完全处于白屏状态，再加上3G、GPRS网络的不稳定，有时候等待app响应需要几秒甚至1几秒的时间，这对于速度就是生命的mobie app来说，无疑是个致命的缺陷。 
         其二，有人说，native app也需要建立tcp连接，同样需要耗时这么长时间。很对，那么目前常用的解决方案是什么呢。开机画面+loading图片，有了这两个，程序不会处于假死状态，用户拥有耐心继续等待。那么，web app是否也能这样做呢。首先，程序打开同样显示开机画面，画面结束后切换界面（webview），webview如果无loading图片依然是在建立连接，依然处于白屏状态。因为我们无法在开机画面的时间内对程序进行预加载。然后，使用native方式在webview外面蒙上一层，上面放上loading图片，但是webview没有提供web页面开始渲染的接口，指提供了web页面load完成的接口。也就是说，如果通过native方式在webview上放置一个loading图片的话，那么这个图片指能在页面完全加载完消失，这样也会影响用户体验。这里再提供一种方式，实现这种loading图片的效果：放置一个静态页面在本地，点击打开静态页面，无需建立连接。而后通过ajax方式请求数据来替换页面内容。这种方式，也是Nokia widget的实现方式，但是这种方式的效率比较低下。 
         其三，难以实现本地存储。本地存储是html5的一个重要成果之一，但是，基于android存在多版本系统。android低版本中的webkit对html5和css3支持的并不好。简单的两个例子是：input type="number"会导致低版本android的webkit直接crash，css3的圆角在低版本的android webkit中也会出现明显裂缝。现在常用的html5向后兼容方案是通过javascript+css+html来模拟html5的一些特性，但过多的js存在于mobie app中会不会得不偿失。 
         个人觉得，移动互联网的发展趋势一定也是从C/S模式向B/S模式转变。但面临的困难就是，手机端的浏览器更多，对web标准的支持也不尽相同，适配各种分辨率的手机屏幕也是让人很崩溃的一件事情。相信以后的移动互联网也将适应现在的格局：web方式浏览信息，app方式游戏，工具等。