Membangun aplikasi web di WebView

Gunakan WebView untuk mengirimkan aplikasi web atau halaman web sebagai bagian dari aplikasi klien. Class WebView adalah ekstensi dari class View Android yang memungkinkan Anda menampilkan halaman web sebagai bagian dari tata letak aktivitas. WebView tidak menyertakan fitur browser web yang dikembangkan sepenuhnya, seperti kontrol navigasi atau kolom URL. Secara default, WebView hanya menampilkan halaman web.

WebView dapat membantu Anda memberikan informasi di aplikasi yang mungkin perlu diperbarui, seperti perjanjian pengguna akhir atau panduan pengguna. Dalam aplikasi Android, Anda dapat membuat Activity yang berisi WebView, lalu menggunakannya untuk menampilkan dokumen yang dihosting secara online.

WebView juga dapat membantu saat aplikasi Anda memberikan data kepada pengguna yang memerlukan koneksi internet untuk mengambil data, seperti email. Dalam hal ini, Anda mungkin merasa lebih mudah untuk membuat WebView di aplikasi Android yang menampilkan halaman web dengan semua data pengguna, daripada melakukan permintaan jaringan, lalu mengurai data dan merendernya dalam tata letak Android. Sebagai gantinya, Anda dapat mendesain halaman web yang disesuaikan untuk perangkat yang didukung Android, lalu menerapkan WebView di aplikasi Android yang memuat halaman web tersebut.

Dokumen ini menjelaskan cara memulai WebView, cara mengikat JavaScript dari halaman web Anda ke kode sisi klien di aplikasi Android, cara menangani navigasi halaman, dan cara mengelola jendela saat menggunakan WebView.

Menggunakan WebView di Android versi lama

Untuk menggunakan kemampuan WebView yang lebih baru dengan aman di perangkat tempat aplikasi Anda berjalan, tambahkan library Jetpack Webkit. Ini adalah library statis yang dapat Anda tambahkan ke aplikasi untuk menggunakan android.webkit API yang tidak tersedia untuk versi platform sebelumnya.

Tambahkan ke file build.gradle Anda sebagai berikut:

Kotlin

dependencies {
    implementation("androidx.webkit:webkit:1.8.0")
}

Groovy

dependencies {
    implementation ("androidx.webkit:webkit:1.8.0")
}

Pelajari contoh WebView di GitHub untuk mengetahui detail selengkapnya.

Menambahkan WebView ke aplikasi Anda

Untuk menambahkan WebView ke aplikasi, Anda dapat menyertakan elemen <WebView> dalam tata letak aktivitas atau menetapkan seluruh jendela Activity sebagai WebView di onCreate.

Menambahkan WebView di tata letak aktivitas

Untuk menambahkan WebView ke aplikasi Anda dalam tata letak, tambahkan kode berikut ke file XML tata letak aktivitas Anda:

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

Untuk memuat halaman web di WebView, gunakan loadUrl, seperti yang ditunjukkan dalam contoh berikut:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.loadUrl("http://www.example.com")

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

Catatan: Sebaiknya gunakan WebViewCompat.navigate di Jetpack Webkit, bukan loadUrl untuk meningkatkan penggantian entri histori, pelacakan callback siklus proses, dan dukungan header status tersimpan. Untuk mengetahui informasi selengkapnya, lihat Navigasi halaman yang ditingkatkan dengan WebViewCompat.navigate.

Menambahkan WebView di onCreate()

Untuk menambahkan WebView ke aplikasi Anda dalam metode onCreate() aktivitas, gunakan logika yang mirip dengan berikut ini:

Kotlin

val myWebView = WebView(activityContext)
setContentView(myWebView)

Java

WebView myWebView = new WebView(activityContext);
setContentView(myWebView);

Kemudian, muat halaman:

Kotlin

myWebView.loadUrl("http://www.example.com")

Java

myWebView.loadUrl("https://www.example.com");

Atau muat URL dari string HTML:

Kotlin

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
val unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
val encodedHtml = Base64.encodeToString(unencodedHtml.toByteArray(), Base64.NO_PADDING)
myWebView.loadData(encodedHtml, "text/html", "base64")

Java

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
String unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(),
        Base64.NO_PADDING);
myWebView.loadData(encodedHtml, "text/html", "base64");

Catatan: Ada batasan terkait hal yang dapat dilakukan HTML ini. Lihat loadData dan loadDataWithBaseURL untuk mengetahui info selengkapnya tentang opsi encoding.

Aplikasi Anda harus memiliki akses ke internet. Untuk mendapatkan akses internet, minta izin INTERNET dalam file manifes Anda, seperti yang ditunjukkan dalam contoh berikut:

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

Anda dapat menyesuaikan WebView dengan melakukan salah satu tindakan berikut:

• Mengaktifkan dukungan layar penuh menggunakan WebChromeClient. Class ini juga dipanggil saat WebView memerlukan izin untuk mengubah UI aplikasi host, seperti membuat atau menutup jendela atau mengirim dialog JavaScript kepada pengguna. Untuk mempelajari lebih lanjut proses debug dalam konteks ini, baca Men-debug aplikasi web.
• Menangani peristiwa yang memengaruhi rendering konten, seperti error pada pengiriman formulir atau navigasi menggunakan WebViewClient. Anda juga dapat menggunakan subclass ini untuk menangkap pemuatan URL.
• Mengaktifkan JavaScript dengan mengubah WebSettings.
• Menggunakan JavaScript untuk mengakses objek framework Android yang telah Anda injeksikan ke dalam WebView.

Menggunakan JavaScript di WebView

Jika halaman web yang ingin Anda muat di WebView menggunakan JavaScript, Anda harus mengaktifkan JavaScript untuk WebView. Setelah mengaktifkan JavaScript, Anda dapat membuat antarmuka antara kode aplikasi dan kode JavaScript.

Aktifkan JavaScript

JavaScript dinonaktifkan di WebView secara default. Anda dapat mengaktifkannya melalui WebSettings yang terpasang pada WebView. Ambil WebSettings dengan getSettings, lalu aktifkan JavaScript dengan setJavaScriptEnabled.

Lihat contoh berikut:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

WebSettings menyediakan akses ke berbagai setelan lain yang mungkin berguna bagi Anda. Misalnya, jika Anda mengembangkan aplikasi web yang dirancang khusus untuk WebView di aplikasi Android, Anda dapat menentukan string agen pengguna kustom dengan setUserAgentString, lalu mengkueri agen pengguna kustom di halaman web untuk memverifikasi bahwa klien yang meminta halaman web Anda adalah aplikasi Android Anda.

Mengikat kode JavaScript ke kode Android

Saat mengembangkan aplikasi web yang dirancang khusus untuk WebView di aplikasi Android, Anda dapat membuat antarmuka antara kode JavaScript dan kode Android sisi klien. Misalnya, kode JavaScript Anda dapat memanggil metode dalam kode Android untuk menampilkan Dialog, bukan menggunakan fungsi alert() JavaScript.

Untuk mengikat antarmuka baru antara kode JavaScript dan Android, panggil addJavascriptInterface, dengan meneruskan instance class untuk diikat ke JavaScript dan nama antarmuka yang dapat dipanggil JavaScript untuk mengakses class.

Peringatan: Dengan menggunakan addJavascriptInterface, JavaScript dapat mengontrol aplikasi Android Anda. Meskipun dapat berguna, hal ini juga dapat menjadi masalah keamanan yang berbahaya. Jika HTML di WebView tidak dapat dipercaya—misalnya, sebagian atau seluruh HTML disediakan oleh orang atau proses yang tidak dikenal—penyerang dapat menyertakan HTML yang mengeksekusi kode sisi klien Anda dan mungkin kode apa pun yang dipilih penyerang. Oleh karena itu, jangan gunakan addJavascriptInterface() kecuali jika Anda menulis semua HTML dan JavaScript yang muncul di WebView. Jangan izinkan pengguna membuka halaman web yang bukan milik Anda dalam WebView. Sebagai gantinya, biarkan aplikasi browser default pengguna membuka link asing. Secara default, browser web pengguna membuka semua link URL, sehingga peringatan ini terutama berlaku jika Anda menangani navigasi halaman sendiri, seperti yang dijelaskan di bagian berikut.

Untuk mempelajari lebih lanjut komunikasi antara JavaScript dan kode native, termasuk API yang lebih modern dan aman, lihat Mengakses API native dengan JSBridge.

Misalnya, Anda dapat menyertakan class berikut di aplikasi Android:

Kotlin

/** Instantiate the interface and set the context.  */
class WebAppInterface(private val mContext: Context) {

    /** Show a toast from the web page.  */
    @JavascriptInterface
    fun showToast(toast: String) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
    }
}

Java

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context. */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page. */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

Perhatian: Jika Anda menetapkan targetSdkVersion ke 17 atau yang lebih baru, tambahkan anotasi @JavascriptInterface ke metode apa pun yang ingin Anda sediakan untuk JavaScript. Metode harus bersifat publik. Jika Anda tidak memberikan anotasi ini, metode tersebut tidak dapat diakses oleh halaman web Anda.

Dalam contoh ini, class WebAppInterface memungkinkan halaman web membuat pesan Toast, menggunakan metode showToast().

Anda dapat mengikat class ini ke JavaScript yang berjalan di WebView dengan addJavascriptInterface(), seperti yang ditunjukkan dalam contoh berikut:

Kotlin

val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")

Java

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

Tindakan ini akan membuat antarmuka bernama Android untuk JavaScript yang berjalan di WebView. Pada tahap ini, aplikasi web Anda memiliki akses ke class WebAppInterface. Misalnya, berikut adalah beberapa HTML dan JavaScript yang membuat pesan toast menggunakan antarmuka baru saat pengguna mengetuk tombol:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

Anda tidak perlu melakukan inisialisasi antarmuka Android dari JavaScript. WebView akan otomatis menyediakannya untuk halaman web Anda. Jadi, saat pengguna mengetuk tombol, fungsi showAndroidToast() akan menggunakan antarmuka Android untuk memanggil metode WebAppInterface.showToast().

Catatan: Objek yang terikat ke JavaScript Anda berjalan di thread lain, bukan di thread tempat objek tersebut dibuat.

Menangani navigasi halaman

Saat pengguna mengetuk link dari halaman web di WebView, secara default, Android akan meluncurkan aplikasi yang menangani URL. Biasanya, browser web default akan terbuka dan memuat URL tujuan. Namun, Anda dapat mengganti perilaku ini untuk WebView Anda sehingga link terbuka dalam WebView Anda. Kemudian, Anda dapat mengizinkan pengguna menjelajahi histori halaman web mereka yang dikelola oleh WebView.

Catatan: Untuk alasan keamanan, aplikasi browser sistem tidak membagikan data aplikasinya ke aplikasi Anda.

Untuk membuka link yang diketuk oleh pengguna, berikan WebViewClient untuk WebView menggunakan setWebViewClient. Semua link yang diketuk pengguna akan dimuat di WebView Anda. Jika Anda ingin memiliki kontrol lebih besar atas tempat link yang diklik dimuat, buat WebViewClient Anda sendiri yang mengganti metode shouldOverrideUrlLoading. Contoh berikut mengasumsikan bahwa MyWebViewClient adalah class dalam dari Activity.

Kotlin

private class MyWebViewClient : WebViewClient() {

    override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
        if (Uri.parse(url).host == "www.example.com") {
            // This is your website, so don't override. Let your WebView load
            // the page.
            return false
        }
        // Otherwise, the link isn't for a page on your site, so launch another
        // Activity that handles URLs.
        Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply {
            startActivity(this)
        }
        return true
    }
}

Java

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        if ("www.example.com".equals(request.getUrl().getHost())) {
      // This is your website, so don't override. Let your WebView load the
      // page.
      return false;
    }
    // Otherwise, the link isn't for a page on your site, so launch another
    // Activity that handles URLs.
    Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl());
    startActivity(intent);
    return true;
  }
}

Kemudian, buat instance WebViewClient baru ini untuk WebView:

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()

Java

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

Sekarang, saat pengguna mengetuk link, sistem akan memanggil metode shouldOverrideUrlLoading, yang memeriksa apakah host URL cocok dengan domain tertentu, seperti yang ditentukan dalam contoh sebelumnya. Jika cocok, metode akan menampilkan nilai salah dan tidak mengganti pemuatan URL. Tindakan ini memungkinkan WebView memuat URL seperti biasa. Jika host URL tidak cocok, Intent akan dibuat untuk meluncurkan Activity default untuk menangani URL, yang di-resolve ke browser web default pengguna.

Menangani URL kustom

WebView menerapkan batasan saat meminta resource dan me-resolve link yang menggunakan skema URL kustom. Misalnya, jika Anda menerapkan callback seperti shouldOverrideUrlLoading atau shouldInterceptRequest, WebView hanya akan memanggilnya untuk URL yang valid.

Misalnya, WebView mungkin tidak memanggil metode shouldOverrideUrlLoading Anda untuk link seperti ini:

<a href="showProfile">Show Profile</a>

URL yang tidak valid, seperti yang ditunjukkan dalam contoh sebelumnya, ditangani secara tidak konsisten di WebView, jadi sebaiknya gunakan URL yang terbentuk dengan baik. Anda dapat menggunakan skema kustom atau URL HTTPS untuk domain yang dikontrol organisasi Anda.

Daripada menggunakan string sederhana dalam link, seperti pada contoh sebelumnya, Anda dapat menggunakan skema kustom seperti berikut:

<a href="example-app:showProfile">Show Profile</a>

Kemudian, Anda dapat menangani URL ini dalam metode shouldOverrideUrlLoading seperti ini:

Kotlin

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
const val APP_SCHEME = "example-app:"

override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
    return if (url?.startsWith(APP_SCHEME) == true) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length), "UTF-8")
        respondToData(urlData)
        true
    } else {
        false
    }
}

Java

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
private static final String APP_SCHEME = "example-app:";

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith(APP_SCHEME)) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length()), "UTF-8");
        respondToData(urlData);
        return true;
    }
    return false;
}

shouldOverrideUrlLoading API terutama ditujukan untuk meluncurkan intent untuk URL tertentu. Saat mengimplementasikannya, pastikan untuk menampilkan false untuk URL yang ditangani WebView. Namun, Anda tidak terbatas pada peluncuran intent. Anda dapat mengganti intent peluncuran dengan perilaku kustom apa pun dalam contoh kode sebelumnya.

Perhatian: Jangan panggil WebViewCompat.navigate, loadUrl, reload, atau metode serupa dari dalam shouldOverrideUrlLoading. Hal ini menyebabkan aplikasi tidak efisien. Akan lebih efisien jika menampilkan false untuk mengizinkan WebView melanjutkan pemuatan URL dengan implementasi defaultnya.

Menjelajahi histori halaman web

Saat WebView mengganti pemuatan URL, WebView akan otomatis mengumpulkan histori halaman web yang dikunjungi. Anda dapat menavigasi mundur dan maju melalui histori dengan goBack dan goForward.

Misalnya, berikut ini menunjukkan cara Activity Anda dapat menggunakan tombol Kembali perangkat untuk menavigasi mundur:

Kotlin

override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
    // Check whether the key event is the Back button and if there's history.
    if (keyCode == KeyEvent.KEYCODE_BACK && myWebView.canGoBack()) {
        myWebView.goBack()
        return true
    }
    // If it isn't the Back button or there isn't web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event)
}

Java

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check whether the key event is the Back button and if there's history.
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it isn't the Back button or there's no web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event);
}

Jika aplikasi Anda menggunakan Jetpack AppCompat 1.6.0+, Anda dapat menyederhanakan cuplikan sebelumnya lebih lanjut:

Kotlin

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack()
    }
}

Java

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack();
    }
}

Metode canGoBack menampilkan nilai benar (true) jika ada histori halaman web yang dapat dikunjungi pengguna. Demikian pula, Anda dapat menggunakan canGoForward untuk memeriksa apakah ada histori maju. Jika Anda tidak melakukan pemeriksaan ini, setelah pengguna mencapai akhir histori, goBack dan goForward tidak akan melakukan apa pun.

Untuk mempertahankan histori navigasi di seluruh pembuatan ulang aktivitas atau reklamasi proses latar belakang, gunakan saveState untuk melakukan serialisasi histori navigasi WebView ke dalam Bundle, dan restoreState untuk memulihkannya. Untuk panduan tentang cara mengelola batas ukuran status tersimpan dengan aman dan menghindari TransactionTooLargeException, lihat Mengelola status WebView secara efisien.

Menangani perubahan konfigurasi perangkat

Selama runtime, perubahan status aktivitas terjadi saat konfigurasi perangkat berubah, seperti saat pengguna memutar perangkat atau menutup editor metode input (IME). Perubahan ini menyebabkan aktivitas objek WebView dihancurkan dan aktivitas baru dibuat, yang juga membuat objek WebView baru yang memuat URL objek yang dihancurkan. Anda dapat menggunakan saveState dalam onSaveInstanceState() dan restoreState setelah pembuatan ulang untuk memulihkan konteks navigasi pengguna. Untuk mengetahui strategi mengelola ukuran status dengan aman, lihat Mengelola status WebView secara efisien.

Untuk mengubah perilaku default aktivitas, Anda dapat mengubah cara aktivitas menangani perubahan orientation dalam manifes. Untuk mempelajari lebih lanjut cara menangani perubahan konfigurasi selama runtime, baca Menangani perubahan konfigurasi.

Kelola jendela

Secara default, permintaan untuk membuka jendela baru akan diabaikan. Hal ini berlaku baik jika jendela tersebut dibuka oleh JavaScript maupun oleh atribut target dalam link. Anda dapat menyesuaikan WebChromeClient untuk memberikan perilaku Anda sendiri untuk membuka beberapa jendela.

Untuk menjaga keamanan aplikasi Anda, sebaiknya cegah pop-up dan jendela baru terbuka. Cara paling aman untuk menerapkan perilaku ini adalah dengan meneruskan "true" ke setSupportMultipleWindows, tetapi tidak mengganti metode onCreateWindow, yang menjadi dependensi setSupportMultipleWindows(). Logika ini mencegah pemuatan halaman apa pun yang menggunakan target="_blank" di link-nya.

Mengelola memori dan performa

Karena WebView berjalan di mesin berbasis Chromium dengan proses terpisah dan kode native, penggunaan memori dasarnya lebih tinggi daripada tampilan Android standar. Menggunakan kembali instance WebView dan menghancurkannya dengan benar sangat penting untuk mempertahankan aplikasi yang stabil.

Perhatian: Instance WebView mempertahankan memori bahkan setelah tampilan dihapus dari tata letak. Untuk mencegah kebocoran memori Activity dan error kehabisan memori (OOM), Anda harus secara eksplisit menghapus WebView dari ViewGroup induknya dan memanggil destroy() saat tampilan tidak lagi diperlukan.

Untuk mengetahui informasi selengkapnya tentang cara mendiagnosis dan mengoptimalkan jejak memori aplikasi Anda saat menggunakan konten web, lihat Mengelola dan mendiagnosis memori WebView.