İstemci İpuçlarıyla Kullanıcılara Uyum Sağlama

Her yerde hızlı olan siteler geliştirmek zorlu bir olasılık olabilir. Genişlik cihaz özellikleri ve bağlandıkları ağların kalitesi bir görev gibi görünebilir. Bu kursta yükleme performansını iyileştirmek için tarayıcı özelliklerinin Kullanıcının cihazının neler yapabildiği veya ağının kalitesi bağlantı var mı? Çözüm, müşterinin ipuçları!

İstemci ipuçları, bize kullanıcının cihazı ve bağlı olduğu ağ ile ilgili bu özellikleri kullanır. Ölçüt bu bilgileri sunucu tarafında kullandığımızda, URL'mizi nasıl sunacağımızı içerik türlerine göre görüntüleyebilirsiniz. Bu sayede yüksek kaliteli ve daha kapsayıcı bir kullanıcı deneyimi sunmak.

İçerik Pazarlığı Her Şeydir

İstemci ipuçları da içerik pazarlığının başka bir yöntemidir. içerik yanıtları, tarayıcı istek başlıklarına göre belirlenir.

İçerik pazarlığının bir örneği, Accept istek başlığı ekleyin. Tarayıcının hangi içerik türlerini anladığını, sunucu, yanıt müzakere etmek için kullanabilir. Resim isteklerinde, içerik Chrome'un Accept üstbilgisi şudur:

Accept: image/webp,image/apng,image/*,*/*;q=0.8

Tüm tarayıcılar JPEG, PNG ve GIF gibi resim biçimlerini desteklese de Kabul Et seçeneği Bu durumda tarayıcı aynı zamanda WebP'yi ve APNG olarak değişir. Bu bilgileri kullanarak her tarayıcı için en uygun resim türlerini belirleme:

<?php
// Check Accept for an "image/webp" substring.
$webp = stristr($_SERVER["HTTP_ACCEPT"], "image/webp") !== false ? true : false;

// Set the image URL based on the browser's WebP support status.
$imageFile = $webp ? "whats-up.webp" : "whats-up.jpg";
?>
<img src="<?php echo($imageFile); ?>" alt="I'm an image!">

Accept gibi, içerik pazarlığı için istemci ipuçları da kullanılabilir. cihaz özellikleri ve ağ koşulları bağlamına yer verilir. Müşteri ipuçlarıyla, kullanıcının özelliklerine dayalı olarak sunucu tarafı performans kararları kritik olmayan kaynakların kötü ağ koşullarına sahip kullanıcılar. Bu kılavuzda, proje yaşam döngüsü boyunca ipuçları ve bunların içerik yayınlamayı daha verimli hale getirmek için bir çözüm sunuyor.

Etkinleştirme

Accept başlığından farklı olarak, istemci ipuçları yalnızca sihirli bir şekilde görünmez ( (daha sonra ele alacağımız Save-Data hariç). Paydaşların isteseniz bile, hangi istemci ipuçlarını paylaşacağınızı bir kullanıcı Accept-CH üstbilgisi göndererek kaynak:

Accept-CH: Viewport-Width, Downlink

Accept-CH değeri, site için istenen ipuçlarının virgülle ayrılmış bir listesidir. , bir sonraki kaynak isteğinin sonuçlarını belirlemek için kullanacağı sonuçları belirler. müşteri bu başlığı okursa "Bu site Viewport-Width ve Downlink istemci ipucu." Belirli ipuçlarının kendisi için endişelenmenize gerek yok. Birazdan bunlara değineceğiz.

Bu etkinleştirme başlıklarını herhangi bir arka uç dilinde ayarlayabilirsiniz. Örneğin, PHP header işlevi kullanılabilir. Hatta bu bilgileri http-equiv özelliği <meta> etiketinde:

<meta http-equiv="Accept-CH" content="Viewport-Width, Downlink" />

.

Müşterilerden ipuçları!

İstemci ipuçları iki şeyden birini açıklar: kullanıcılarınızın cihazı, kullandığı cihaz ve sitenize erişmek için kullandıkları ağ. Proje yönetiminin tüm proje yönetimi her ipucunu bulabilirsiniz.

Cihaz ipuçları

Bazı istemci ipuçları, kullanıcının cihazının özelliklerini açıklar (genellikle ekran) özellikler. Bunlardan bazıları, projeniz için ideal medya kaynağını ancak hepsi medya merkezli olmak zorunda değildir.

Bu listeye girmeden önce, kullanılan birkaç anahtar terimin ekran görüntüsünü ve medya çözünürlüğünü belirtmeniz gerekir:

Gerçek boyut: Bir medya kaynağının gerçek boyutları. Örneğin, Photoshop'ta bir resim açtığınızda, resim boyutu iletişim kutusunda gösterilen boyutlar doğal boyutunu tanımlamalıdır.

Yoğunluk düzeltilmiş içsel boyut: piksel yoğunluğunda düzeltildi. Resmin yerleşik boyutudur bir cihaz pikseline bölünür oranı. Örneğin, şu işaretlemeyi kabul edelim:

<img
  src="whats-up-1x.png"
  srcset="whats-up-2x.png 2x, whats-up-1x.png 1x"
  alt="I'm that image you wanted."
/>

Bu örnekte 1x resminin iç boyutunun 320x240 olduğunu ve 2x resminin gerçek boyutu 640x480'dir. Bu işaretleme bir istemci tarafından ayrıştırılırsa Ekran cihaz piksel oranı 2 olan bir cihazda (ör. Retina) yüklü ekranında) 2x resmi istenir. Yoğunluğu düzeltilmiş içsel boyut 640x480, 2'ye bölündüğünde 320x240 olduğu için 2x resmi 320x240'tır.

Harici boyut: Medya kaynağının CSS ve diğer düzenden sonraki boyutu faktörler (width ve height özellikleri gibi) uygulanmıştır. Haydi yoğunluk düzeltilmiş haliyle bir resim yükleyen <img> öğeniz olduğunu varsayalım içsel boyut olarak 320x240 ile birlikte, aynı zamanda CSS width ve height özelliklerine de sahip sırasıyla 256px ve 192px değerleri uygulanmıştır. Bu örnekte bu <img> öğesinin dışsal boyutu 256x192 olur.

Biraz terminolojiye göz atalım. ipuçlarından bahsetmek istiyorum.

Görüntü Alanı-Genişliği

Viewport-Width, kullanıcının görüntü alanının CSS pikseli cinsinden genişliğidir:

Viewport-Width: 320

Bu ipucu farklı içerik sunmak için ekrana özgü diğer ipuçlarıyla birlikte belirli ekran boyutları için optimum olan bir resmin işlenmesi (ör. kırpma) (ör. sanat yön), mevcut ekran genişliği için gerekli olmayan kaynakları çıkarabilirsiniz.

DPR

Cihaz piksel oranının kısaltması olan DPR, fiziksel piksellerin CSS'ye oranını bildirir kullanıcı ekranının pikselleri:

DPR: 2

Bu ipucu, bir ekranın görüntüsüne karşılık gelen resim kaynaklarını seçerken piksel yoğunluğu (ör. x açıklayıcıların srcset özelliği) belirtin.

Genişlik

Width ipucu, <img> veya sizes kullanan <source> etiket özelliğini gönderin. sizes, tarayıcıya kaynağın dışsal boyutunun ne olacağını bildirir; Width doğal boyutu şu olan bir resim istemek için bu dış boyutu kullanıyor: geçerli düzen için en uygun seçenektir.

Örneğin, bir kullanıcının 320 CSS pikseli geniş ekranı olan bir sayfa istediğini varsayalım 2 DPR ile Cihaz, şunları içeren bir <img> öğesine sahip doküman yükler: 85vw olan bir sizes özellik değeri (ör. Tümü için görüntü alanı genişliğinin% 85'i ekran boyutları) gösterilir. Width ipucu etkinleştirildiyse istemci <img> kullanıcısının src isteği ile sunucuya şu Width ipucunu gönderir:

Width: 544

Bu durumda istemci sunucuya en iyi iç yapının istenen resmin genişliği, görüntü alanı genişliğinin% 85'i (272 piksel) olur ekranın DPR'si (2) ile çarpılmasıyla elde edilen değer, 544 piksele eşittir.

Bu ipucu yalnızca ekran genişliğinin yoğunluğu düzeltildi ve bu kritik parça, resmin düzen içinde dış boyutuyla ilgili bilgilerin tümünü içerir. Bu da hem de hem sunucu hem de birincil alan adı için ideal olan resim yanıtları ve düzene uyum sağlayabilirsiniz.

İçerik-DPR

Ekranların cihaz piksel oranına sahip olduğunu zaten biliyorsunuz. Ancak kaynaklar kendi piksel oranlarına sahiptir. En basit kaynak seçiminin kullanıldığı durumlarda, cihazlar ve kaynaklar arasındaki oranlar aynı olabilir. Ama! Hem DPR ve Width başlıkları geçerliyse bir kaynağın dış boyutu ve bu iki senaryonun birbirinden farklı olduğu senaryolar üretir. Content-DPR ipucunu burada bulabilirsiniz işte burada devreye giriyor.

Diğer istemci ipuçlarından farklı olarak Content-DPR, yerine bir yanıt üstbilgisi sunucuları bir DPR ve Width ipucu, kaynak seçmek için kullanılır. Content-DPR değeri şu denklemin sonucudur:

Content-DPR = [Seçilen resim kaynağı boyutu] / ([Width] / [DPR])

Content-DPR istek başlığı gönderildiğinde tarayıcı nasıl ölçeklendirme yapacağını bilir ekranın cihaz piksel oranı ve düzen için verilen resim. Bu olmadan, görseller doğru şekilde ölçeklenmeyebilir.

Cihaz-Bellek

Teknik olarak Cihaz Belleği'nin bir parçasıdır. API, Device-Memory, yaklaşık miktar hafıza GiB'de mevcut:

Device-Memory: 2

.

Bu ipucu için olası bir kullanım örneği, JavaScript miktarını azaltmaktır. belleğe sahip cihazlardaki tarayıcılara gönderilir. Çünkü JavaScript, genellikle kaynak yoğun içerik türü tarayıcılar yükleyin. Alternatif olarak, kodu çözmek için daha az bellek kullandıkları için daha düşük DPR resimleri gönderebilirsiniz.

Ağ ipuçları

Network Information API (Ağ Bilgileri API'si), kullanıcının ağının performansını açıklayan istemci ipuçları kategorisi bağlantı. Bence en kullanışlı ipuçları bunlar. Onlarla, sunma şeklimizi değiştirerek deneyimleri kullanıcılara göre ya da yavaş bağlantısı olan müşterilere yönelik kaynaklar oluşturmaktır.

RTT

RTT ipucu, yaklaşık Gidiş Dönüş Süresi'ni (milisaniye cinsinden) sağlar. katmanız var. RTT ipucu, aktarım katmanı RTT'nin aksine unutmayın.

RTT: 125

.

Gecikmenin yükleme performansında oynadığı rol nedeniyle bu ipucu yararlıdır. RTT ipucunu kullanarak ağın yanıt verme hızına, Bu da bütün bir deneyimin daha hızlı teslim edilmesine yardımcı olur (ör. (bazı istekler atlanarak).

Aşağı bağlantı

Yükleme performansında gecikme önemli olsa da bant genişliği de önemlidir. çok önemlidir. Saniyedeki megabit (Mb/sn) cinsinden ifade edilen Downlink ipucu, Kullanıcının bağlantısının yaklaşık aşağı akış hızı:

Downlink: 2.5

.

RTT ile birlikte Downlink, içeriğin kullanıcılara ağ bağlantısının kalitesine göre sunulur.

ECT

ECT ipucu, Etkili Bağlantı Türü anlamına gelir. Değeri her biri bir bağlantıyı tanımlayan ve hem RTT hem de Downlink olmak üzere belirtilen aralıklarda değerleri için de geçerlidir.

Bu üstbilgi, gerçek bağlantı türünün ne olduğunu açıklamaz; ağ geçidinizin baz istasyonu mu yoksa kablosuz ağ bağlantısı mı olduğunu bildirmez. puan. Bunun yerine, mevcut bağlantının gecikmesini ve bant genişliğini analiz eder en çok benzeyen ağ profilini belirler. Örneğin, kablosuz ağ üzerinden yavaş bir ağa bağlıyken ECT, 2g değeriyle doldurulabilir, Bu, etkili bağlantıya en yakın tahmindir:

ECT: 2g

ECT için geçerli değerler 4g, 3g, 2g ve slow-2g'dir. Bu ipucu, bağlantı kalitesini değerlendirmek için başlangıç noktası olarak kullanılır ve daha sonra RTT ve Downlink ipuçları kullanılarak hassaslaştırılır.

Verileri Kaydet

Save-Data, ağ koşullarını kullanıcıya anlatmaktan çok fazla ipucu değildir sayfaların daha az veri göndermesi gerektiğini belirten bir tercihtir.

Save-Data adlı ağı, ağ ipucu olarak sınıflandırmayı tercih ediyorum çünkü diğer ağ ipuçlarına benzerdir. Kullanıcılar ayrıca yüksek gecikmeli/düşük bant genişliğine sahip ortamlarda onu etkinleştirme olasılığı yüksektir. Bu ipucu, mevcut olduğunda her zaman aşağıdaki gibi görünür:

Save-Data: on

Google’da, Google’da yeni bir web sitesi ile Save-Data değerleridir. Bu teknolojinin performans üzerinde büyük etkisi olabilir. Bu, kullanıcıların daha az içerik göndermenizi istiyorlar. Bunları dinleyip buna göre hareket ederseniz kullanıcılar bunu takdir eder.

Hepsini bir araya getirme

İstemci ipuçlarıyla ne yapacağınız size bağlıdır. Çünkü çok fazla şey sunuyorlar birçok seçeneğiniz vardır. Fikir üretebilmek için bir bakalım. Sconnie için uygulayabileceğiniz Timber, kurgusal bir ağaç şirkettir. Uzaktan iletişim araçlarında olduğu gibi alanlar, ağ bağlantıları kırılgan olabilir. Burası, istemci ipuçları gibi bir teknolojinin kullanıcılar için gerçekten bir fark yaratabilir.

Duyarlı Resimler

En basit duyarlı resim kullanım alanları karmaşık hale gelebilir. Peki ya Farklı ekranlar için aynı resimlerin birden fazla tedavisi ve varyantına sahip olma ve farklı biçimlerde? Bu işaretleme çok karmaşık hale geliyor, çok hızlı bir şekilde. Kolay yanlış anlaşılabilir ve kolay unutulabilir ya da önemli konuları yanlış anlaşılabilir kavramlar (ör. sizes).

<picture> ve srcset muhteşem araçlar olsa da ve bakım gerektiren kullanım alanlarının geliştirilmesi ve sürdürülmesi çok zaman alır. Otomatikleştirilmiş ancak bunu yapmak da zordur. <picture> ve srcset, otomasyon ihtiyaçlarını karşılayacak kadar karmaşık özellikler sunuyor korunacak biçimde yapılması çok önemlidir.

İstemci ipuçları bu işlemi basitleştirebilir. Resim yanıtları için müşteriyle pazarlık yapılıyor ipuçları aşağıdaki gibi görünebilir:

1. İş akışınız için mümkünse önce bir görüntü işleme (ör. sanat odaklı görüntüler) Viewport-Width ipucunu kontrol ederek.
2. Width ve DPR ipucunu kontrol ederek bir resim çözünürlüğü seçin ve resmin düzen boyutuna ve ekran yoğunluğuna uygun bir kaynak seçmek (benzer x ve w tanımlayıcılarının srcset içinde işleyiş şekline ilişkin) içerir.
3. Tarayıcının desteklediği en optimum dosya biçimini (Accept bize yardımcı olur).

Kereste firması olan hayali bir müşterimin endişe duyduğu yerde naif bir istemci ipuçlarını kullanan PHP'de duyarlı resim seçme rutini. Bu, şu anlama geliyordu: göndermek yerine:

<picture>
  <source
    srcset="
      company-photo-256w.webp   256w,
      company-photo-512w.webp   512w,
      company-photo-768w.webp   768w,
      company-photo-1024w.webp 1024w,
      company-photo-1280w.webp 1280w
    "
    type="image/webp"
  />
  <img
    srcset="
      company-photo-256w.jpg   256w,
      company-photo-512w.jpg   512w,
      company-photo-768w.jpg   768w,
      company-photo-1024w.jpg 1024w,
      company-photo-1280w.jpg 1280w
    "
    src="company-photo-256w.jpg"
    sizes="(min-width: 560px) 251px, 88.43vw"
    alt="The Sconnie Timber Staff!"
  />
</picture>

Bireysel tarayıcı desteğine bağlı olarak bu sayıyı aşağıdaki değerlere düşürebildim:

<img
  src="/image/sizes:true/company-photo.jpg"
  sizes="(min-width: 560px) 251px, 88.43vw"
  alt="SAY CHEESY PICKLES."
/>

Bu örnekte, /image URL'si bir PHP komut dosyası ve ardından gelen parametrelerdir. tarafından yeniden yazıldı mod_rewrite. Google arka uç komut dosyasına yardımcı olmak için bir resim dosya adı ve ek parametreler alır belirlenen koşullardaki en iyi resmi seçmeye çalışır.

"Ancak bu, <picture> ve srcset ifadelerini arka uç?" ilk sorunuzdur.

Bir bakıma evet. Ancak önemli bir ayrım var: Bir uygulama müşteriden medya yanıtları oluşturmak için ipuçları paylaşacağım; işin çoğu (hepsi olmasa da) Bunu yapabilen bir hizmet (CDN gibi) içerebilen, otomatikleştirilmesi daha kolaydır sizin adınıza çalışır. HTML çözümlerinde ise, yeni işaretlemenin her kullanım alanı için yardımcı olalım. Elbette, işaretleme oluşturma işlemini otomatikleştirebilirsiniz. Eğer veya gereklilikler değiştiğinde de bu farklılığı tekrar gözden geçirebilir.

İstemci ipuçları kayıpsız, yüksek çözünürlüklü herhangi bir kombinasyon için en uygun olacak şekilde dinamik olarak yeniden boyutlandırılabilen bir resimdir. ve düzenin ne kadar iyi olduğunu konuşalım. Sabit bir değeri numaralandırmanızı gerektiren srcset tarayıcı için olası görsel adaylarının bir listesidir. Bu yaklaşım, daha esnek olabiliyor. srcset, tarayıcılara genel bir grup sunmanızı zorunlu kılarken varyant sayısı (ör. 256w, 512w, 768w ve 1024w) müşteri ipuçları sağlar destekli bir çözüm, büyük bir işaretleme yığını olmadan her genişlikte hizmet verebiliyor.

Elbette resim seçme mantığını kendiniz yazmanız gerekmez. Bulutsal w_auto kullandığınızda resim yanıtları oluşturmak için istemci ipuçlarını kullanır. parametresini kullanın. ve ortalama kullanıcıların tarayıcı kullanırken% 42 daha az bayt indirdiğini gözlemledik. ipuçlarından bahsetmek istiyorum.

Ama dikkatli olun! Chrome 67'nin masaüstü sürümünde yapılan değişiklikler, desteği kaldırmıştır kaynaklar arası istemci için ipuçları. Neyse ki, bu kısıtlamalar Chrome'un mobil sürümlerini etkilemiyor ve Özellik üzerinde çalışırken tüm platformlar için Politika'nın tamamlanmış olması gerekir.

Yavaş ağlardaki kullanıcılara yardımcı olma

Uyarlanabilir performans, kaynakları sunma şeklimizi ayarlayabildiğimiz ilkesidir. müşteri ipuçlarının bize sağladığı bilgilere göre; özel olarak Kullanıcının ağ bağlantısının geçerli durumuna ilişkin bilgiler.

Sconnie Timber’ın sitesi söz konusu olduğunda ağları yavaş. Save-Data, ECT, RTT ve Downlink üstbilgileri şu anda arka uç kodumuzda incelenmiştir. Bu işlem yapıldığında ağ kalitesi oluştururuz. daha iyi bir kullanıcıya müdahale etmemiz gerekip gerekmediğini belirlemek için sunmaktır. Bu ağ puanı 0 ile 1 arasındadır. Burada 0 en kötü değerdir ağ olası ağ kalitesini artırır ve 1 en iyisidir.

Başlangıçta Save-Data olup olmadığını kontrol ederiz. Böyle bir durumda, puan şu şekilde ayarlanır: 0 (Kullanıcının ve daha hızlı bir deneyim sunar.

Ancak Save-Data yoksa devam eder ve ECT, Ağı açıklayan bir puan hesaplamak için RTT ve Downlink ipuçları bağlantı kalitesini artırır. Ağ puanı oluşturma kaynağı kod GitHub'da bulabilirsiniz. Buradan çıkaracağımız fikir şu: bazı moda uyguluyorsanız, yavaş hareket edenler için deneyimleri daha iyi hale getirebiliriz ağlar.

Siteler, istemci ipuçlarının sağladığı bilgilere uyum sağladığında, yaklaşımı benimsemektir. Hangi kaynakların gönder. Duyarlı resim seçme mantığımızı daha düşük kalitede gönderecek şekilde değiştirebiliriz. ağ kalitesi olduğunda yükleme performansını hızlandırmak için belirli bir ekrana ait resimler kötüdür.

Bu örnekte, bir dizi anahtar kelime eklendiğinde istemci ipuçlarının Daha yavaş ağlardaki sitelerin performansını artırma Aşağıda bir WebPagetest'i görebilirsiniz Yavaş bir ağda bulunan ve istemci ipuçlarına uyum sağlamayan bir sitenin şelalesi:

Ve şimdi aynı yavaş bağlantıda aynı site için bir şelale dışında, varsa, site kritik olmayan sayfa kaynaklarını elemek için istemci ipuçlarını kullanır:

İstemci ipuçları, sayfa yüklenme süresini 45 saniyeden daha az bir süreye düşürdü bunun onda biri. Bu senaryoda müşteri ipuçlarının faydaları önem taşır ve eleştirel dil arayan kullanıcılar için ciddi bir fayda olabilir. yavaş ağlar üzerinden bilgi sağlar.

Ayrıca, deneyimi bozmadan istemci ipuçlarını kullanmak mümkündür Chrome Tarayıcı'yı desteklemez. Örneğin, 2024 yılı boyunca teslim etmeye devam ederken ECT ipucunun değerini bir varsayılan değer ayarlayabiliriz. Örneğin:

// Set the ECT value to "4g" by default.
$ect = isset($_SERVER["HTTP_ECT"]) ? $_SERVER["HTTP_ECT"] : "4g";

Burada "4g", ECT üstbilgisindeki en yüksek kaliteli ağ bağlantısını temsil eder anlatacağım. $ect öğesini "4g" öğesine başlatırsak istemciyi desteklemeyen tarayıcılar ipuçları etkilenmez. FTW'yi etkinleştir!

Bu önbelleklere dikkat edin!

HTTP başlığına dayalı bir yanıtı her değiştirdiğinizde, bunu önbelleklerin söz konusu kaynak için gelecekteki getirmeleri nasıl işleyeceğini. Vary başlık Bu özellik, girişleri istek başlıklarının değerine göre önbelleğe aldığı için bir seçimdir. Basitçe anlatırsak, verilen bir HTTP temel alınarak herhangi bir yanıtı değiştirdiğinizde Bu üstbilgiyi, neredeyse her zaman Vary öğesine eklemeniz gerekir. Örneğin:

Vary: DPR, Width

Bununla birlikte, bu konuda önemli bir uyarı var: Vary ürününün hiçbir zaman önbelleğe alınmasını önlemek için sık değişen bir üstbilgide (ör. Cookie) yanıtlar kaynaklar etkili bir şekilde önbelleğe alınamaz. Bunu bildiğinizde uzak durun RTT veya Downlink gibi istemci ipucu başlıklarında Vary ekleme, çünkü bunlar bağlantı faktörlerini ortaya çıkarır. Raporda değişiklik yapmak yalnızca ECT üstbilgisini anahtarlamaya çalışın. Bu şekilde önbellekteki eksiklikleri en aza indirin.

Elbette bu durum yalnızca her şeyden önce bir yanıtı önbelleğe alıyorsanız geçerlidir. Örneğin, içerikleri dinamikse HTML öğelerini önbelleğe alamazsınız. Bunun nedeni, sürekli ziyaretlerde kullanıcı deneyimini bozabilir. Böyle durumlarda gerekli olduğunu düşündüğünüz herhangi bir temelde bu tür yanıtları değiştirebilirsiniz. Vary konusunda endişelenmenize gerek yok.

Service Worker'lardaki istemci ipuçları

İçerik pazarlığı artık yalnızca sunuculardan ibaret değil. Çünkü Service Worker'lar, arasında proxy sağlamak için, kaynakların nasıl dışa aktarılacağını ve JavaScript aracılığıyla sunulur. Buna istemci ipuçları da dahildir. Hizmet çalışanında fetch etkinliği için event nesnesini kullanabilirsiniz request.headers.get aşağıdaki gibi bir kaynağın istek başlıklarını okumak için kullanılır:

self.addEventListener('fetch', (event) => {
  let dpr = event.request.headers.get('DPR');
  let viewportWidth = event.request.headers.get('Viewport-Width');
  let width = event.request.headers.get('Width');

  event.respondWith(
    (async function () {
      // Do what you will with these hints!
    })(),
  );
});

.

Etkinleştirdiğiniz istemci ipucu başlıkları bu şekilde okunabilir. Ancak bu bu bilgileri almanın tek yolu değil. Ağa özel ipuçları navigator nesnesindeki eşdeğer JavaScript özelliklerinde okunabilir:

'nı inceleyin.

Dosya türleri için Imagemin eklentileri.

İstemci ipucu	JS eşdeğeri
"ECT"	`navigator.connection.effectiveType`
"RTT"	`navigator.connection.rtt`
"Save-Verileri"	`navigator.connection.saveData`
"Aşağı bağlantı"	`navigator.connection.downlink`
"Cihaz Belleği"	`navigator.deviceMemory`

Bu API'ler, in operatör:

if ('connection' in navigator) {
  // Work with netinfo API properties in JavaScript!
}

Buradan, sunucudakine benzer bir mantık kullanabilirsiniz ancak istemci ipuçlarıyla içerik pazarlığı yapmak için bir sunucuya ihtiyacınız olmaz. Hizmet nedenleriyle deneyimleri daha hızlı ve daha dayanıklı hale getirme gücüne ek olarak, kullanıcı çevrimdışıyken de içerik sunabiliyor.

Özet

İstemci ipuçları sayesinde, kullanıcılarımıza kısa bir sürede deneyimleri bir yöntem belirlemektir. Kullanıcının cihazına göre medya yayınlayabiliriz özellikleri, yalnızca görsel reklam kullanmaya kıyasla duyarlı resimler sunmayı özellikle karmaşık kullanım alanlarında <picture> ve srcset üzerinde çalışır. Bu sayede, yalnızca geliştirme tarafında harcanan zamanı ve çabayı azaltmakla kalmayıp, aynı zamanda kaynaklar (özellikle de görseller) kullanıcının ekranlarını hedefleyecek şekilde ve srcset.

Belki daha da önemlisi, zayıf ağ bağlantılarını yakından inceleyebilir ve hem de bunu nasıl sağladığımızı değiştirerek kullanıcılar için açıklığa kavuşturmaya çalışırız. Bu kırılgan ağlardaki kullanıcıların sitelere daha kolay erişmesini sağlamada uzun bir yol katetmektir. Service Worker'larla birlikte kullanıldığında, kullanıcılar için son derece hızlı çevrimdışı kullanılabilir.

İstemci ipuçları yalnızca Chrome ve Chromium tabanlı uygulamalarda kullanılabilir. veya gözünüzün önünde bir engelin olmadığı desteklenmeyen tarayıcılarda kullanabilirsiniz. Benzersiz bir web sitesi oluşturmak için her kullanıcının cihazından haberdar olan kapsayıcı ve uyarlanabilir deneyimler özellikleri ve bağlandıkları ağlar. Diğer tarayıcı tedarikçilerinin bunların değerini görür ve uygulama niyetini gösterir.

Kaynaklar

• İstemciyle Otomatik Duyarlı Resimler İpuçları
• İstemci İpuçları ve Duyarlı Resimler - Chrome'da Neler Değişti? 67
• (İstemci) İpucu Alın! (Slaytlar)
• Google Cloud Platform'un Save-Data

Ilya Grigorik'e teşekkür ederiz, Eric Portis, Jeff Posnick, Yoav Weiss ve Estelle Weyl, bu makalede değerli geri bildirimler ve düzenlemeler var.