Pemuatan situs web bisa menjadi pengalaman yang sangat berbeda, tergantung pada kondisi jaringan. Semuanya biasanya lancar saat Anda berada di jaringan yang cepat, tetapi saat Anda dalam perjalanan dengan paket data yang terbatas dan koneksi yang tidak stabil, atau terjebak dengan laptop di Wi-Fi kedai kopi yang lambat, ceritanya berbeda.
Salah satu cara untuk mengatasinya adalah dengan menyesuaikan aset yang Anda tayangkan kepada pengguna berdasarkan kualitas koneksi mereka. Sekarang, hal ini dapat dilakukan dengan Network Information API yang memungkinkan aplikasi web mengakses informasi tentang jaringan pengguna.
Penggunaan
Ada banyak cara untuk menggunakan informasi jaringan ini untuk meningkatkan pengalaman pengguna:
- Beralih antara menayangkan konten definisi tinggi dan definisi rendah berdasarkan jaringan pengguna.
- Putuskan apakah akan melakukan pramuat resource.
- Tunda upload dan download saat pengguna memiliki koneksi internet yang lambat.
- Aktifkan mode offline jika kualitas jaringan tidak cukup baik untuk memuat aplikasi dan menggunakan fiturnya.
- Peringatkan pengguna bahwa melakukan sesuatu (misalnya menonton video) melalui jaringan seluler dapat membebankan mereka.
- Gunakan hal ini dalam analisis Anda untuk mengumpulkan data tentang kualitas jaringan pengguna.
Banyak aplikasi sudah melakukan hal serupa. Misalnya, YouTube, Netflix, dan sebagian besar layanan video (atau panggilan video) lainnya menyesuaikan resolusi secara otomatis selama streaming. Saat sedang dimuat, Gmail akan memberi pengguna link ke "muat HTML biasa (untuk koneksi lambat)".
Cara kerjanya
Objek navigator.connection berisi informasi tentang koneksi
klien. Properti dijelaskan dalam tabel di bawah.
| 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 yang lebih tinggi). Ditentukan berdasarkan kombinasi waktu round-trip dan kecepatan downlink. Misalnya, downlink cepat yang digabungkan dengan latensi tinggi akan memiliki effectiveType yang lebih rendah karena latensi. |
onchange |
Pengendali peristiwa yang aktif 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:
Nilai effectiveType juga tersedia melalui Petunjuk Klien dan memungkinkan Anda menyampaikan 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
dialihkan ke jaringan seluler, hal ini dapat mencegah transfer data yang tidak disengaja (dan
tagihan 💸).
Gunakan pemroses peristiwa onchange seperti yang Anda gunakan pada pemroses peristiwa lainnya:
navigator.connection.addEventListener('change', doSomethingOnChange);
Kesimpulan
Potensi manfaat Network Information API sangat besar, terutama bagi pengguna yang menggunakan jaringan lambat dan aplikasi yang memerlukan banyak bandwidth. Bagian terbaiknya, dapat digunakan sebagai teknik {i>progressive enhancement<i}.