Günümüzde, internete bağlanabilen cihazların sayısı daha fazla. hiç olmadığı kadar zor olacaktır. İleri teknoloji cihazlara sunulan aynı web uygulaması Masaüstü bilgisayarlar, düşük güç tüketen bir telefona, kol saatine veya tablete de sunulabilir. ve aynı zamanda kullanıcı deneyimine yönelik etkileyici deneyimler oluşturmak da sorunsuz bir şekilde çalışmasını sağlar.
Device Memory API, yeni bir web
web geliştiricilerin modern cihazlarla başa çıkmalarına yardımcı olmayı amaçlayan
gösteriyoruz. navigator nesnesine salt okunur bir özellik ekler,
navigator.deviceMemory: Cihazın yeterli RAM'i olduğunu gösterir.
gigabayt (ikinin en yakın kuvvetine aşağı yuvarlanır). API ayrıca bir
İstemci İpuçları Başlığı,
Device-Memory için aynı değeri bildirir.
Device Memory API, geliştiricilerin iki temel işlemi yapmasını sağlar:
- Çalışma zamanında, döndürülen verilere göre hangi kaynakların sunulacağıyla ilgili kararlar alın cihazın bellek değeri (ör. bir uygulamanın "basit" sürümünü düşük bellek kapasiteli cihazlarda).
- Nasıl yapıldığını daha iyi anlayabilmek için bu değeri bir analiz hizmetine bildirin. cihaz belleği, kullanıcı davranışı, dönüşümler veya diğer metriklerle ilişkili işletmeniz için önemlidir.
İçeriği cihaz belleğine göre dinamik olarak uyarlama
Kendi web sunucunuzu çalıştırıyorsanız ve
ile ilgili daha fazla bilgi edinmek istiyorsanız aşağıdaki ifadeyi içeren isteklere
Device-Memory İstemci İpuçları Başlığı.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
Bu teknikle uygulamanızın bir veya daha fazla sürümünü oluşturabilirsiniz
komut dosyalarını kullanır ve istemciden gelen isteklere
Device-Memory başlığında belirlenen değer. Bu sürümlerin
(bakımı daha zor olduğu için) tamamen farklı kod. Çoğu zaman
"basit" sürümü yalnızca pahalı ve kritik olmayan özellikleri hariç tutar
birleştirilmesiyle oluşturulur.
İstemci İpuçları Başlığını Kullanma
Device-Memory üstbilgisini etkinleştirmek için İstemci İpuçları <meta> etiketini ekleyin
ekleyin:<head>
<meta http-equiv="Accept-CH" content="Device-Memory">
İsterseniz "Cihaz-Bellek" de ekleyebilirsiniz sunucunuzun Accept-CH yanıt başlıklarında:
HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width
Bu işlem, tarayıcının Device-Memory üstbilgisini tüm alt kaynakla birlikte göndermesini belirtir
geçerli sayfa için istek gönderebilir.
Diğer bir deyişle,
veya 0,5 GB RAM'e sahip bir cihazda siteyi ziyaret ederse, tüm görseller, CSS ve
Bu sayfadaki JavaScript istekleri,Device-Memory
değerini "0,5" olarak ayarladığınızda, sunucunuz bu tür isteklere istediğiniz şekilde yanıt verebilir.
uygun hale getirelim.
Örneğin, aşağıdaki Ekspres rotası
"basit" Device-Memory üstbilgisi ayarlanmışsa ve değeri
veya "tam" olarak yayınlar tarayıcı
Device-Memory üstbilgisi veya değer 1 veya daha büyükse:
app.get('/static/js/:scriptId', (req, res) => {
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `scriptVersion` to "lite" if (and only if)
// `Device-Memory` isn't undefined and returns a number less than 1.
const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Respond with the file based on `scriptVersion` above.
res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});
JavaScript API'yi kullanma
Bazı durumlarda (örneğin, statik dosya sunucusu veya CDN gibi) HTTP başlığına göre isteklere koşullu olarak yanıt verme. Böyle durumlarda JavaScript API'yi kullanarak JavaScript kodunuzda koşullu istekler gönderebilir.
Aşağıdaki mantık, dinamik olarak ekspres rotaya benzerdir. istemci tarafı mantığında komut dosyası URL'sini belirler:
// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';
const component = await import(`path/to/component.${componentVersion}.js`);
component.init();
Temel alınan öğelere göre aynı bileşenin farklı sürümlerini koşullu olarak iyi bir stratejidir, bazen her şeyi atlamamak daha da iyi olabilir. bir bileşen sunmaz.
Çoğu durumda, bileşenler yalnızca geliştirmelerden ibarettir. Katkılarınız için uygulama deneyimi geliştirilir, ancak uygulamanın temel işlevi için gerekli değildir. İçinde bu gibi durumlarda, en başta bu tür bileşenleri yüklememek mantıklı olabilir. Kullanıcı deneyimini iyileştirmeyi amaçlayan bir bileşen uygulamanın yavaşlamasına neden oluyorsa ya da yanıt vermezse amacına ulaşamaz.
Kullanıcı deneyimini etkileyecek herhangi bir karar vermeniz durumunda, ve etkisini ölçmenizi sağlar. Projenin nasıl ilerlediği ve nasıl ilerlediği konusunda uygulamanızın bugünkü performansını gösteriyor.
Cihaz belleğinin, mevcut cihazdaki kullanıcı davranışıyla ilişkisini anlamak hangi işlemin yapılması gerektiğini daha iyi bildirir ve Bu, gelecekteki değişikliklerin başarısını ölçmek için kullanabileceğiniz bir temel sunar.
Analizlerle cihaz belleğini izleme
Device Memory API yenidir ve çoğu analiz sağlayıcısı bu API'yi izlememektedir varsayılan olarak. Neyse ki çoğu analiz sağlayıcısı, özel verilerinizi (örneğin, Google Analytics'te Özel Boyutlar adlı bir özellik bulunur) kullanıcılarınızın cihaz belleğini izlemek için kullanılır. cihazlar.
Özel cihaz bellek boyutu kullanma
Google Analytics'te özel boyutları kullanmak iki adımlı bir işlemdir.
- Google Analytics'te özel boyutu ayarlayın.
- İzleme kodunuzu
setolarak güncelleyin cihaz bellek değerini girin.
Özel boyutu oluştururken boyuta "Cihaz Belleği" adını verin. ve "oturum" kapsamı. Kullanıcı göz atma oturumu sırasında değer değişmeyeceğinden:
Sonraki adımda izleme kodunuzu güncelleyin. Aşağıda, bunun nasıl görünebileceğine dair bir örnek verilmiştir. Device Memory API'yi desteklemeyen tarayıcılarda boyut değeri "(not set)" olur.
// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');
// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');
// Do any other other custom setup you want...
// Send the initial pageview.
ga('send', 'pageview');
Cihaz Belleği verileri hakkında rapor oluşturma
Cihaz bellek boyutu
set
Google Analytics'e gönderdiğiniz tüm veriler bu değeri içerecektir.
Bu sayede istediğiniz tüm metrikleri (ör.sayfa yüklenme süreleri, hedef tamamlama oranı vb.) cihaza göre ayırabilirsiniz.
olup olmadığını görebilirsiniz.
Cihaz belleği yerleşik bir boyuttan ziyade özel bir boyut olduğundan, standart raporların hiçbirinde görünmez. Bu verilere erişmek için yapmanız gerekenler özel rapor oluşturun. Örneğin, yükleme sürelerini cihaz belleği şu şekilde görünebilir:
Bu aracın oluşturduğu rapor da aşağıdaki gibi görünebilir:
Cihaz bellek verilerini toplamaya ve kullanıcıların tüm bellek aralıklarında deneyimleyen kullanıcılara farklı kaynaklar sunmayı deneyin ( teknik) kullanılabilir. Daha sonra, sonuçları görebilir ve iyileşip iyileşmediğine bakın.
Özet
Bu yayında, uygulamanızı uyarlamak için Device Memory API'yi nasıl kullanacağınız açıklanmaktadır olanak sağlar. ve bu becerilerin nasıl uygulamanızla etkileşim kuracaktır.
Bu yayın Device Memory API'ye odaklansa da cihaz özelliklerini bildiren herhangi bir API'ye uygulanabilir. ağ koşullarını test edin.
Cihaz ortamı genişlemeye devam ederken bir yandan da web geliştiricileri, gerçek hayattan yararlanma konusunda karar verirken nasıl etkilediğini açıklamışsınızdır.