Aplikasi WebView untuk developer web

Dipublikasikan: 28 Februari 2014

Pelajari cara membuat Project Android baru, menambahkan Webview, memuat URL jarak jauh, dan memuat halaman HTML lokal.

Tutorial ini mengasumsikan bahwa Anda adalah developer dengan pengalaman terbatas atau tidak memiliki pengalaman sama sekali dengan lingkungan pengembangan Android, tetapi memiliki beberapa pengalaman dengan Kotlin. Jika Anda sudah memahami pemrograman untuk Android, sebaiknya baca Mem-build aplikasi web di WebView di situs developer Android.

Catatan: Kotlin adalah bahasa default untuk konfigurasi build mulai dari Android Studio Giraffe.

Menginstal Android Studio

Tutorial ini menggunakan Android Studio, IDE desain dan build untuk Android.

Membuat Project Android baru

Setelah diinstal, Android Studio akan meluncurkan wizard penyiapan.

Untuk membuat project baru:

1. Klik Project Baru.
2. Klik template Empty Activity untuk memilihnya untuk project Anda. Template membuat struktur project dan file yang diperlukan oleh Android Studio untuk mem-build project Anda.
3. Klik Next untuk membuka dialog New Project.
4. Konfigurasi project Anda. Masukkan nama aplikasi, nama paket, dan SDK target Anda. Lalu klik Berikutnya.
5. Tetapkan Minimum SDK yang diperlukan ke API 24: Android 7.0 (Nougat).
6. Klik Selesai

Android Studio akan membuka project baru.

Catatan: Setelah membuat project, pastikan Anda telah menginstal Nougat SDK. Buka Setelan > SDK Manager. Pastikan Anda telah menginstal Android 7.0 (API 24).

Struktur project

Project awal yang dibuat oleh Android Studio memiliki kode boilerplate untuk menyiapkan aplikasi Anda. Beberapa folder impor lainnya meliputi:

• src/main/java. Kode sumber Java Android.
• src/main/res. Resource yang digunakan oleh aplikasi.
• src/main/res/drawable. Resource gambar yang digunakan oleh aplikasi.
• src/main/res/xml. File tata letak XML yang menentukan struktur komponen UI.
• src/main/res/values. Dimensi, string, dan nilai lain yang mungkin tidak ingin Anda hardcode dalam aplikasi.
• src/main/AndroidManifest.xml. File manifes menentukan apa yang disertakan dalam aplikasi, seperti aktivitas, izin, dan tema.

Menambahkan WebView

Perhatian: Langkah-langkah berikut belum diupdate agar berfungsi dengan Android Studio versi terbaru.

Selanjutnya, tambahkan WebView ke tata letak aktivitas utama.

1. Buka file activity_main.xml di direktori src/main/res/xml jika belum terbuka. (Anda mungkin juga melihat file fragment_main.xml. Anda dapat mengabaikannya karena tidak diperlukan untuk tutorial ini.)

   Pilih tab Text di bagian bawah editor activity_main.xml untuk melihat markup XML.

   File ini menentukan tata letak untuk aktivitas utama Anda, dan panel Pratinjau menampilkan pratinjau aktivitas. Tata letak Aktivitas Kosong tidak menyertakan turunan apa pun. Anda harus menambahkan WebView.

2. Di panel XML, hapus garis miring penutup otomatis dari akhir elemen FrameLayout, dan tambahkan elemen <WebView> dan tag penutup baru, seperti yang ditunjukkan:

   <FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
       xmlns:tools="https://schemas.android.com/tools"
       android:id="@+id/container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
       tools:ignore="MergeRootFrame">
   
       <WebView
         android:id="@+id/activity_main_webview"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
   </FrameLayout>
   

3. Untuk menggunakan WebView, Anda harus mereferensikannya di Aktivitas. Buka file sumber Java untuk aktivitas utama, MainActivity.java di direktori src/main/java/<PackageName>.

   Tambahkan baris yang ditampilkan dalam huruf tebal.

   public class MainActivity extends Activity {
   
       private WebView mWebView;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           mWebView = (WebView) findViewById(R.id.activity_main_webview);
   

   Kode yang ada dalam metode onCreate melakukan tugas menghubungkan Aktivitas dengan tata letak. Baris yang ditambahkan akan membuat variabel anggota baru, mWebView, untuk merujuk ke tampilan web.

   Hapus kode berikut:

   if (savedInstanceState == null) {
     getSupportFragmentManager().beginTransaction()
       .add(R.id.container, new PlaceholderFragment())
       .commit();
   }
   

   WebView diidentifikasi oleh ID resource, yang ditentukan oleh baris ini dalam file tata letak:

   android:id="@+id/activity_main_webview"
   

   Setelah menambahkan kode, Anda akan melihat beberapa pesan peringatan di margin editor. Hal ini karena Anda belum mengimpor class yang tepat untuk WebView. Untungnya, Android Studio dapat membantu Anda mengisi class yang tidak ada. Cara termudah untuk melakukannya adalah dengan mengklik dan mengarahkan kursor ke nama class yang tidak diketahui, lalu menunggu modul menampilkan "perbaikan cepat" -- dalam hal ini, menambahkan pernyataan import untuk class WebView.

   Tekan Alt + Enter (Option + Enter di Mac) untuk menerima perbaikan cepat.

   Setelah WebView siap, Anda dapat melanjutkan untuk menyiapkannya dan memuat beberapa konten web yang menarik.

Aktifkan JavaScript

WebView tidak mengizinkan JavaScript secara default. Untuk menjalankan aplikasi web di WebView, Anda harus mengaktifkan JavaScript secara eksplisit dengan menambahkan baris berikut ke metode onCreate:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Memuat URL jarak jauh

Jika Anda akan memuat data dari URL jarak jauh, aplikasi Anda memerlukan izin untuk mengakses internet. Izin ini perlu ditambahkan di file manifes aplikasi.

1. Buka file AndroidManifest.xml di direktori src/res. Tambahkan baris yang dicetak tebal sebelum tag </manifest> penutup.

   <?xml version="1.0" encoding="utf-8"?>
   <manifest ...>
   ...
    
     </application>
     <uses-permission android:name="android.permission.INTERNET" />
   </manifest>
   

2. Langkah berikutnya adalah memanggil metode loadUrl di webview. Tambahkan baris berikut ke akhir metode onCreate.

   mWebView.loadUrl("[https://beta.html5test.com/][8]");
   

   Sekarang coba jalankan project. Jika tidak memiliki perangkat, Anda dapat membuat emulator (AVD atau Perangkat Virtual Android) dengan membuka Tools > Android > AVD Manager.

Catatan: Untuk mendeteksi kapan URL mulai dan selesai dimuat, gunakan WebViewClient.onPageStarted dan WebViewClient.onPageFinished.

Menangani navigasi

Coba ubah URL yang Anda muat ke https://www.css-tricks.com/ dan jalankan ulang aplikasi Anda. Anda akan melihat sesuatu yang aneh.

Jika Anda menjalankan aplikasi sekarang dengan situs yang memiliki pengalihan seperti css-tricks.com, aplikasi Anda akan akhirnya membuka situs di browser di perangkat, bukan di WebView Anda -- mungkin bukan yang Anda harapkan. Hal ini karena cara WebView menangani peristiwa navigasi.

Berikut adalah urutan peristiwa:

1. WebView mencoba memuat URL asli dari server jarak jauh, dan mendapatkan pengalihan ke URL baru.
2. WebView memeriksa apakah sistem dapat menangani intent tampilan untuk URL, jika ya, sistem akan menangani navigasi URL, jika tidak, WebView akan menavigasi secara internal (misalnya, jika pengguna tidak menginstal browser di perangkatnya).
3. Sistem memilih aplikasi pilihan pengguna untuk menangani skema URL https://, yaitu browser default pengguna. Jika Anda telah menginstal lebih dari satu browser, Anda mungkin melihat dialog pada tahap ini.

Jika Anda menggunakan WebView di dalam aplikasi Android untuk menampilkan konten (misalnya, halaman bantuan), ini mungkin persis seperti yang ingin Anda lakukan. Namun, untuk aplikasi yang lebih canggih, Anda mungkin ingin menangani link navigasi sendiri.

Untuk menangani navigasi di dalam WebView, Anda harus mengganti WebViewClient WebView, yang menangani berbagai peristiwa yang dihasilkan oleh WebView. Anda dapat menggunakannya untuk mengontrol cara WebView menangani klik link dan pengalihan halaman.

Implementasi default WebViewClient membuat URL apa pun terbuka di WebView:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

Ini adalah langkah maju yang baik, tetapi bagaimana jika Anda hanya ingin menangani link untuk situs Anda, sekaligus membuka URL lain di browser?

Untuk melakukannya, Anda perlu memperluas class WebViewClient dan menerapkan metode shouldOverrideUrlLoading. Metode ini dipanggil setiap kali WebView mencoba membuka URL yang berbeda. Jika menampilkan nilai salah (false), WebView akan membuka URL itu sendiri. (Implementasi default selalu menampilkan nilai salah, itulah sebabnya implementasi ini berfungsi dalam contoh sebelumnya.)

Buat class baru:

1. Klik kanan nama paket aplikasi Anda, lalu pilih New > Java Class
2. Masukkan MyAppWebViewClient sebagai nama class, lalu klik OK

3. Di file MyAppWebViewClient.java baru, tambahkan kode berikut (perubahan ditampilkan dalam cetak tebal):

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
         return false;
       }
                  
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

   Kode baru menentukan MyAppWebViewClient sebagai subclass dari WebViewClient dan mengimplementasikan metode shouldOverrideUrlLoading.

   Metode shouldOverrideUrlLoading dipanggil setiap kali WebView akan memuat URL. Implementasi ini memeriksa String "css-tricks.com" di akhir nama host URL. Jika string ada, metode akan menampilkan nilai salah (false), yang memberi tahu platform untuk tidak mengganti URL, tetapi untuk memuat URL di WebView.

   Untuk nama host lainnya, metode ini membuat permintaan ke sistem untuk membuka URL. Hal ini dilakukan dengan membuat Intent Android baru dan menggunakannya untuk meluncurkan aktivitas baru. Menampilkan nilai benar di akhir metode akan mencegah URL dimuat ke WebView.

4. Untuk menggunakan WebViewClient kustom baru, tambahkan baris berikut ke class MainActivity:

   // Stop local links and redirects from opening in browser instead of WebView
   mWebView.setWebViewClient(new MyAppWebViewClient());
   

   Sekarang, pengguna dapat mengklik link CSS Tricks mana pun dan tetap berada dalam aplikasi, tetapi link ke situs eksternal akan dibuka di browser.

Menangani tombol kembali Android

Saat Anda mulai bermain-main dan membuka artikel CSS Tricks, mengklik tombol kembali di Android akan keluar dari aplikasi.

Metode WebView canGoBack memberi tahu Anda apakah ada sesuatu di stack halaman yang dapat ditampilkan. Untuk mendeteksi penekanan tombol kembali dan menentukan apakah Anda harus kembali ke histori WebView atau mengizinkan platform menentukan perilaku yang benar, tambahkan metode onBackPressed() ke MainActivity:

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

Memuat HTML dari sistem file

Salah satu keuntungan besar menggunakan WebView di dalam aplikasi yang dapat diinstal adalah Anda dapat menyimpan aset di dalam aplikasi. Hal ini memungkinkan aplikasi Anda berfungsi secara offline dan meningkatkan waktu pemuatan, karena WebView dapat mengambil aset langsung dari sistem file lokal.

Untuk menyimpan file secara lokal, termasuk HTML, JavaScript, dan CSS, simpan file tersebut di direktori aset. Ini adalah direktori yang direservasi yang digunakan Android untuk file mentah. Aplikasi Anda memerlukan akses ke direktori ini, karena mungkin perlu meminimalkan atau mengompresi file tertentu.

1. Buat direktori assets/www di utama (src/main/assets/www).

   • Praktik terbaiknya adalah menyimpan file web di subdirektori /assets.
   Catatan: Hanya jalur relatif yang berfungsi di WebView saat merujuk ke file lain, seperti CSS dan JavaScript. Daripada jalur absolut, seperti /pages/somelink.html, gunakan jalur relatif, seperti ./pages/somelink.html.

2. Upload semua file ke dalam direktori.

3. Muat file yang sesuai:

   mWebView.loadUrl("file:///android_asset/www/index.html");
   

4. Perbarui metode shouldOverrideUrlLoading untuk membuka browser untuk halaman non-lokal:

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().length() == 0) {
         return false;
       }
   
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

Sekarang Anda siap untuk mem-build aplikasi WebView yang bagus.

Untuk tips mendapatkan visual yang tepat, lihat UI Pixel-Perfect di WebView.

Jika Anda mengalami masalah, Chrome DevTools akan membantu Anda. Lihat Proses Debug Jarak Jauh di Android untuk memulai.