Mari kita akui bahwa kita semua memiliki hubungan cinta-benci dengan WebViews. Kita tidak bisa hidup bersama mereka dan kita tidak bisa hidup tanpa mereka. Meskipun menggunakan WebView menurunkan pengalaman pengguna aplikasi, ada beberapa tempat di mana kita tidak dapat melakukannya tanpanya. Jadi meski tidak mau, kami akhirnya menggunakan WebViews di aplikasi kami.

Dalam posting ini saya akan mencoba membahas poin-poin berikut mengenai WebViews

  • Muat file html lokal ke dalam WebView dengan pengaturan WebView dasar.
  • Tangani panggilan balik Javascript dari Javascript ke klien.
  • Lakukan panggilan balik Javascript dari klien ke Javascript.
  • Setel WebViewClient ke WebView
  • Men-debug WebView

Aplikasi Demo:

Saya akan menggunakan demo aplikasi untuk posting ini. Aplikasi ini memiliki satu WebActivity yang memuat WebView di dalamnya. Halaman html yang dimuat di WebView memiliki 2 tombol. (Lihat Gambar 1)

  • Klik untuk menampilkan tombol Toast Message- Tombol ini akan membuat panggilan balik javascript bersama dengan string yang akan ditampilkan sebagai Toast di klien. (Lihat Gambar 2)
  • Tombol Klik untuk Memuat Teks di WebView - Tombol ini akan membuat panggilan balik javascript di klien. Setelah menerima panggilan balik, klien akan memanggil fungsi Javascript yang akan mengatur teks di dalam html. (Lihat Gambar 3).

Perkenalan

Untuk menggunakan WebView, deklarasikan kode berikut dalam file xml.

WebView memiliki banyak sekali “pengaturan” dan memahami semua pengaturan ini pada awalnya bisa jadi sedikit membingungkan. Jadi, dalam posting ini saya akan membahas pengaturan minimum yang diperlukan untuk memuat WebView apa pun.

setJavaScriptEnabled(boolean diaktifkan)
Fungsi ini menentukan apakah klien dapat menerima callback dari Javascript dan klien dapat melakukan panggilan ke fungsi Javascript. Jika disetel ke false, tidak akan ada komunikasi antara klien dan halaman Js/html.

setCacheMode(int mode)
Fungsi ini adalah salah satu fungsi terpenting untuk menentukan bagaimana kinerja WebView. Jika halaman html yang dirender adalah html statis atau html dengan sumber daya yang cenderung tidak berubah seiring waktu, maka sangat disarankan untuk mengaktifkan Cache untuk halaman html. Lihat metode "ini" untuk melihat berbagai jenis caching yang tersedia untuk Halaman Web.

setVerticalScrollBarEnabled(boolean diaktifkan)
Seperti namanya, fungsi ini akan mengaktifkan atau menonaktifkan pengguliran vertikal di WebView.

setHorizontalScrollBarEnabled(boolean diaktifkan)
Seperti namanya, fungsi ini akan mengaktifkan atau menonaktifkan pengguliran horizontal di WebView.

setUseWideViewPort(boolean diaktifkan)
Jika disetel ke true, laman html akan mengambil ukurannya sendiri. yaitu lebar dan tinggi yang dinyatakan di halaman html. Jika disetel ke false, halaman akan berisi dimensi perangkat.

Berdasarkan pengaturan di atas, kami menginisialisasi WebView kami.

Klien Menerima Panggilan Balik dari Javascript:

Bagi klien, untuk menerima panggilan balik dari Javascript harus ada kelas antarmuka Javascript di dalamnya yang akan mengimplementasikan panggilan balik tersebut. Callback harus memiliki nama dan jumlah argumen yang sama seperti yang dipanggil melalui Javascript. Selain itu, semua callback ini harus dianotasi dengan anotasi @JavascriptInterface. Tanpa anotasi ini, metode tidak akan dipanggil. Di kelas di bawah ini, saya telah mendeklarasikan dua fungsi handleMessage()dansetWebViewTextCallback()yang akan dipanggil oleh Javascript.

WebView menambahkan antarmuka Javascript seperti ini.

webView.addJavascriptInterface(new WebViewJsInterface(webView), "handler");

Argumen kedua pada addJavascriptInterface akan menjadi penangan melalui Javascript yang akan memanggil fungsi yang diimplementasikan di klien.

Fungsi-fungsi berikut diimplementasikan dalam Javascript:

Jadi segera setelah pengguna mengklik tombol pertama, potongan kode berikut akan dieksekusi di javascript.
handler.handleMessage('Ini adalah pesan roti panggang dari Javascript !!')

Karena handleMessage()diimplementasikan di klien, metode ini akan dipanggil dan pesan Toast akan ditampilkan.

Klien melakukan panggilan fungsi ke Javascript

Ada kalanya klien ingin memanggil fungsi Javascript. Anggaplah kita mempunyai fungsi setText() yang diimplementasikan dalam file Javascript kita.

Untuk memanggil fungsi itu, kita perlu membuat sebuah String dan kemudian memanggil fungsi WebView dengan argumen string. String dibuat sebagai berikut
functionName(Object… params).
Jadi jika kita perlu memanggil fungsi di atas, maka kita harus meneruskan setText('This is teks dari Android yang diatur di halaman html.') sebagai argumen.

Saya telah menulis fungsi utilitas yang mengambil nama fungsi yang akan dipanggil dan parameternya serta mengembalikan skrip.

Terakhir ketika kita mendapatkan stringnya, kita memanggil fungsi WebView. Sekarang berdasarkan API Level, ada dua fungsi berbeda yang perlu kita panggil.

Untuk API Level 18 dan di bawahnya: kita perlu memanggil fungsi loadUrl.
webView.loadUrl(“javascript:”+ skrip);

Untuk API Level 19 ke atas:kita perlu memanggil metode evaluateJavascript. Fungsi ini mengambil argumen dan juga mengembalikan nilai yang dikembalikan oleh metode pemanggil.

Saya telah menulis fungsi utilitas yang menggunakan argumen String untuk dipanggil dan berdasarkan Level API Android, memanggil fungsi yang sesuai.

Setel WebViewClient ke WebView

Dengan bantuan WebViewClient, klien mendapat kontrol lebih besar atas halaman web yang sedang dimuat. Klien dapat menerima berbagai panggilan balik seperti ketika WebView mulai memuat, ketika WebView telah memuat, dll. Itu selalu merupakan praktik yang baik untuk memperluas WebViewClient dan kemudian melampirkannya ke WebView.

Untuk tujuan demonstrasi, saya mengganti beberapa fungsi WebViewClient dan meletakkan log di sekitarnya. Dalam aplikasi nyata, fungsi-fungsi yang diganti ini akan digunakan untuk lebih banyak hal.

Sekarang atur klien WebView sebagai berikut:

webView.setWebViewClient(new CustomWebViewClient());

Men-debug WebView

Kita dapat men-debug WebView di Alat Pengembang Chrome sebagai halaman web biasa. Untuk mengaktifkan debugging WebView kita perlu menambahkan kode berikut.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WebView.setWebContentsDebuggingEnabled(true);
}

Sekarang ketika aplikasi dijalankan, buka chrome://inspect/#devicesdan pilih WebView yang sesuai dan Anda siap melakukannya. Untuk informasi lebih lanjut tentang Debugging WebView, ikuti artikel ini.

Proyek ini dihosting di Github.
Terima kasih telah membaca artikel ini. Jika Anda merasa artikel ini bermanfaat, silakan rekomendasikan.

Lihat proyek Github saya yang lain di sini dan artikel media saya yang lain di sini. Juga, mari terhubung di LinkedIn.

Untuk informasi lebih lanjut tentang pemrograman, ikuti Mindorks , sehingga Anda akan mendapat pemberitahuan saat kami menulis postingan baru.

Bergabunglah dengan Komunitas Mindorks dan Belajar Satu Sama Lain.