Bir web sitesinin yüklenmesi, ağ koşullarına bağlı olarak çok farklı bir deneyim olabilir. Hızlı bir ağda genellikle her şey sorunsuz ilerler. Ancak sınırlı bir veri planı ve kesintili bağlantıyla hareket halindeyken veya dizüstü bir kafenin kablosuz ağına bağlı olduğunuzda bu farklı bir durum.
Bu sorunun üstesinden gelmenin bir yolu, kullanıcılara sunduğunuz öğeleri bağlantılarının kalitesine göre uyarlamaktır. Bu artık, web uygulamalarının kullanıcının ağı hakkındaki bilgilere erişmesine olanak tanıyan Network Information API ile mümkün.
Kullanım
Kullanıcı deneyimini iyileştirmek için bu ağ bilgilerini birçok şekilde kullanabilirsiniz:
- Kullanıcının ağına göre yüksek çözünürlüklü ve düşük çözünürlüklü içerik yayınlama arasında geçiş yapın.
- Kaynakların önceden yüklenip yüklenmeyeceğine karar verin.
- Kullanıcıların bağlantısı yavaş olduğunda yükleme ve indirme işlemlerini erteleyin.
- Ağ kalitesi uygulamayı yüklemek ve özellikleri kullanmak için yeterince iyi değilse çevrimdışı modu etkinleştirin.
- Kullanıcıları, hücresel ağ üzerinden bir işlem (ör. video izleme) yapmanın onlara paraya mal olabileceği konusunda uyarın.
- Kullanıcılarınızın ağ kalitesi hakkında veri toplamak için analizlerinizde kullanın.
Birçok uygulama zaten benzer bir şey yapıyor. Örneğin, YouTube, Netflix ve diğer video (veya görüntülü görüşme) hizmetlerinin çoğu, yayın sırasında çözünürlüğü otomatik olarak ayarlar. Gmail yüklenirken kullanıcılara "temel HTML'yi yükle (yavaş bağlantılar için)" bağlantısı gösterilir.
İşleyiş şekli
navigator.connection
nesnesi, istemcinin bağlantısıyla ilgili bilgileri içerir. Bu özelliğin özellikleri aşağıdaki tabloda açıklanmıştır.
Mülk | Açıklama |
---|---|
downlink |
Saniyede megabit cinsinden bant genişliği tahmini. |
effectiveType |
Bağlantının etkili türü. Olası değerler 'slow-2g' , '2g' , '3g' veya '4g' 'dir (4G ve sonraki sürümleri kapsar). Gidiş dönüş süresi ve indirme hızı kombinasyonuna göre belirlenir. Örneğin, yüksek gecikmeye sahip hızlı bir indirme bağlantısı, gecikme nedeniyle daha düşük bir effectiveType değerine sahip olur. |
onchange |
Bağlantı bilgileri değiştiğinde tetiklenen bir etkinlik işleyici. |
rtt |
Bağlantının milisaniye cinsinden tahmini gidiş dönüş gecikmesi. |
saveData |
Kullanıcının daha az veri kullanımı modu isteyip istemediğini tanımlayan bir boole değeridir. |
Bunu tarayıcının konsolunda çalıştırdığınızda aşağıdaki gibi görünür:
effectiveType
değerleri, İstemci İpuçları aracılığıyla da kullanılabilir ve tarayıcının bağlantı türünü sunuculara iletmenizi sağlar.
onchange
etkinlik dinleyicisi, ağ kalitesindeki değişikliklere dinamik olarak uyum sağlamanızı sağlar. Yüklemeleri veya indirmeleri kötü ağ koşulları nedeniyle ertelediyseniz daha iyi ağ koşulları algıladığında aktarımı yeniden başlatmak için etkinlik dinleyiciden yararlanabilirsiniz. Ayrıca, ağ kalitesi değiştiğinde kullanıcıları bilgilendirmek için de bu özelliği kullanabilirsiniz. Örneğin, kablosuz bağlantı sinyalini kaybedip hücresel ağa düştüğünde yanlışlıkla veri aktarımı (ve ücretlendirme 💸) önlenebilir.
onchange
etkinlik işleyicisini diğer etkinlik işleyicileri gibi kullanın:
navigator.connection.addEventListener('change', doSomethingOnChange);
Sonuç
Network Information API'nin potansiyel avantajları, özellikle yavaş ağlarda ve çok fazla bant genişliği gerektiren uygulamalarda bulunan kullanıcılar için büyüktür. En iyisi de aşamalı iyileştirme tekniği olarak kullanılabilir.