開發 Hybird App 時,不同版本的 Android 有著不同的 WebView 實作,造成同一組 JavaScript 或 CSS 有著不同的表現,尤其是 CSS 屬性支援的差異,造成介面不容易控制,有這種困擾的時候,Crosswalk 的出現,頓時讓生命美好了。

Crosswalk 解決了什麼?

Crosswalk 來自於 Intel Open Source Technology Center,致力於開源項目的組織,他在官網裡寫到一句話:

沒有開發者希望老舊過時的設備阻止他們使用最新最酷的 API

這個感覺就像是當年 IE 市占率還很高的時代,很多好用的 API 因為 IE 不支援只能大嘆 IE 不長進,因此讓網站開發人員的生命蒙上了一層灰,也因此誕生了很多 IE 的 polyfills,例如:HTML5 ShimSelectivizr 等等。

Crosswalk 要解決的就是這 API 不一至的環境,讓各種版本的 WebView 有一致表現。

怎麼做到的?

要了解 Crosswalk 是怎麼達成的,看一下這 3 分鐘的影片,非常的清楚。

影片中所介紹的使用流程如下:

Using the Crosswalk webview plugin

簡單來說,Crosswalk 是使用最新版本的 Google Chromium 來實作 web runtime,來替代既有的裝置內建的 WebView,使開發者能使用最新的 Web 技術和 API,例如:WebRTC、WebGL、CSS feature queries、Current Flexbox、WOFF web fonts 等。

在 Cordava 專案上要怎麼做?

目標平台至少要是 iOS 8+ 或 Anriod 4.0+ 的平台。

在官方網站有很清楚的 Android 操作流程

首先要先確認 Cordova CLI 的版本是 5.0 以上,安裝的 Cordova Android platform 是 4.0 以上,然後在專案目錄下安裝 Crosswalk 套件即可,指令如下:

$ cordova plugin add cordova-plugin-crosswalk-webview

這樣之後在執行 cordova build android 編譯專案時,會自動下載穩定版的 Crosswalk WebView libraries 並封裝進 apk 中,且會有兩個版本:

  • android-armv7-debug.apk 提供給 ARM 處理器的設備
  • android-x86-debug.apk 提供給 x86 處理器的設備(例如 Intel 的處理器)

有缺點嗎?

這麼優秀的工具,當然…也是有缺點 XD。

因為 Crosswalk 取代了裝置上原生的 WebView,也就表示他必須實作一個新的 WebView 給你的 Hybird App 來使用,所以使用 Crosswalk 最大的缺點就是,你的 App 會因此肥了 15~20MB,是胖滿多的。

Crosswalk 團隊也知道這是個問題,因此推出了 Crosswalk Lite 版本,縮減了將近一半的空間,當然這也取消了不少功能,例如:WebRTC、WebDatabase 等,詳請見此清單

如果這點空間對你的 App 來說不是甚麼缺點,或著老闆覺得這不是問題,那這個好物,的確是可以省了不少麻煩事。


參考資料:


Poy Chang

Trial and Error