User:Dcallahan/GeckoView: Difference between revisions

Revision as of 00:41, 28 September 2018

GeckoView is Firefox Quantum's engine, packaged as a reusable Android library.

GeckoView serves a similar purpose to Android's built-in WebView, but it has its own APIs and is not a drop in replacement.

Mozilla uses GeckoView to power Firefox Reality, Firefox Focus, and more.

Get Started

Building a browser? Check out Android Components, our collection of ready-to-use supporting libraries!

Configure Gradle

You need to add or edit four stanzas inside your module's build.gradle file.

1. Set the GeckoView version

Like Firefox, GeckoView has three release channels: Stable, Beta, and Nightly. Browse the Maven Repository to see currently available builds.

ext {
    geckoviewChannel = "nightly"
    geckoviewVersion = "64.0.20180927100037"
}

2. Add Mozilla's Maven repository

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

3. Configure build flavors

Note: Until we resolve Bug 1485045, you must configure a separate build variant for each CPU architecture.

android {
    // ...

    flavorDimensions "abi"

    productFlavors {
        x86     { dimension "abi" }
        x86_64  { dimension "abi" }
        arm     { dimension "abi" }
        aarch64 { dimension "abi" }
    }
}

4. Add GeckoView Implementations

dependencies {
    // ...

    x86Implementation     "org.mozilla.geckoview:geckoview-${geckoviewChannel}-x86:${geckoviewVersion}"
    x86_64Implementation  "org.mozilla.geckoview:geckoview-${geckoviewChannel}-x86_64:${geckoviewVersion}"
    armImplementation     "org.mozilla.geckoview:geckoview-${geckoviewChannel}-armeabi-v7a:${geckoviewVersion}"
    aarch64Implementation "org.mozilla.geckoview:geckoview-${geckoviewChannel}-arm64-v8a:${geckoviewVersion}"
}

Add GeckoView to a Layout

Inside a layout .xml file, add the following:

<org.mozilla.gecko.GeckoView
    android:id="@+id/geckoview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

Initialize GeckoView in an Activity

Note: These snippets are written in Kotlin

1. Import the GeckoView classes inside an Activity:

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

2. In that activity's onCreate function, add the following:

val view : GeckoView = findViewById(R.id.geckoview)
val session = GeckoSession()
val runtime = GeckoRuntime.create(this)

session.open(runtime)
view.session = session
session.loadUri("https://mozilla.org")

You're done!

Your application should now load and display a webpage inside of GeckoView.

To learn more about GeckoView's capabilities, review GeckoView's JavaDoc or the reference application.

Documentation and Examples

APIs

Building / Contributing / Bugs

See Mobile/Get_Involved and the Mozilla Developer Guide for information on how to contribute to GeckoView
Bugs are tracked in Bugzilla
We have a bug dashboard at Mobile/GeckoView/Bugs 🐛

Products / Examples

@@ Line 2: / Line 2: @@
 '''GeckoView is [https://www.mozilla.org/firefox/ Firefox Quantum's] engine, packaged as a reusable Android library.'''
+GeckoView serves a similar purpose to Android's built-in WebView, but it has its own APIs and is ''not'' a drop in replacement.
 Mozilla uses GeckoView to power [https://blog.mozilla.org/blog/2018/09/18/firefox-reality-now-available/ Firefox Reality], [https://www.mozilla.org/firefox/mobile/#focus Firefox Focus], and more.
@@ Line 14: / Line 16: @@
 '''1. Set the GeckoView version'''
+''Like Firefox, GeckoView has three release channels: Stable, Beta, and Nightly. Browse the [https://maven.mozilla.org/?prefix=maven2/org/mozilla/geckoview/ Maven Repository] to see currently available builds.
 <syntaxhighlight lang="Groovy">
 ext {
@@ Line 72: / Line 76: @@
 === Initialize GeckoView in an Activity ===
 ''Note: These snippets are written in [http://kotlinlang.org/ Kotlin]''
@@ Line 92: / Line 97: @@
 </syntaxhighlight>
-'''3. You're done!'''
+=== You're done! ===
+Your application should now load and display a webpage inside of GeckoView.
+To learn more about GeckoView's capabilities, review GeckoView's [https://mozilla.github.io/geckoview/javadoc/mozilla-central/ JavaDoc] or the [https://searchfox.org/mozilla-central/source/mobile/android/geckoview_example reference application].
+== Documentation and Examples ==
+'''APIs'''
+* [https://mozilla.github.io/geckoview/javadoc/mozilla-central/ JavaDoc API Documentation]
+* [https://mozilla-mobile.github.io/android-components/reference/ Android Components APIs]
-Launch your app to see GeckoView in action.
+'''Building / Contributing / Bugs'''
+* See [[Mobile/Get_Involved]] and the [https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Introduction Mozilla Developer Guide] for information on how to contribute to GeckoView
+* Bugs are tracked in [https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla Bugzilla]
+* We have a bug dashboard at [[Mobile/GeckoView/Bugs]] 🐛
-== Documentation ==
+'''Products / Examples'''
+* [https://blog.mozilla.org/blog/2018/09/18/firefox-reality-now-available/ Firefox Reality] ([https://github.com/mozillareality/firefoxreality GitHub])
+* [https://www.mozilla.org/firefox/mobile/#focus Firefox Focus] ([https://github.com/mozilla-mobile/focus-android/ GitHub])
+* [https://searchfox.org/mozilla-central/source/mobile/android/geckoview_example GeckoView Reference Application]