Ağ kalitesine göre uyarlanabilir sunum

Milica Mihajlija

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

• 61
• 79
• x
• x

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.

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

Not: Kullanıcıların çevrimdışı olduğu durumlara uyum sağlamak için Hizmet Çalışanları içinde Network Information API'ye erişebilirsiniz.

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);

Not: Ağ bilgileri API'si, 62 sürümünden beri Chromium tabanlı tarayıcılarda desteklenmektedir.

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.