使用 cordova 开发 Hybrid App

参考链接:http://www.infoq.com/cn/articles/hybrid-app/

Hybrid简史

Native App(以下简称Native)和Mobile Web(以下简称Web)二者混合开发的产物被称为Hybrid App(以下简称Hybrid)。

Hybrid并不是什么新概念,最早可以追溯到Symbian时代,直到iOS和Android出现之后才充分展现出价值。

背景

Hybrid既利用了Native App丰富的设备API(Device API),又能拥有Mobile Web的跨平台、高效开发、快速发布的能力,对于相当庞大的应用场景而言都是适用的。

优势

  • 跨平台

    Web内容可以做到开发一次,所有平台生效,诸多产品需要这种能力。

  • 快速发布

    iOS平台,Apple Store平均审核周期1~2周不等,甚至更长,产品的发布周期从2周到1月,这对需要快速发布的产品而言难以接受。

    Android平台,应用商店众多,发布过程烦琐。虽然可以应用内升级,但是带来的问题是新App需要通过应用商店,此外APK体积庞大,2G/3G环境下体验差。

  • 高效开发

    Web开发经过20年的发展,已经将结构(HTML)、表现(CSS)、行为(JavaScript)3部分很好地分离开,在分工协作、开发效率上会具明显优势。

  • 丰富的Device API

    Web(HTML5)强调通用性,受限于标准和浏览器实现,许多有用的系统功能未能得到支持(或部分支持)。

    而Native最大的优势在于设备API的调用能力,只要桥接Native和Web,Web也就能够拥有这种能力。

劣势

  • CPU/GPU密集类应用目前看更适合Native,例如极品飞车这样的游戏。这种劣势是在不断弱化的,正如 “CSS Transform 3D”引入GPU大大缓解了Web动画不流畅的问题。
  • 静态资源从服务器端加载导致的UI展示延迟问题。这个问题可以通过Native拦截WebView通信加载已打包的公共库来缓解。

简史

  • 雏形

    雏形阶段大致为:

    • Symbian V3/5时代已经有Hybrid雏形。

    • iOS最初的App都是由Objective-C编写而成的,受限应用商店的发布周期,内容经常变化的部分开始通过使用内置浏览器控件(WebView)加载服务端页面来实现。

    • Android出现并流行之后,可以将更多的App功能通过Hybrid来实现,这样在不同平台上就可以只维护一个版本。

  • 发展

    “跨平台”成了Hybrid最大的卖点,以PhoneGap[1]为首的Hybrid框架陆续出现,带来了诸多改变。

    • 访问设备功能。
      • Web(HTML5)不支持的功能可以让Native实现,再通过Native和Web之间通信,通过这种方式可以让Web获得和Native相同的设备API调用能力,这是PhoneGap这类Hybrid框架的基本工作原理。
      • 与此同时,将Web代码转为Native的Hybrid框架(如Tianium[2])也出现了。
    • PhoneGap子项目weinre是一种远程调试工具,极大地缓解了Hybrid难于调试的问题,进一步促进了Hybrid的发展。
    • Hybrid框架提供了应用打包功能,开发者可以完全使用HTML、CSS、JavaScript开发Native App。
  • 成熟 随着PhoneGap这类Hybrid框架在全球的流行,一些问题暴露了出来,也正是这些问题的解决,让Hybrid走向成熟。

    • 开发体验提升。
      • weinre这类调试工具仍属于插件性质,诸如“网络”、“本地资源”等高级调试功能无法支持,WebView的原生调试需求越来越强烈。
      • iOS 6.0+已经支持原生的远程调试。
      • Chrome for Android在原生远程调试上处于领先地位。
      • 从Android 4.4开始,WebView也支持原生的远程调试。
    • 提升WebView性能的呼声日益增强。
    • 某些追求极致性能的功能转由Native实现,如转场(页面间切换)动画。
    • 静态资源本地化是理想状态,其他场景下Native拦截WebView的请求,并让公共资源重定向到App内置资源,同样能实现为Web提速。

现状

以上便是Hybrid的发展概述,从国内最新的资料可以看出,Hybrid的趋势也是非常明显的。

越来越多的开发者决定使用Hybrid(跨平台技术),最近两年的总量已经有54%;而接近60%的开发者在Hybrid的技术方案上选择了PhoneGap。

/assets/2016-09/cordova-0.png

Hybrid技术

无论Android还是iOS,实现一个最简单的Hybrid App只需要几行代码:实例化WebView、加载页面,之后便是页面自身的代码。要想实现更为复杂的、完整的Hybrid还需要不少知识。

  • Mobile Web开发基础:HTML、CSS、JavaScript。
  • Native App开发基础:Android、iOS。
  • Native与Web双向通信机制。

Hybrid框架

目前一个Hybrid框架通常提供以下功能。

  • Device API:封装Native的功能,跨平台提供一致的Device API。
  • App打包:将HTML5编写的代码打包为App(Titanium会转换代码)。

PhoneGap几乎成了Hybrid的代名词,Titanium和PhoneGap的设计理念差异较大,

下图形象地展示了PhoneGap和Titanium的组成部分。

/assets/2016-09/cordova-1.png

PhoneGap

PhoneGap开发商Notibi 2010年将PhoneGap代码贡献给Apache软件基金(ASF), PhoneGap核心引擎成为新的开源项目Cordova,同时PhoneGap成了Cordova的一个发行版本。 2011年10月,Notibi被Adobe收购,但没有影响到PhoneGap和Cordova的开源性质。

written once,run everywhere

PhoneGap主要的功能为:

  • 提供Hybrid API,可由JavaScript直接调用诸如加速度、摄像头、指南针、GPS、联系人等系统级API,完整的API列表请访问PhoneGap API Reference。
  • 使用Web(HTML、CSS、JavaScript)开发的内容经过PhoneGap编译打包为各个平台的Native App

Titanium

Titanium设计思路和PhoneGap有很大不同,Titanium目的为移动开发提供一种跨平台的JavaScript运行时环境和API。

设计思路

Titanium设计的核心思路如下:

  • 有一套核心的移动开发API,它们可以跨平台进行规范,这些方面的重点应放在代码重用上。
  • 有针对特定平台的API、用户界面约定以及功能特性,开发者在针对该特定平台从事开发时采用,应该有针对特定平台的代码,以便这些用例提供最佳的用户体验。

Titanium从设计理念上不追求“written once, run everywhere”,这是它的缺点,但同时它追求平台差异的更佳的用户体验,因而也受到一部分用户的追捧。 Titanium的另一个缺陷是插件难于扩展,要想支持新平台则更加困难。

cordova 开发

参考链接

Get Started Fast

  • Installing Cordova

      npm install -g cordova
    
  • Create a project

        cordova create MyApp
        //--help:
        //cordova help create.
    
  • Add a platform

    cordova platform add browser
    //cordova platform add <platform name>
    
  • Run your app

    cordova run browser
    //cordova run <platform name>.
    

插件

Installation

// npm hosted (new) id
cordova plugin add cordova-plugin-splashscreen

// you may also install directly from this repo
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
Copyright © bqxu.me. 2016 • All rights reserved.