使用 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