Praktik terbaik untuk aplikasi web

Mengembangkan halaman dan aplikasi web untuk perangkat seluler menghadirkan tantangan yang berbeda dibandingkan dengan mengembangkan halaman web untuk browser web desktop. Praktik berikut dapat membantu Anda menyediakan aplikasi web yang paling efektif untuk Android dan perangkat seluler lainnya.

  1. Mengalihkan perangkat seluler ke versi seluler khusus situs Anda. Ada beberapa cara untuk melakukannya menggunakan pengalihan sisi server. Salah satu metode umum adalah "memperkirakan" string Agen Pengguna yang disediakan oleh browser web. Untuk menentukan apakah akan menayangkan versi seluler situs, cari string "seluler" di Agen Pengguna.
  2. Gunakan HTML5 untuk perangkat seluler. HTML5 adalah bahasa markup yang paling umum digunakan untuk situs seluler. Standar ini mendorong pengembangan yang memprioritaskan perangkat seluler untuk membantu memastikan bahwa situs berfungsi di berbagai perangkat. Tidak seperti bahasa web sebelumnya, HTML5 menggunakan deklarasi <DOCTYPE> dan charset yang lebih sederhana: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Gunakan metadata area pandang untuk mengubah ukuran halaman web Anda dengan benar. Dalam dokumen <head>, berikan metadata yang menentukan cara Anda ingin area pandang browser merender halaman web Anda. Misalnya, metadata area pandang Anda dapat menentukan tinggi dan lebar area pandang browser, skala halaman awal, dan kepadatan layar target.

    Contoh berikut menunjukkan cara menyetel metadata area tampilan:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Untuk mengetahui informasi selengkapnya tentang cara menggunakan metadata area pandang untuk perangkat Android, baca Mendukung layar yang berbeda di aplikasi web.

  4. Gunakan tata letak linier vertikal. Jangan biarkan pengguna men-scroll ke kiri dan ke kanan saat bernavigasi di halaman Anda. Scroll ke atas dan ke bawah lebih mudah bagi pengguna dan membuat halaman Anda lebih sederhana.
  5. Tetapkan tinggi dan lebar tata letak ke match_parent. Menetapkan tinggi dan lebar objek WebView dengan match_parent memastikan tampilan aplikasi Anda memiliki ukuran yang tepat. Kami tidak menyarankan menetapkan tinggi ke wrap_content karena akan mengakibatkan ukuran yang tidak tepat. Demikian pula, menetapkan lebar tata letak dengan wrap_content tidak didukung dan menyebabkan WebView Anda menggunakan lebar induknya. Karena perilaku ini, penting juga untuk memastikan bahwa tidak ada objek tata letak induk objek WebView Anda yang memiliki tinggi dan lebar yang ditetapkan ke wrap_content.
  6. Hindari beberapa permintaan file. Karena perangkat seluler biasanya memiliki kecepatan koneksi yang lebih lambat daripada komputer desktop, buat pemuatan halaman Anda secepat mungkin. Salah satu cara untuk mempercepatnya adalah dengan menghindari pemuatan file tambahan seperti stylesheet dan file skrip dalam <head>. Selain itu, pertimbangkan untuk melakukan analisis seluler dengan PageSpeed Insights Google untuk mendapatkan saran pengoptimalan mendetail khusus untuk aplikasi Anda.
  7. Nonaktifkan download otomatis favicon jika Anda tidak memerlukannya. Secara default, WebView otomatis mendownload favicon setiap kali situs dikunjungi saat navigasi. WebView menyimpan dua salinan setiap favicon yang didownload (satu di Java dan satu di memori native), jadi menonaktifkan download favicon akan menghemat memori (sekitar 8 KB per instance WebView) dan mengurangi konsumsi bandwidth. Jika aplikasi Anda tidak menggunakan atau menampilkan favicon, gunakan WebSettingsCompat.setDownloadFaviconsEnabled() dari library Jetpack Webkit untuk menonaktifkan download otomatis:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  8. Mengelola status tersimpan dan menghindari batas transaksi. Jika Anda menyimpan status WebView selama peristiwa siklus proses menggunakan saveState(Bundle), terapkan batas ukuran payload menggunakan WebViewCompat.saveState() untuk menghindari melampaui batas savedInstanceState 1 MB Android. Untuk informasi selengkapnya, lihat Mengelola status WebView secara efisien.
  9. Mengoptimalkan koneksi jaringan dan pemuatan halaman dengan API pemuatan spekulatif. Untuk mengurangi latensi navigasi, gunakan API Jetpack Webkit untuk menyiapkan koneksi jaringan dan konten terlebih dahulu. Panggil Profile.addQuicHints untuk mengisi dukungan HTTP/3 melalui QUIC sebelumnya sehingga WebView dapat menggunakan QUIC segera pada koneksi pertama, dan gunakan Profile.preconnect untuk memanaskan soket jaringan sebelumnya. Jika URL tujuan diketahui atau mungkin, gunakan Profile.prefetchUrlAsync atau WebViewCompat.prerenderUrlAsync untuk mengambil atau merender halaman di latar belakang. Untuk mengetahui informasi selengkapnya, baca Pemuatan spekulatif di WebView.
  10. Nonaktifkan download otomatis favicon jika Anda tidak memerlukannya. Secara default, WebView otomatis mendownload favicon setiap kali situs dikunjungi saat navigasi. WebView menyimpan dua salinan setiap favicon yang didownload (satu di Java dan satu di memori native), jadi menonaktifkan download favicon akan menghemat memori (sekitar 8 KB per instance WebView) dan mengurangi konsumsi bandwidth. Jika aplikasi Anda tidak menggunakan atau menampilkan favicon, gunakan WebSettingsCompat.setDownloadFaviconsEnabled() dari library Jetpack Webkit untuk menonaktifkan download otomatis:

    Kotlin

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    Java

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}
  11. Mengelola status tersimpan dan menghindari batas transaksi. Jika Anda menyimpan status WebView selama peristiwa siklus proses menggunakan saveState(Bundle), terapkan batas ukuran payload menggunakan WebViewCompat.saveState() untuk menghindari melampaui batas savedInstanceState 1 MB Android. Untuk informasi selengkapnya, lihat Mengelola status WebView secara efisien.

Referensi lainnya