Bir web sitesini yüklemek, ağ koşullarına bağlı olarak çok farklı bir deneyim olabilir. Hızlı bir ağda olduğunuzda genellikle her şey sorunsuzdur, ancak sınırlı bir veri planıyla hareket halindeyken ve bağlantı sorunlu olduğunuzda veya kafenin yavaş kablosuz ağına bağlı bir dizüstü bilgisayarda takılı kaldığınızda durum farklı olacaktır.
Bu sorunu çözmenin yollarından biri, kullanıcılara sunduğunuz öğeleri bağlantının kalitesine bağlı olarak uyarlamaktır. Web uygulamalarının kullanıcının ağıyla ilgili bilgilere erişmesine olanak tanıyan Network Information API ile bu artık mümkün.
Kullanım
Kullanıcı deneyimini iyileştirmek için bu ağ bilgilerini pek çok şekilde kullanabilirsiniz:
- Kullanıcının ağına bağlı olarak yüksek tanımlı ve düşük tanımlı içerik sunma arasında geçiş yapın.
- Kaynakların önceden yüklenip yüklenmeyeceğine karar verin.
- Kullanıcıların bağlantıları yavaş olduğunda yüklemeleri ve indirmeleri erteleyin.
- Ağ kalitesi, uygulamayı yükleyip özellikleri kullanacak kadar iyi değilse çevrimdışı modu etkinleştirin.
- Kullanıcıları, hücresel ağ üzerinden bir şey yapmanın (örneğin video izleme) kendilerine para kaybettirebileceği konusunda uyarın.
- Kullanıcılarınızın ağ kalitesi hakkında veri toplamak için bu veri kümesini 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ükleme sırasında kullanıcılara "temel HTML'yi yükle (yavaş bağlantılar için)" bağlantısı sunar.
İşleyiş şekli
navigator.connection nesnesi, istemcinin bağlantısıyla ilgili bilgiler içerir. Özellikleri aşağıdaki tabloda açıklanmıştır.
| Özellik | Açıklama |
|---|---|
downlink |
Megabit/saniye cinsinden bant genişliği tahmini. |
effectiveType |
Olası 'slow-2g', '2g', '3g' veya '4g' değerleriyle birlikte etkili bağlantı türü (4g ve sonraki sürümleri kapsar). Gidiş dönüş süresi ve aşağı bağlantı hızının kombinasyonuna göre belirlenir. Örneğin, yüksek gecikmeyle birlikte hızlı aşağı bağlantı, gecikme nedeniyle daha düşük etkiliTüre 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 azaltılmış veri kullanımı modu isteyip istemediğini tanımlayan boole. |
Tarayıcınızın konsolunda çalıştırdığınızda bu şöyle 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 iletmenize olanak tanır.
onchange etkinlik işleyici, ağ kalitesindeki değişikliklere dinamik olarak uyum sağlamanızı sağlar. Zayıf ağ koşulları nedeniyle yüklemeleri veya indirmeleri ertelediyseniz etkinlik işleyicinin, daha iyi ağ koşulları algıladığında aktarımı yeniden başlatmasına güvenebilirsiniz. Bunu, ağ kalitesi değiştiğinde kullanıcıları bilgilendirmek için de kullanabilirsiniz. Örneğin, kullanıcılar kablosuz ağ sinyalini kaybedip hücresel ağa bırakıldıysa bu durum, yanlışlıkla veri aktarımını (ve ücretleri 💸) önleyebilir.
onchange etkinlik işleyiciyi diğer etkinlik işleyicileri kullandığınız şekilde kullanın:
navigator.connection.addEventListener('change', doSomethingOnChange);
Sonuç
Network Information API'nin potansiyel avantajları, özellikle de yavaş ağları ve çok fazla bant genişliği gerektiren uygulamaları kullanan kullanıcılar için büyük avantajlardır. En iyi tarafı da, progresif bir geliştirme tekniği olarak kullanılmasıdır.