ZDF, çevrimdışı ve koyu modla nasıl video PWA oluşturdu?

ZDF'nin çevrimdışı destek, yükleme ve karanlık mod gibi modern özelliklere sahip bir progresif web uygulaması (PWA) nasıl oluşturduğunu öğrenin.

Martin Schierle
Martin Schierle
Scott Friesen
Scott Friesen

ZDF yayın kuruluşu, kullanıcı arabirimi teknoloji grubunu yeniden tasarlamayı düşündüğünde, akış sitesi ZDFmediathek için progresif web uygulamalarına daha yakından bakmaya karar verdi. Geliştirme ajansı Cellular, ZDF'nin platforma özel iOS ve Android uygulamalarına eşdeğer bir web tabanlı deneyim oluşturma görevini üstlendi. PWA, yükleme, çevrimdışı video oynatma, geçiş animasyonları ve karanlık mod sunar.

Hizmet çalışanı ekleme

PWA'ların önemli özelliklerinden biri çevrimdışı destektir. ZDF için ağır işlerin çoğu, farklı önbelleğe alma stratejilerini desteklemeyi kolaylaştıran bir kitaplık ve Node modülü grubu olan Workbox tarafından yapılır. ZDF PWA, TypeScript ve React ile oluşturulduğundan statik öğeleri önceden önbelleğe almak için create-react-app'e önceden yerleştirilmiş Workbox kitaplığını kullanır. Bu sayede uygulama, dinamik içeriği (bu durumda videoları ve meta verilerini) çevrimdışı olarak kullanıma sunmaya odaklanabilir.

Temel fikir oldukça basittir: Videoyu getirin ve IndexedDB'de bir blob olarak depolayın. Ardından oynatma sırasında çevrimiçi/çevrimdışı etkinlikleri dinleyin ve cihaz internete bağlı olmadığında indirilen sürüme geçin.

Maalesef işler biraz daha karmaşık bir hal aldı. Proje şartlarından biri, çevrimdışı destek sağlamayan resmi ZDF web oynatıcısını kullanmaktı. Oynatıcı, giriş olarak bir içerik kimliği alır, ZDF API ile iletişim kurar ve ilişkili videoyu oynatır.

Bu noktada web'in en güçlü özelliklerinden biri olan hizmet çalışanları devreye girer.

Hizmet çalışanı, oynatıcı tarafından yapılan çeşitli istekleri durdurabilir ve IndexedDB'deki verilerle yanıt verebilir. Bu sayede, oynatıcının kodunda tek bir satır değiştirmek zorunda kalmadan çevrimdışı özellikleri şeffaf bir şekilde ekleyebilirsiniz.

Çevrimdışı videolar genellikle oldukça büyük olduğundan, bunların kaç tanesinin cihazda depolanabileceği önemli bir sorudur. Uygulama, StorageManager API'nin yardımıyla kullanılabilir alanı tahmin edebilir ve indirme işlemini başlatmadan önce yeterli alan olmadığında kullanıcıyı bilgilendirebilir. Maalesef Safari, bu API'yi uygulayan tarayıcılar listesinde yer almıyor. Bu makalenin yazıldığı sırada diğer tarayıcıların kotaları nasıl uyguladığıyla ilgili güncel bilgi bulunmuyordu. Bu nedenle ekip, davranışı çeşitli cihazlarda test etmek için küçük bir yardımcı program yazdı. Tüm ayrıntıları özetleyen kapsamlı bir makale yayınlandı.

Özel yükleme istemi ekleme

ZDF PWA, özel bir uygulama içi yükleme akışı sunar ve kullanıcılardan ilk videolarını indirmek istediklerinde uygulamayı yüklemelerini ister. Kullanıcı uygulamayı çevrimdışı kullanmak istediğini açıkça belirttiği için bu, yükleme isteğinde bulunmanın iyi bir zamanıdır.

Yükleme için özel davetiye. Çevrimdışı izlemek için bir video indirirken özel yükleme istemi tetikleniyor.
Çevrimdışı izlemek için video indirirken özel yükleme istemi tetikleniyor.

İndirilenlere erişmek için çevrimdışı sayfa oluşturma

Cihaz internete bağlı değilken kullanıcı çevrimdışı modda kullanılamayan bir sayfaya gittiğinde, daha önce indirilen tüm videoların listeleneceği veya (henüz içerik indirilmemişse) çevrimdışı özelliğin kısa bir açıklamasının yer aldığı özel bir sayfa gösterilir.

Çevrimdışı olarak izlenebilen tüm içerikleri gösteren çevrimdışı sayfa. Çevrimdışı olarak izlenebilecek içerik olmadığını gösteren çevrimdışı sayfa.
Çevrimdışı olarak izlenebilen tüm içerikleri gösteren çevrimdışı sayfa.

Uyarlanabilir özellikler için kare yükleme hızını kullanma

ZDF PWA, zengin bir kullanıcı deneyimi sunmak için kullanıcı ekranı kaydırdığında veya gezindiğinde gerçekleşen bazı ince geçişler içerir. Bu tür animasyonlar, düşük kaliteli cihazlarda genellikle tam tersini yapar ve saniyede 60 kare hızında çalışmazlarsa uygulamanın yavaş ve daha az duyarlı olmasını sağlar. Bu durumu dikkate almak için uygulama, requestAnimationFrame() aracılığıyla gerçek kare hızını ölçer. Uygulama yüklenirken değer belirli bir eşiğin altına düştüğünde tüm animasyonlar devre dışı bırakılı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ı hakkında yalnızca kaba bir gösterge sunsa ve her yükleme için değişse de karar verme konusunda iyi bir temel oluşturdu. Kullanım alanına bağlı olarak geliştiricilerin uygulayabileceği uyarlanabilir yüklemeyle ilgili başka teknikler olduğunu belirtmek isteriz. Bu yaklaşımın en büyük avantajlarından biri, tüm platformlarda kullanılabilmesidir.

Koyu mod

Modern mobil deneyimlerde popüler bir özellik karanlık mod'dur. Özellikle loş ışıkta video izlerken birçok kullanıcı karartılmış kullanıcı arayüzünü tercih eder. ZDF PWA, kullanıcıların açık ve koyu tema arasında geçiş yapmasına olanak tanıyan bir anahtar sağlamanın yanı sıra işletim sistemi genelindeki renk tercihlerindeki değişikliklere de tepki verir. Bu sayede uygulama, temayı günün saatine göre değiştirmek için program ayarlanmış cihazlarda görünümünü otomatik olarak değiştirir.

Sonuçlar

Yeni progressive web uygulaması, Mart 2020'de herkese açık beta sürümü olarak sessizce kullanıma sunuldu ve o zamandan bu yana çok sayıda olumlu geri bildirim aldı. Beta aşaması devam ederken PWA kendi geçici alanında çalışmaya devam eder. PWA herkese açık olarak tanıtılmamış olsa da kullanıcı sayısı giderek artıyor. Bunların çoğu, Windows 10 kullanıcılarının PWA'ları bulup platforma özel uygulamalar gibi yüklemesine olanak tanıyan Microsoft Store'dan alınmıştır.

Sırada ne var?

ZDF, kişiselleştirme için giriş, cihazlar ve platformlar arası izleme ve push bildirimleri gibi özellikleri PWA'sına eklemeye devam etmeyi planlıyor.