【Kotlin】以 Mozilla GeckoView 取代 webview

參考資料 ----

Getting Started with GeckoView

GeckoView Maven Repository

Mobile/GeckoView

Android 內建的 webview 元件在顯示的體驗上不是很好，某些網頁版面的顯示結果就是不像真正的瀏覽器，而 Mozilla 的 Gecko View 是真正的瀏覽器引擎。

去 GeckoView Maven Repository 尋找您要的版本號；在本筆記，選擇穩定版 100.0.20220425210429

開發工具：Android Studio Chipmunk 2021.2.1 Patch 2

Project 層級 build.gradle

 
buildscript {
    ext.kotlin_version = "1.7.10"
    repositories {
        google()
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:7.2.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}


allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}
 

app 層級 build.gradle

 
plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

ext {
    geckoviewChannel="arm64-v8a"
    geckoviewVersion="100.0.20220425210429"
}

...
...

android {
    compileSdkVersion 33
    
    ...
    ...
    
    // Note: compileOptions is only required for minSdkVersion < 24
    compileOptions {
        // sourceCompatibility JavaVersion.VERSION_1_8
        // targetCompatibility JavaVersion.VERSION_1_8
        sourceCompatibility JavaVersion.VERSION_11  // 若採用這個, 則 compileSdkVersion 要指定 33(含) 以上
        targetCompatibility JavaVersion.VERSION_11
    }
}

...
...

repositories {
    maven {
        url "https://maven.mozilla.org/maven2/"
    }
}

...
...

dependencies {

    ...
    ...
    
    // mozilla geckoview
    implementation "org.mozilla.geckoview:geckoview-${geckoviewChannel}:${geckoviewVersion}"
}

 

如果有出現類似

Build was configured to prefer settings repositories over project repositories but repository '???' was added by build file 'build.gradle' 

的錯誤訊息，可能是您的專案套用了 Gradle6.8 的新規定，那就修改 settings.gradle ，將 dependencyResolutionManagement 這個區塊 註解 或 刪除，我是去參照其他舊專案，只留下 2 列，如下：

settings.gradle

 
rootProject.name = "專案名"
include ':app'
 

AndroidManifest.xml

 
<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
        ...
</manifest>
 

activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <org.mozilla.geckoview.GeckoView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/geckoview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        tools:context=".MainActivity" />

</RelativeLayout>
 

MainActivity.kt

 
...
...

import org.mozilla.geckoview.GeckoRuntime;
import org.mozilla.geckoview.GeckoSession;
import org.mozilla.geckoview.GeckoView;

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var view:GeckoView = findViewById(R.id.geckoview)
        val session = GeckoSession()
        val runtime = GeckoRuntime.create(this)
        
        session.contentDelegate = object : ContentDelegate {}
        if(runtime==null) {
            runtime = GeckoRuntime.create(this)
        }
        
        session.open(runtime)
        view.setSession(session)
        session.loadUri("https://tw.yahoo.com")
    }
}
 

在 ZenFon5 跑的反應速度有點慢，且編譯出來的 apk 頗大 -- 139MB !! 不過呈現的畫面的確較 webview 細緻。