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

ZDF'nin çevrimdışı destek, yüklenebilirlik ve koyu mod gibi modern özellikleri kullanarak progresif web uygulamasını (PWA) nasıl geliştirdiğini öğrenin.

Martin Schierle

Scott Friesen

Yayıncı ZDF'nin ön uç teknolojisini yeniden tasarlamayı düşündüğünde Progresif Web Uygulamaları'na daha yakından bakmaya karar verdiler. ZDFmediathek adlı akış sitesi. Geliştirme ajansı Cellular, web tabanlı bir platform oluşturmak için işin üstesinden geldi mobil cihazlar için ZDF'nin platforma özgü iOS ve Android uygulamalarıyla İlgili içeriği oluşturmak için kullanılan PWA; yüklenebilirlik, çevrimdışı video oynatma, geçiş animasyonları ve koyu mod.

Hizmet çalışanı ekleme

PWA'ların temel özelliklerinden biri çevrimdışı destektir. ZDF için işin büyük bir kısmı Çalışma kutusu: Kitaplık grubu ve Düğüm modüllerinde farklı önbellek stratejilerinin desteklenmesini kolaylaştırır. İlgili içeriği oluşturmak için kullanılan ZDF PWA, TypeScript ve React ile tasarlandığından Workbox kitaplığını kullanır yerleşik olarak bulunan create-react-app'i statik öğeleri önbelleğe alır. Bu, uygulamanın bir öğeyi dinamik hale getirmeye odaklanmasını sağlar. çevrimdışı kullanılabilir hale gelir. Bu durumda videolar ve meta verileri.

Temel fikir oldukça basittir: Videoyu getirin ve bir blob olarak IndexedDB. Ardından oynatma sırasında çevrimiçi/çevrimdışı etkinlikleri dinleyin ve cihaz çevrimdışı olduğunda indirilen sürüm

Maalesef işler biraz daha karmaşık hale geldi. Projelerden biri kullanmaya devam etmek için herhangi bir resmî ZDF web oynatıcısını kullanmak Çevrimdışı destek. Oynatıcı giriş olarak Content ID'yi alır, ZDF API ile konuşur. ve ilişkili videoyu oynatır.

İşte web'in en güçlü özelliklerinden biri işte burada. hizmet çalışanları.

Service Worker, oynatıcı tarafından yapılan çeşitli isteklere müdahale edebilir ve IndexedDB'deki verilerle yanıt vermelidir. Bu şekilde çevrimdışı erişim ve oyuncunun kodunu tek bir satıra sığdırmak zorunda kalmadan yeteneklerini gösterir.

Çevrimdışı videolar genellikle çok büyük olduğundan, bu videoların kaç tanesinin depolanabileceği anlamına gelir. StorageManager'ın yardımıyla API'ya göre uygulama, yer ayırmadan önce yeterli alan olmadığında kullanıcıya bilgi verir. indirme işlemi başlatılıyor. Maalesef tarayıcı listesinde Safari yok olduğunu ve yazdığım sırada hem API'nin hem de Diğer tarayıcıların kotaları nasıl uyguladığı hakkında bilgi. Bu nedenle ekip, küçük yardımcı program çeşitli cihazlarda kullanılabilir. Şu ana kadar kapsamlı makale mevcuttur. bolca fırsat sunuyor.

Özel yükleme istemi ekleme

ZDF PWA, özel bir uygulama içi yükleme akışı sunar ve kullanıcılardan ilk videolarını indirmek isterler indirmez uygulamayı yüklesinler. Bu, iyi bir zamandır. Çünkü kullanıcı açıkça yükleme yapmak istediğini uygulamayı çevrimdışıyken kullanmayacaktır.

Bir video çevrimdışı kullanım için indirilirken özel yükleme istemi tetikleniyor.

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

Cihaz internete bağlı değilse ve kullanıcı bir çevrimdışı modunda kullanılamayan özel bir sayfa açılırsa bunun yerine daha önce indirilmiş tüm videoları listeler ( indirilmiş değil) çevrimdışı özelliğinin kısa bir açıklamasını gösterir.

Çevrimdışı olarak izlenebilecek 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 bazı ince geçişler içeriyor. Kullanıcı ekranı kaydırdığında veya gezindiğinde gerçekleşen etkinliktir. Aşağıdaki gibi düşük teknoloji cihazlarda animasyonlar genellikle bunun tam tersi bir etki yaratır ve uygulamanın yavaş hissetmesine neden olur. ve saniyede 60 kare hızında çalışmadıklarında daha az duyarlı hale gelir. Bunu şu ana dek uygulama requestAnimationFrame() üzerinden gerçek kare hızını ölçerken değeri belirli bir değerin altına düştüğünde, uygulama tüm animasyonları yükler ve sağlayabilir.

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 genel durumu hakkında yalnızca genel bir gösterge sağlasa bile, performansta değişiklik gösterebilir. Ancak bu, her yükleme için ele alacağız. Kullanım alanına bağlı olarak, içeriklerinizin uyarlanabilir yükleme için diğer teknikler olanak sağlayan yeni bir araç oluşturuyor. Bu yaklaşımın en büyük avantajlarından biri tüm platformlarda kullanılabilir.

Koyu mod

Modern mobil deneyimlerin popüler özelliklerinden biri de koyu mod'a gidin. Özellikle şu durumlarda Düşük ortam ışığında video izleyen çoğu kişi loş kullanıcı arayüzünü tercih ediyor. ZDF PWA Kullanıcıların ışık ve ışık arasında geçiş yapmasını sağlayan bir anahtar sağlamakla kalmaz, koyu temada, işletim sistemi genelindeki renk tercihlerindeki değişikliklere de tepki verir. Buradan Uygulama, günün saatine göre temayı değiştirin.

Sonuçlar

Yeni progresif web uygulaması, Mart 2020'de herkese açık beta olarak sessiz bir şekilde kullanıma sunuldu ve o zamandan beri çok olumlu geri bildirim aldı. Beta aşamasında olarak devam etse de PWA hâlâ kendi geçici alanı altında çalışıyor. Her ne kadar PWA herkese açık olarak tanıtılmadı, sürekli artan kullanıcı sayısı var. Birçok Windows 10 kullanıcılarının Microsoft Store'dan indirebilecekleri, yüklemelerine yardımcı olur.

Sırada ne var?

ZDF, PWA'larına şu özellikleri eklemeye devam etmeyi planlıyor: kişiselleştirme, cihazlar arası ve platform görüntüleme ve push bildirimleri.