Yayıncı ZDF, ön uç teknoloji yığınını yeniden tasarlamayı düşünürken, yayın siteleri için Progressive Web Apps’e daha yakından bakmaya karar verdi. ZDFmediathek. kalkınma ajansı Hücresel ZDF’nin platforma özgü iOS ve Android uygulamalarıyla aynı seviyede olan web tabanlı bir deneyim oluşturma zorluğunu üstlendi. PWA kurulabilirlik, çevrimdışı video oynatma, geçiş animasyonları ve karanlık mod sunar.
Servis çalışanı ekleme #
Bir PWA’nın önemli bir özelliği çevrimdışı destektir. ZDF için ağır yüklerin çoğu, farklı önbelleğe alma stratejilerini desteklemeyi kolaylaştıran bir dizi kitaplık ve Düğüm modülü olan Workbox tarafından yapılır. ZDF PWA, TypeScript ve React ile oluşturulmuştur, bu nedenle zaten yerleşik olan Workbox kitaplığını kullanır. oluştur-tepki-uygulaması statik varlıkları önbelleğe almak için. Bu, uygulamanın dinamik içeriği, bu durumda videoları ve bunların meta verilerini çevrimdışı kullanılabilir hale getirmeye odaklanmasını sağlar.
Temel fikir oldukça basit: videoyu getirin ve IndexedDB’de bir damla olarak saklayın. Ardından oynatma sırasında çevrimiçi/çevrimdışı olayları dinleyin ve cihaz çevrimdışı olduğunda indirilen sürüme geçin.
Ne yazık ki işler biraz daha karmaşık çıktı. Proje gereksinimlerinden biri, herhangi bir çevrimdışı destek sağlamayan resmi ZDF web oynatıcısını kullanmaktı. Oynatıcı, girdi olarak bir içerik kimliği alır, ZDF API ile konuşur ve ilgili videoyu oynatır.
Web’in en güçlü özelliklerinden birinin imdada yetiştiği yer burasıdır: servis çalışanları.
Hizmet çalışanı, oynatıcı tarafından yapılan çeşitli istekleri yakalayabilir ve IndexedDB’den gelen verilerle yanıt verebilir. Bu, oyuncunun kodunun tek bir satırını değiştirmek zorunda kalmadan şeffaf bir şekilde çevrimdışı yetenekler ekler.
Çevrimdışı videolar oldukça büyük olma eğiliminde olduğundan, bunlardan kaçının bir cihazda gerçekten depolanabileceği büyük bir sorudur. Uygulama, StorageManager API’sinin yardımıyla kullanılabilir alanı tahmin edebilir ve indirmeye başlamadan önce bile yetersiz alan olduğunda kullanıcıyı bilgilendirebilir. Ne yazık ki Safari, bu API’yi uygulayan tarayıcılar listesinde yer almıyor ve bu yazının yazıldığı sırada, diğer tarayıcıların kotaları nasıl uyguladığına dair çok fazla güncel bilgi yoktu. Bu nedenle ekip bir küçük yardımcı program davranışı çeşitli cihazlarda test etmek için. Şimdiye kadar tüm detayları özetleyen kapsamlı bir makale var.
Özel yükleme istemi ekleme #
ZDF PWA, özel bir uygulama içi kurulum akışı sunar ve kullanıcılardan ilk videolarını indirmek istedikleri anda uygulamayı yüklemelerini ister. Kullanıcı, uygulamayı çevrimdışı kullanma niyetini açıkça ifade ettiğinden, bu, yükleme istemek için iyi bir zaman noktasıdır.
İndirmelere erişmek için çevrimdışı bir sayfa oluşturma #
Cihaz internete bağlı değilken ve kullanıcı çevrimdışı modda olmayan bir sayfaya gittiğinde, bunun yerine önceden indirilmiş tüm videoları veya (henüz herhangi bir içerik indirilmemişse) çevrimdışı özelliğin kısa bir açıklamasını listeleyen özel bir sayfa gösterilir.
Uyarlanabilir özellikler için çerçeve yükleme hızını kullanma #
Zengin bir kullanıcı deneyimi sunmak için ZDF PWA, kullanıcı kaydırdığında veya gezindiğinde gerçekleşen bazı ince geçişler içerir. Düşük kaliteli cihazlarda, bu tür animasyonlar genellikle ters etkiye sahiptir ve saniyede 60 kare hızında çalışmazlarsa uygulamanın yavaş ve daha az duyarlı olmasına neden olur. Bunu hesaba katmak için uygulama, gerçek kare hızını şu şekilde ölçer: requestAnimationFrame() uygulama, değer belirli bir eşiğin altına düştüğünde tüm animasyonları yükler ve devre dışı bırakır.
const frameRate = new Promise(resolve => {
let lastTick;
const samples = [];function measure() {
const tick = Date.now();
if (lastTick) samples.push(tick - lastTick);
lastTick = tick;
if (samples.length 20) requestAnimationFrame(measure);
else {
const avg = samples.reduce((a, b) => a + b) / samples.length;
const fps = 1000 / avg;
resolve(fps);
}
}
measure();
});
Bu ölçüm, cihazın performansının yalnızca kabaca bir göstergesini sağlasa ve her yüke göre değişse bile, yine de karar vermek için iyi bir temel oluşturuyordu. Kullanım durumuna bağlı olarak, geliştiricilerin uygulayabileceği uyarlanabilir yükleme için başka teknikler olduğunu belirtmekte fayda var. Bu yaklaşımın en büyük avantajlarından biri, tüm platformlarda kullanılabilir olmasıdır.
Karanlık mod #
Modern mobil deneyimler için popüler bir özellik, karanlık moddur. Özellikle düşük ortam ışığında video izlerken birçok kişi soluk bir kullanıcı arayüzünü tercih eder. ZDF PWA, yalnızca kullanıcıların açık ve koyu tema arasında geçiş yapmasına izin veren bir anahtar sağlamakla kalmaz, aynı zamanda işletim sistemi genelindeki renk tercihlerindeki değişikliklere tepki verir. Bu şekilde uygulama, günün saatine göre tema tabanını değiştirmek için bir program ayarlamış olan cihazlardaki görünümünü otomatik olarak değiştirecektir.
Sonuçlar #
Yeni progresif web uygulaması, Mart 2020’de sessiz bir şekilde herkese açık bir beta olarak kullanıma sunuldu ve o zamandan beri pek çok olumlu geri bildirim aldı. Beta aşaması devam ederken, PWA kendi geçici etki alanı altında çalışmaya devam eder. PWA halka açık bir şekilde tanıtılmamış olsa da, giderek artan sayıda kullanıcı var. Bunların çoğu, Windows 10 kullanıcılarının PWA’ları keşfetmesine ve bunları platforma özel uygulamalar gibi yüklemesine olanak tanıyan Microsoft Store’dan alınmıştır.
Sıradaki ne? #
ZDF, kişiselleştirme için oturum açma, cihazlar arası ve platform görüntüleme ve anlık bildirimler dahil olmak üzere PWA’larına özellikler eklemeye devam etmeyi planlıyor.