Memaksimalkan Penggunaan WebView pada Android
Teman-teman pengembang aplikasi android pasti sudah tidak asing lagi dengan sebutan WebView. Buat yang belum familiar, WebView adalah view di Android untuk menampilkan sebuah tampilan HTML yang didapatkan dari URL maupun file HTML yang kita simpan di lokal storage aplikasi. Selain URL dan file lokal, WebView juga bahkan bisa menampilkan HTML secara hardcode dalam bentuk string (itupun kalau kita ngga males bikin HTML nya di dalam kode Java/Kotlin kita sebagai string). Singkatnya kamu bisa nampilin HTML di aplikasi android kamu, yang artinya kamu bisa nampilin tampilan web antah berantah di aplikasi androidmu
Meskipun terkesan simple, banyak yang belum tau bahwa bagaimana WebView bekerja bukan cuma tentang menampilkan HTML, tapi sudah sangat mirip dengan browser. Artinya kita bisa berinteraksi dengan dokumen HTML yang ditampilkan dan tiap request yang ditembak. Interaksi yang dimaksud mencakup keluar masuk antara HTML dan XML dan lebih dari itu, juga bisa menghapus, menambah, atau memodifikasi element HTML di dalam aplikasi android. Di artikel ini kita bakal bahas jurus-jurus rahasia yang bisa kita terapkan ke WebView Android 😉
Menampilkan HTML yang hanya untuk dibaca
Seperti yang sudah kita ketahui, biasanya untuk menampilkan sebuah WebView pada android kita meletakkan tampilan WebView pada xml kemudian menambahkan kode seperti dibawah ini.
Kalau WebView yang kita ingin tampilkan hanya sekedar berisi sebuah informasi yang perlu dibaca saja hal tersebut sudah cukup, tetapi jika kita perlu mengambil, mengubah, ataupun memodifikasi data ataupun elemen di tampilan web tersebut, maka kode diatas tidaklah cukup.
A. Menginterupsi WebView dengan perintah saat WebView dibuat.
Layaknya browser pada umumnya, kita dapat mengirim perintah dalam bentuk fungsi-fungsi yang ada pada javascript? Kamu bisa cek class yang digunakan di dalam WebView yaitu WebViewClient(). Di class itu ada method-method yang memberi kita kendali tentang apa saja yang dapat kita lakukan pada saat tampilan web akan ditampilkan (Bahasa simpelnya sih interface ke htmlnya, tapi takut ketuker ama interface dalam OOP). Sebagai contoh mari kita lihat kode dibawah ini.
Dapat dilihat pada kode diatas, kita mencoba menampilkan sesuatu pada saat method onPageFinished() dijalankan. onPageFinished() merupakan salah satu method pada WebViewClient() yang mana akan melakukan suatu perintah pada saat webpage selesai di-rendered. Pada contoh yang pertama dia akan menampilkan sebuah toast pada perangkan lunak android native kita, sedangkan pada contoh kedua dia akan menampilkan alert yang akan muncul di dalam webnya yang mana pemanggilannya menggunakan perintah javascript, tetapi jangan lupa untuk menambahkan objek WebChromeClient() untuk menampilkan alert atau perintah-perintah javascript lainnya.
Selain memberikan perintah native ataupun perintah javascript, kita juga dapat menkonversi perintah dari javascript menjadi perintah android native dengan cara seperti kode dibawah ini.
Dari contoh kode diatas dapat dilihat terdapat fungsi onJsAlert() yang berfungsi untuk memberitahukan aplikasi kita bahwa akan terdapat alert lalu alert tersebut dikonversikan menjadi toast.
B. Menghapus elemen pada WebView
Untuk menghapus atau mengubah sebuah elemen kita memerlukan suatu fungsi pada WebViewClient() yaitu fungsi onLoadResource(). Fungsi tersebut akan berjalan pada saat aplikasi sudah berhasil mendapatkan resource/html yang didapatkan tapi belum di-load/ditampilkan ke user.
Pada contoh kode dibawah, telah disediakan dua contoh kode yaitu: kode HTML dan kotlin android. Kode HTML nya bisa kamu deploy di suatu URL, sementara pada kode kotlin di dalam fungsi onLoadResource() kita menjalankan kode javascript untuk menghapus id bernama heading. Akibatnya, pada saat ditampilkan pada aplikasi android elemen dengan id heading akan terhapus, tetapi akan tetap ada jika diakses lewat browser biasa.
HTML Web View
WebView android
Sama halnya dengan menghapus, mengubah atau memanipulasi elemen lainnya dapat kita lakukan dengan cara yang sama, hanya saja dengan perintah yang berbeda pada bagian javascriptnya.
C. Mengambil data dari WebView untuk disimpan ke variabel native
Oke, kita bisa menginterupsi webpage yang diload di WebView, tapi bisa juga kah kita mengambil elemen yang ada di HTML kemudian mengubahnya menjadi variabel/objek kotlin/java? Jawabannya bisa! Ada sebuah anotasi yang disebut JavascriptInterface. Dengan anotasi tersebut kita bisa memanggil string javascript.
Dengan menggunakan kode HTML yang sama, kita mencoba mengambil string yang terdapat pada elemen dengan id par menggunakan method onLoadResource(). Selain onLoadResource(), kita juga akan menggunakan fungsi WebViewClient().
Pada kode berikut, kita membuat class bernama MyJavascriptInterface yang didalamnya terdapat anotasi JavascriptInterface dengan nama methodnya adalah getStringFromJS. Pada bagian paling atas potongan kode kita harus menambahkan addJavascriptInterface lalu diisi dengan objek class yang sudah dibuat dan nama interface yang dibuat di javascript yang mana pada contoh ini adalah JSClient.
Coba jalankan, dan lihat proses load akan memunculkan toast dengan value yang sama seperti pada id par yaitu: This is paragraph. Untuk menyimpan value kita hanya perlu mengganti perintah toast menjadi perintah lain seperti sharedpreferences.
Buat class baru (atau fungsi)
Sekarang kita tau bahwa ternyata WebView tidak hanya bisa untuk menampilkan tampilan web saja, tetapi juga kita dapat memanipulasinya sebagaimanapun kita mau. Memang cara ini tidak terlalu sering digunakan karena akan lebih simpel jika kita langsung saja mengubahnya pada pengembangan webnya itu sendiri, tetapi di beberapa kasus ini bisa saja digunakan loh… seperti saat dimana bukan kita atau tim kita yang mengembangkan web tersebut atau kasus lainnya. Lagipula karena cara ini disediakan artinya memang ada kasus-kasus di mana kita membutuhkannya bukan 😉
Di artikel-artikel selanjut kita bakal bahas hal-hal lebih advance terkait pengembangan teknologi di sekitar kita, contohnya bagaimana memanipulasi cache dan cookie di webview? bagaimana jika ada CORSnya? Atau bagaimana cara supaya web kita tidak dengan mudah bisa diclone di aplikasi android dengan sembarangan? Penasaran kan? Jika kamu penasaran dan suka dengan konten-konten semacam ini, jangan lupa saya dan publikasi INFIDEA. Jangan ragu untuk beri masukan juga di komentar. Have a nice day
