跨終端Web之Hybrid App開發對比

Native App（以下簡稱Native）和Mobile Web（以下簡稱Web）二者混合開發的產物被稱爲Hybrid App（以下簡稱Hybrid）。Hybrid並不是什麼新概念，最早可以追溯到Symbian時代，直到iOS和Android出現之後才充分展現出價值。

一、Hybrid簡史
Hybrid既利用了Native App豐富的設備API（Device API），又能擁有Mobile Web的跨平臺、高效開發、快速發佈的能力，對於相當龐大的應用場景而言都是適用的。

Hybrid優勢在於：

跨平臺
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也就能夠擁有這種能力。

Hybrid劣勢表現爲：

CPU/GPU密集類應用目前看更適合Native，例如極品飛車這樣的遊戲。這種劣勢是在不斷弱化的，正如 “CSS Transform 3D”引入GPU大大緩解了Web動畫不流暢的問題。
靜態資源從服務器端加載導致的UI展示延遲問題。這個問題可以通過Native攔截WebView通信加載已打包的公共庫來緩解。

從國內最新的資料可以看出，Hybrid的趨勢也是非常明顯的。從圖8-1可以看到越來越多的開發者決定使用Hybrid（跨平臺技術），最近兩年的總量已經有54%；而接近60%的開發者在Hybrid的技術方案上選擇了PhoneGap。

Hybrid技術

無論Android還是iOS，實現一個最簡單的Hybrid App只需要幾行代碼：實例化WebView、加載頁面，之後便是頁面自身的代碼。要想實現更爲複雜的、完整的Hybrid還需要不少知識。

Mobile Web開發基礎：HTML、CSS、JavaScript。
Native App開發基礎：Android、iOS。
Native與Web雙向通信機制。

下面來講Native與Web雙向通信機制：
1. Native調用Web
無論Android還是iOS ，Native調用Web（JavaScript） 都有很好的原生支持。
Android調用JavaScript

webView.loadUrl（"javascript:（function（）{ alert（‘ok’）; }）（）”）;

iOS調用JavaScript

[webView stringByEvaluatingJavaScriptFromString: @"alert（'ok'）" ];

2. Web調用Native
“Native調用Web”本質上是JavaScript腳本的動態執行，在“Web調用Native”的場景下由於目前Native語言（Java和Objective-C）不容易像JavaScript那樣便於動態執行，所以需要另闢蹊徑。
2.1 Android
Android上常見的方式有3種。
1.重寫WebViewClient.shouldOverrideUrlLoading

webView.setWebViewClient（new WebViewClient（）{
        @Override
        public boolean shouldOverrideUrlLoading （WebView view, String url）{
            // TODO解析URL並觸發Native代碼         
return true;
        }
    }）;

當頁面內的URL發生變化時，如點擊鏈接、執行JavaScript（如location.href=”http://”）等均會觸發WebViewClient.shouldOverrideUrlLoading，通過將Web調用Native的數據封裝在URL，再由Native解析數據並執行響應Native方法。
2.重寫WebChromeClient.onJsPrompt，或onJsConfirm，或onJsAlert，以WebChromeClient.onJsPrompt爲例。
重寫WebChromeClient.onJsPrompt

webView.setWebChromeClient（new WebChromeClient（） {
        public boolean onJsPrompt（WebView view, String url, String message, String defaultValue, JsPromptResult result） {
        // TODO解析message並觸發Native代碼         
            result.confirm（""）;
            return true;
        }
    }）;

當執行“window.prompt（“{}”）”這樣的JavaScript代碼時，將會觸發WebChromeClient.onJsPrompt。
3.WebView.addJavascriptInterface，這種方式和前兩種都不同，通過將Java Object（A） 映射爲JavaScript Object（B），從而調用B.func1時將會自動觸發A.func1，通過這種原生的方式實現了 “Web調用Native”。

webView.addJavascriptInterface（new Object（） {
        public void func1（） {
        }

        public void func2（） {
        }
    }, "webViewObj"）;

作者 徐凱 發佈於 2015年5月27日 | 注意:GMTC全球移動技術大會2016年6月24-25日，瞭解更多詳情！ 2 討論
分享到：微博 微信 Facebook Twitter 有道雲筆記 郵件分享
稍後閱讀我的閱讀清單
編者按：InfoQ開設新欄目“品味書香”，精選技術書籍的精彩章節，以及分享看完書留下的思考和收穫，歡迎大家關注。本文節選自徐凱著《跨終端Web》第八章“Hybrid App”，主要講述Hybrid App的發展現狀以及技術實現，最後還介紹了兩種主流Hybrid開發框架PhoneGap/Cordova和Titanium。

Native App（以下簡稱Native）和Mobile Web（以下簡稱Web）二者混合開發的產物被稱爲Hybrid App（以下簡稱Hybrid）。Hybrid並不是什麼新概念，最早可以追溯到Symbian時代，直到iOS和Android出現之後才充分展現出價值。

Hybrid簡史

1. 背景

Hybrid既利用了Native App豐富的設備API（Device API），又能擁有Mobile Web的跨平臺、高效開發、快速發佈的能力，對於相當龐大的應用場景而言都是適用的。

Hybrid優勢在於：

跨平臺
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也就能夠擁有這種能力。

Hybrid劣勢表現爲：

CPU/GPU密集類應用目前看更適合Native，例如極品飛車這樣的遊戲。這種劣勢是在不斷弱化的，正如 “CSS Transform 3D”引入GPU大大緩解了Web動畫不流暢的問題。
靜態資源從服務器端加載導致的UI展示延遲問題。這個問題可以通過Native攔截WebView通信加載已打包的公共庫來緩解。
2. 簡史

雛形
雛形階段大致爲：

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+已經支持原生的遠程調試[3]。
Chrome for Android在原生遠程調試上處於領先地位[4]。
從Android 4.4開始，WebView也支持原生的遠程調試[5]。
提升WebView性能的呼聲日益增強。
某些追求極致性能的功能轉由Native實現，如轉場（頁面間切換）動畫。
靜態資源本地化是理想狀態，其他場景下Native攔截WebView的請求，並讓公共資源重定向到App內置資源，同樣能實現爲Web提速。
3. 現狀

以上便是Hybrid的發展概述，從國內最新的資料可以看出，Hybrid的趨勢也是非常明顯的。從圖8-1可以看到越來越多的開發者決定使用Hybrid（跨平臺技術），最近兩年的總量已經有54%；而接近60%的開發者在Hybrid的技術方案上選擇了PhoneGap。

圖8-1 Hybrid在國內的發展情況[6]

在受訪的2309個Mobile開發者中，到2013年8月爲止完全使用Native開發的只有8%，而剩餘的92%都可以被認爲使用的是Hybrid，如圖8-2所示。

圖8-2 Hybrid使用情況

App的跨平臺特性成爲一個重要的考慮，如圖8-3所示。

圖8-3 跨平臺特性受關注

圖8-4顯示了Hybrid驚人的增長速度：2013年無論是開發中、已發佈的Hybrid（或HTML App）均相比於2012年出現了超過125%～400%的增長率[8]。

圖8-4 Hybrid增長迅猛[9]

Hybrid技術

無論Android還是iOS，實現一個最簡單的Hybrid App只需要幾行代碼：實例化WebView、加載頁面，之後便是頁面自身的代碼。要想實現更爲複雜的、完整的Hybrid還需要不少知識。

Mobile Web開發基礎：HTML、CSS、JavaScript。
Native App開發基礎：Android、iOS。
Native與Web雙向通信機制。
Mobile Web開發基礎可以參考本書第2章，Native App開發基礎已經超出本書的討論範圍，同樣有很多可選擇的書籍，本節來講剩餘的第3個問題 “Native與Web雙向通信機制”。

1. Native調用Web

無論Android還是iOS ，Native調用Web（JavaScript） 都有很好的原生支持，如代碼8-1和代碼8-2所示。Android中的調用方式如下，其中webView是Webview的實例。

代碼8-1 Android調用JavaScript

webView.loadUrl（”javascript:（function（）{ alert（‘ok’）; }）（）”）;
iOS中的調用方式如下，其中webView是UIWebview的實例。

代碼8-2 iOS調用JavaScript

[webView stringByEvaluatingJavaScriptFromString: @”alert（’ok’）” ];
2. Web調用Native

“Native調用Web”本質上是JavaScript腳本的動態執行，在“Web調用Native”的場景下由於目前Native語言（Java和Objective-C）不容易像JavaScript那樣便於動態執行，所以需要另闢蹊徑。

2.1 Android
Android上常見的方式有3種。

重寫WebViewClient.shouldOverrideUrlLoading（如代碼8-3所示）。
代碼8-3 重寫WebViewClient.shouldOverrideUrlLoading

webView.setWebViewClient（new WebViewClient（）{
@Override
public boolean shouldOverrideUrlLoading （WebView view, String url）{
// TODO解析URL並觸發Native代碼
return true;
}
}）;
當頁面內的URL發生變化時，如點擊鏈接、執行JavaScript（如location.href=”http://”）等均會觸發WebViewClient.shouldOverrideUrlLoading，通過將Web調用Native的數據封裝在URL，再由Native解析數據並執行響應Native方法。

重寫WebChromeClient.onJsPrompt，或onJsConfirm，或onJsAlert，以WebChromeClient.onJsPrompt爲例，如代碼8-4所示。
代碼8-4 重寫WebChromeClient.onJsPrompt

webView.setWebChromeClient（new WebChromeClient（） {
    public boolean onJsPrompt（WebView view, String url, String message, String defaultValue, JsPromptResult result） {
    // TODO解析message並觸發Native代碼         
        result.confirm（""）;
        return true;
    }
}）;

當執行“window.prompt（“{}”）”這樣的JavaScript代碼時，將會觸發WebChromeClient.onJsPrompt。

WebView.addJavascriptInterface，這種方式和前兩種都不同，通過將Java Object（A） 映射爲JavaScript Object（B），從而調用B.func1時將會自動觸發A.func1，通過這種原生的方式實現了 “Web調用Native”，如代碼8-5所示。
代碼8-5 WebView.addJavascriptInterface

webView.addJavascriptInterface（new Object（） {
    public void func1（） {
    }

    public void func2（） {
    }
}, "webViewObj"）;

以上3種方式，最常用的是方式2；方式2相比方式1有內置的隊列支持，不會出現高頻訪問數據丟失的情況；方式3是Android原生方式，但是不如前兩種方式靈活。

2.2 iOS
iOS中可用的方式類似Android中的WebViewClient.shouldOverrideUrlLoading， 通過監控WebView的URL變化實現Web調用Native。

- （BOOL）webView:（UIWebView *） webView shouldStartLoadWithRequest:
（NSURLRequest *）request 
navigationType: （UIWebViewNavigationType）navigationType {

}

Hybrid框架

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

Device API：封裝Native的功能，跨平臺提供一致的Device API。
App打包：將HTML5編寫的代碼打包爲App（Titanium會轉換代碼）。
PhoneGap幾乎成了Hybrid的代名詞，Titanium和PhoneGap的設計理念差異較大，下圖形象地展示了PhoneGap和Titanium的組成部分。

1. PhoneGap

1.1 PhoneGap和Cordova
PhoneGap開發商Notibi 2010年將PhoneGap代碼貢獻給Apache軟件基金（ASF），PhoneGap核心引擎成爲新的開源項目Cordova，同時PhoneGap成了Cordova的一個發行版本[12]。2011年10月，Notibi被Adobe收購[13]，但沒有影響到PhoneGap和Cordova的開源性質。

1.2 原理

“一處編寫，多處運行”，PhoneGap主要的功能爲：

提供Hybrid API，可由JavaScript直接調用諸如加速度、攝像頭、指南針、GPS、聯繫人等系統級API，完整的API列表請訪問PhoneGap API Reference。
使用Web（HTML、CSS、JavaScript）開發的內容經過PhoneGap編譯打包爲各個平臺的Native App。

1.3 經典案例

來自PhoneGap Showcase[14]和其他數據源的資料顯示：

Facebook Mobile SDK[15]和SalesForce Mobile SDK[16]均是基於Cordova的分支開發的。
Facebook客戶端中Web代碼超過90%[17]。
LinkedIn iPad客戶端中Web代碼甚至超過95%。
Wikipedia更是直接用PhoneGap開發了自己的iOS/Android Hybrid App[18]，並將代碼在GitHub上開源 [19]。