Ağ kalitesine göre uyarlanabilir sunum

Milica Mihajlija
Milica Mihajlija
X GitHub Ana sayfa

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.

Tarayıcı desteği

  • Chrome: 61.
  • Edge: 79.
  • Firefox: Desteklenmez.
  • Safari: desteklenmez.

Kaynak

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.

Kullanıcılar yavaş bağlantı kullanıyorsa Gmail'in temel HTML sürümünü yükleyen bir bağlantı

İş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:

navigator.Connection nesnesinin özelliklerinin değerlerini gösteren Chrome Geliştirici Araçları konsolu

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.