[Android] Crosswalk: 取代 WebView 的函式庫

Android 原生的 WebView ,必須相依於 Android 底層作業系統。Android 的版本碎片化的情況,也使得 WebView 可能依賴於不同的版本,導致手機 Web App 的開發者不容易控制應用程式的品質。

Crosswalk 是一個由 Intel 支持的開源專案,旨在提供高效且一致的 WebView 函式庫,其背後的引擎使用的是 Chromium。相容於 Android ARM 和 x86 版本、iOS、Windows,也支援 Cordova。

依照 Intel 網站上的說法,Crosswalk for Android 在執行 HTML5 的效能,比 Android 原生的 WebView 更佳。
來源: https://software.intel.com/en-us/xdk/docs/why-use-crosswalk-for-android-builds

以下介紹如何在 Android Project 中使用 Crosswalk。


首先,從 Maven 取得 Crosswalk 函式庫。
這裡要先指定 Maven 的 Repository
repositories {
    maven {
        url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
    }
}

然後指定函式庫名稱及版本號,這裡的函式庫包含 ARM 和 X86 版本,函式庫約有 40 MB,因此會造成編譯後的 APK 檔案膨脹。
compile 'org.xwalk:xwalk_core_library:15.44.384.12'

在頁面 Layout處,加入以下區塊
<org.xwalk.core.XWalkView
    android:id="@+id/webView"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

最後,簡單加上兩行程式碼,就能顯示 Crosswalk 的 WebView。
XWalkView webView = (XWalkView) findViewById(R.id.webView);
webView.load("http://www.google.com", null);

使用 setUIClient,可以藉由複寫 onPageLoadStarted 和 onPageLoadStopped 兩個方法,來得知 WebView 開始載入頁面,和已完成頁面載入。
webView.setUIClient(new XWalkUIClient(webView) {

    @Override
    public void onPageLoadStarted(XWalkView view, String url) {
        super.onPageLoadStarted(view, url);
        Log.d(TAG, "onPageLoadStarted");
    }

    @Override
    public void onPageLoadStopped(XWalkView view, String url, LoadStatus status) {
        super.onPageLoadStopped(view, url, status);
        Log.d(TAG, "onPageLoadStopped");
    }
});

若複寫 onProgresChanged 方法,則可得知網頁載入的進度。
webView.setResourceClient(new XWalkResourceClient(webView) {
    @Override
    public void onProgressChanged(XWalkView view, int progressInPercent) {
        super.onProgressChanged(view, progressInPercent);
        Log.d(TAG, "onProgressChanged = " + progressInPercent);
    }
});

實測 Crosswalk 發現,載入網頁的效能確實比原生的 WebView 快不少,Crosswalk 也支援相當多 HTML5 多媒體 API 可供呼叫,但使用 Crosswalk 造成 APK 檔案過大則會是在使用上需要考量的問題。

最後,要在Activity結束後將WebView釋放,以避免記憶體泄漏的問題。

    @Override
    protected void onPause() {
        super.onPause();
        if (webView != null) {
            webView.pauseTimers();
            webView.onHide();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (webView != null) {
            webView.resumeTimers();
            webView.onShow();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (webView != null) {
            webView.onDestroy();
        }

參考資料






分類:

Copyright © Andy Cheng

Distributed By My Blogger Themes | Blogger Theme By NewBloggerThemes Up ↑