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. Fitur ini tidak mencakup
fitur browser web yang dikembangkan sepenuhnya, seperti kontrol navigasi atau
kolom URL. Semua yang dilakukan WebView
, secara default, 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 menyediakan data kepada pengguna yang memerlukan
koneksi internet untuk mengambil data, seperti email. Dalam hal ini, Anda mungkin
merasa lebih mudah untuk mem-build WebView
di aplikasi Android yang menampilkan halaman
web dengan semua data pengguna daripada melakukan permintaan jaringan, kemudian
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 Anda 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 Anda, cara
menangani navigasi halaman, dan cara mengelola jendela saat menggunakan WebView
.
Menggunakan WebView pada versi Android sebelumnya
Untuk menggunakan kemampuan WebView
yang lebih baru dengan aman di perangkat tempat aplikasi Anda
berjalan, tambahkan library AndroidX
Webkit. Library ini adalah library
statis yang dapat ditambahkan ke aplikasi Anda 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") }
Jelajahi contoh
WebView
di GitHub untuk mengetahui detail selengkapnya.
Menambahkan WebView ke aplikasi
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 di 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 pada 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");
Menambahkan WebView di onCreate()
Untuk menambahkan WebView
ke aplikasi Anda dalam metode onCreate()
aktivitas, gunakan
logika yang mirip dengan yang 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");
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 saatWebView
memerlukan izin untuk mengubah UI aplikasi host, seperti membuat atau menutup jendela atau mengirimkan 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 masukkan
ke dalam
WebView
.
Menggunakan JavaScript di WebView
Jika halaman web yang ingin Anda muat di WebView
menggunakan JavaScript, Anda harus mengaktifkan JavaScript untuk WebView
Anda. Setelah mengaktifkan JavaScript, Anda dapat membuat antarmuka di antara kode aplikasi dan kode JavaScript Anda.
Mengaktifkan JavaScript
JavaScript dinonaktifkan di WebView
secara default. Anda dapat mengaktifkannya melalui WebSettings
yang dilampirkan ke WebView
Anda. 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
memberikan akses ke berbagai setelan lain yang mungkin
berguna. Misalnya, jika mengembangkan aplikasi web yang dirancang khusus untuk WebView
di aplikasi Android, Anda dapat menentukan string agen pengguna kustom dengan setUserAgentString()
, lalu membuat kueri agen pengguna kustom di halaman web Anda 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 di 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 mengikat ke JavaScript dan nama antarmuka
yang dapat dipanggil oleh JavaScript Anda untuk mengakses class.
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(); } }
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
secara otomatis menyediakannya untuk halaman web Anda. Jadi, saat pengguna
mengetuk tombol tersebut, fungsi showAndroidToast()
akan menggunakan antarmuka Android
untuk memanggil metode WebAppInterface.showToast()
.
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 membuka dan
memuat URL tujuan. Namun, Anda dapat mengganti perilaku ini untuk
WebView
sehingga link akan terbuka dalam WebView
. Selanjutnya, Anda dapat mengizinkan pengguna menavigasi mundur dan maju di histori halaman web mereka yang dikelola oleh WebView
Anda.
Untuk membuka link yang diketuk oleh pengguna, berikan WebViewClient
untuk WebView
Anda menggunakan
setWebViewClient()
.
Semua link yang diketuk pengguna akan dimuat di WebView
Anda. Jika Anda menginginkan kontrol lebih besar terhadap
lokasi pemuatan link yang diklik, buat WebViewClient
Anda sendiri yang menggantikan
metode
shouldOverrideUrlLoading()
. Contoh berikut mengasumsikan bahwa MyWebViewClient
adalah class dalam
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());
Kini, 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 menggantikan pemuatan URL. Fungsi 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 menyelesaikan link
yang menggunakan skema URL kustom. Misalnya, jika Anda mengimplementasikan callback seperti
shouldOverrideUrlLoading()
atau
shouldInterceptRequest()
,
WebView
akan memanggilnya hanya 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 di contoh sebelumnya, ditangani secara tidak konsisten di WebView
. Jadi, sebaiknya gunakan URL dengan format yang benar.
Anda dapat menggunakan skema kustom atau URL HTTPS untuk domain yang dikontrol organisasi.
Daripada menggunakan string sederhana di link, seperti pada contoh sebelumnya, Anda dapat menggunakan skema kustom seperti berikut:
<a href="example-app:showProfile">Show Profile</a>
Anda kemudian 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
bagi URL tertentu. Saat menerapkannya, pastikan menampilkan false
untuk URL
yang ditangani WebView
. Namun, Anda tidak dibatasi untuk meluncurkan intent. Anda dapat
mengganti intent peluncuran dengan perilaku kustom apa pun dalam contoh kode
sebelumnya.
Menavigasi histori halaman web
Saat 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, contoh berikut menunjukkan cara Activity
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 AndroidX AppCompat
1.6.0+, Anda dapat menyederhanakan cuplikan
sebelumnya:
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()
akan menampilkan nilai benar jika ada histori halaman web yang dapat dikunjungi pengguna. Demikian pula, Anda
dapat menggunakan canGoForward()
untuk
memeriksa apakah ada histori penerusan. Jika Anda tidak melakukan pemeriksaan ini, setelah pengguna mencapai akhir histori, goBack()
dan goForward()
tidak akan melakukan apa pun.
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 akan membuat objek WebView
baru yang memuat
URL objek yang dihancurkan. Untuk mengubah perilaku default aktivitas, Anda dapat
mengubah caranya 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 akan tetap berlaku, baik ketika dibuka oleh JavaScript maupun oleh atribut target dalam link. Anda dapat menyesuaikan
WebChromeClient
untuk memberikan perilaku Anda sendiri saat membuka beberapa
jendela.
Agar aplikasi Anda lebih aman, sebaiknya cegah jendela pop-up dan jendela baru
dibuka. Cara paling aman untuk menerapkan perilaku ini adalah dengan meneruskan "true"
ke dalam
setSupportMultipleWindows()
,
tetapi tidak mengganti
metode onCreateWindow()
,
yang menjadi dependensi setSupportMultipleWindows()
. Logika ini mencegah
setiap halaman yang menggunakan target="_blank"
di link-nya untuk dimuat.