Penayangan adaptif berdasarkan kualitas jaringan

Milica Mihajlija

Memuat situs web bisa menjadi pengalaman yang sangat berbeda bergantung pada jaringannya kondisi tertentu. Semuanya biasanya lancar ketika Anda berada di jaringan yang cepat, tapi saat Anda dalam perjalanan dengan paket data terbatas dan koneksi internet tidak stabil, atau macet dengan laptop di Wi-Fi kedai kopi lambat, ceritanya 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 API Informasi Jaringan yang memungkinkan aplikasi web untuk mengakses informasi jaringan pengguna.

Dukungan Browser

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

Sumber

Penggunaan

Ada banyak cara untuk menggunakan informasi jaringan ini untuk meningkatkan pengalaman pengguna pengalaman penggunaan:

  • Beralih antara menyajikan konten definisi tinggi dan definisi rendah berdasarkan jaringan pengguna.
  • Tentukan apakah akan melakukan pramuat resource.
  • Tunda upload dan download saat koneksi internet pengguna lambat.
  • Mengaktifkan mode offline jika kualitas jaringan tidak cukup baik untuk memuat aplikasi dan menggunakan fitur-fiturnya.
  • Peringatkan pengguna bahwa melakukan sesuatu (misalnya, menonton video) menggunakan jaringan seluler dapat menghabiskan biaya uang kepada mereka.
  • Gunakan istilah tersebut di analisis Anda untuk mengumpulkan data tentang kualitas jaringan.

Banyak aplikasi yang sudah melakukan hal serupa. Misalnya, YouTube, Netflix dan sebagian besar layanan video (atau panggilan video) lainnya otomatis menyesuaikan resolusi selama streaming. Saat dimuat, Gmail memberi pengguna tautkan 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 jarak jauh. Propertinya dijelaskan dalam tabel di bawah ini.

Properti Penjelasan
downlink Perkiraan bandwidth dalam megabit per detik.
effectiveType Jenis koneksi yang efektif, dengan kemungkinan nilai 'slow-2g', '2g', '3g', atau '4g' (mencakup 4g dan lebih tinggi). Ditentukan berdasarkan kombinasi waktu round-trip 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.

Tampilannya akan terlihat seperti berikut saat Anda menjalankannya di konsol browser:

Konsol Chrome DevTools menampilkan nilai properti objek navigator.connection

Nilai effectiveType juga tersedia melalui Petunjuk Klien dan memungkinkan Anda untuk mengomunikasikan jenis koneksi {i>browser<i} ke server.

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

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

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

Kesimpulan

Potensi manfaat {i>Network Information API<i} sangat besar, terutama untuk pengguna di jaringan dan aplikasi lambat yang membutuhkan banyak {i>bandwidth<i}. Terbaik dari semua, itu dapat digunakan sebagai teknik {i>progressive enhancement<i}.