Penayangan adaptif berdasarkan kualitas jaringan

Milica Mihajlija

Memuat situs bisa menjadi pengalaman yang sangat berbeda, bergantung pada kondisi jaringan. Semuanya biasanya berjalan lancar saat Anda menggunakan jaringan yang cepat, tetapi saat Anda bepergian dengan paket data terbatas dan koneksi yang tidak stabil, atau terjebak dengan laptop di Wi-Fi kedai kopi yang lambat, ceritanya akan berbeda.

Salah satu cara untuk menangani hal ini adalah dengan menyesuaikan aset mana yang Anda tampilkan kepada pengguna berdasarkan kualitas koneksi mereka. Hal ini sekarang dapat dilakukan dengan Network Information API yang memungkinkan aplikasi web mengakses informasi tentang jaringan pengguna.

Dukungan Browser

  • Chrome: 61.
  • Edge: 79.
  • Firefox: tidak didukung.
  • Safari: tidak didukung.

Sumber

Penggunaan

Ada banyak cara yang dapat Anda gunakan untuk menggunakan informasi jaringan ini guna meningkatkan pengalaman pengguna:

  • Beralih antara menayangkan konten beresolusi tinggi dan beresolusi rendah berdasarkan jaringan pengguna.
  • Tentukan apakah akan melakukan pramuat resource.
  • Tunda upload dan download saat koneksi internet pengguna lambat.
  • Aktifkan mode offline jika kualitas jaringan tidak cukup baik untuk memuat aplikasi dan menggunakan fitur.
  • Peringatkan pengguna bahwa melakukan sesuatu (misalnya, menonton video) melalui seluler dapat menghabiskan biaya.
  • Gunakan di analisis untuk mengumpulkan data tentang kualitas jaringan pengguna.

Banyak aplikasi yang sudah melakukan hal serupa. Misalnya, YouTube, Netflix, dan sebagian besar layanan video (atau panggilan video) lainnya akan otomatis menyesuaikan resolusi selama streaming. Saat dimuat, Gmail akan memberi pengguna link ke "muat HTML biasa (untuk koneksi lambat)".

Link untuk memuat Gmail versi HTML biasa saat pengguna menggunakan koneksi lambat

Cara kerjanya

Objek navigator.connection berisi informasi tentang koneksi klien. Propertinya dijelaskan dalam tabel di bawah.

Properti Penjelasan
downlink Estimasi bandwidth dalam megabit per detik.
effectiveType Jenis koneksi yang efektif, dengan kemungkinan nilai 'slow-2g', '2g', '3g', atau '4g' (mencakup 4G dan yang lebih tinggi). Ditentukan berdasarkan kombinasi waktu bolak-balik dan kecepatan downlink. Misalnya, downlink cepat yang dikombinasikan dengan latensi tinggi akan memiliki effectiveType yang lebih rendah karena latensi.
onchange Pengendali peristiwa yang diaktifkan saat informasi koneksi berubah.
rtt Perkiraan latensi bolak-balik koneksi dalam milidetik.
saveData Boolean yang menentukan apakah pengguna telah meminta mode penggunaan data yang dikurangi.

Berikut adalah tampilannya saat Anda menjalankannya di konsol browser:

Konsol Chrome DevTools menampilkan nilai properti objek navigator.connection

Nilai effectiveType juga tersedia melalui Client Hints dan memungkinkan Anda mengomunikasikan jenis koneksi browser ke server.

Pemroses peristiwa onchange memungkinkan Anda beradaptasi secara dinamis dengan perubahan kualitas jaringan. Jika menunda upload atau download karena kondisi jaringan yang buruk, Anda dapat mengandalkan pemroses peristiwa untuk memulai ulang transfer saat mendeteksi kondisi jaringan yang lebih baik. Anda juga dapat menggunakannya untuk memberi tahu pengguna saat kualitas jaringan berubah. Misalnya, jika pengguna kehilangan sinyal Wi-Fi dan diarahkan ke jaringan seluler, hal ini dapat mencegah transfer data yang tidak disengaja (dan tagihan 💸).

Gunakan pemroses peristiwa onchange seperti yang Anda lakukan dengan pemroses peristiwa lainnya:

navigator.connection.addEventListener('change', doSomethingOnChange);

Kesimpulan

Potensi manfaat Network Information API sangat besar, terutama untuk pengguna yang menggunakan jaringan lambat dan aplikasi yang memerlukan banyak bandwidth. Yang paling penting, teknik ini dapat digunakan sebagai teknik progressive enhancement.