Jak firma ZDF utworzyła PWA dla reklam wideo w trybie offline i ciemnym

Dowiedz się, jak firma ZDF stworzyła progresywną aplikację internetową (PWA) z nowoczesnymi funkcjami, takimi jak obsługa offline, możliwość instalacji i tryb ciemny.

Martin Schierle

Scott Friesen

Gdy nadawca ZDF rozważał modernizację technologii frontendu firma postanowiła przyjrzeć się bliżej progresywnym aplikacjom internetowym ze względu na z serwisu streamingowego ZDFmediathek. Agencja rozwoju Firma komórkowa postanowiła stworzyć aplikację internetową na równi z aplikacjami ZDF na iOS i Androida. PWA oferuje możliwość instalacji, odtwarzanie filmów offline, animacje przejść i tryb ciemny.

Dodawanie skryptu service worker

Główną funkcją aplikacji PWA jest obsługa offline. W przypadku ZDF większość zadań wykonuje się przez Workbox, zbiór bibliotek i modułów węzłów, które ułatwiają obsługę różnych strategii buforowania. ZDF PWA korzysta z biblioteki TypeScript i React, dzięki czemu korzysta z biblioteki Workbox jest już wbudowane w create-react-app, wstępnie buforować zasoby statyczne. Dzięki temu aplikacja może skupić się na tworzeniu dostępnych offline, w tym przypadku filmów i ich metadanych.

Podstawowy pomysł jest dość prosty: pobierz film i zapisz go jako obiekt blob IndexedDB. Podczas odtwarzania nasłuchuj zdarzeń online/offline i przełącz pobranej wersji, gdy urządzenie przejdzie w tryb offline.

Niestety wszystko okazało się nieco bardziej skomplikowane. Jeden z projektów wymagał użycia oficjalnego odtwarzacza internetowego ZDF, który nie zawiera i obsługuje tryb offline. Odtwarzacz pobiera identyfikator treści jako dane wejściowe, komunikuje się z interfejsem ZDF API, i odtworzy powiązany film.

Dlatego z pomocą przychodzi jedna z najskuteczniejszych funkcji internetu: skrypty service worker.

Skrypt service worker może przechwytywać różne żądania wysyłane przez odtwarzacz w odpowiedzi, korzystając z danych z IndexedDB. Dzięki temu w przejrzysty sposób bez konieczności zmiany ani jednego wiersza kodu odtwarzacza.

Filmy offline są zwykle dość duże, więc trzeba się zastanowić, ile z nich można zapisać na urządzeniu. Skorzystaj z narzędzia StorageManager API, które aplikacja może oszacować i informować użytkownika, gdy brakuje miejsca, jeszcze rozpoczynam pobieranie. Safari nie ma na liście przeglądarek. i wdrożyliśmy ten interfejs API, ale w momencie pisania nie było zbyt wielu (informacje na temat sposobu stosowania limitów przez inne przeglądarki). Dlatego zespół przygotował małym narzędziem do testowania działania różnych urządzeniach. Obecnie kompleksowy w artykule, który podsumowuje .

Dodawanie niestandardowego promptu instalacji

ZDF PWA oferuje niestandardowy proces instalacji w aplikacji i zachęca użytkowników do instaluje aplikację, gdy tylko zechcą pobrać swój pierwszy film. To jest to dobry moment na wysłanie prośby o instalację, ponieważ użytkownik wyraził jasny zamiar korzystać z aplikacji w trybie offline.

Niestandardowa prośba o instalację uruchamiana podczas pobierania filmu do odtwarzania offline.

Tworzenie strony offline umożliwiającej dostęp do pobranych plików

Gdy urządzenie nie jest połączone z internetem, a użytkownik przechodzi do niedostępna w trybie offline, wyświetlana jest specjalna strona zawiera listę wszystkich filmów, które zostały wcześniej pobrane. już pobrane) krótki opis funkcji trybu offline.

Strona offline zawierająca wszystkie treści dostępne do oglądania offline.

Korzystanie z częstotliwości wczytywania klatek na potrzeby funkcji adaptacyjnych

Aby zapewnić użytkownikom lepsze wrażenia, aplikacja PWA ZDF zawiera subtelne przejścia. Ma miejsce, gdy użytkownik przewija stronę lub porusza się. Na słabszych urządzeniach, takich jak mają zazwyczaj odwrotny skutek i powodują, że aplikacja jest powolna. mniej elastycznie działa, jeśli nie działa z prędkością 60 klatek na sekundę. Aby wziąć to pod uwagę aplikacji mierzy rzeczywistą liczbę klatek na sekundę w trybie requestAnimationFrame(), aplikacja wczytuje się i wyłącza wszystkie animacje, gdy wartość spadnie poniżej pewnych wartości progowych.

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();
});

Nawet jeśli ten pomiar daje tylko przybliżone informacje o i zmienia się przy każdym obciążeniu, więc nadal stanowił dobrą podstawę procesu decyzyjnego. Warto wspomnieć, że w zależności od przypadku użycia inne techniki wczytywania adaptacyjnego które programiści mogą wdrożyć. Ogromną zaletą tego podejścia jest to, jest dostępna na wszystkich platformach.

Tryb ciemny

Popularną funkcją we współczesnych rozwiązaniach mobilnych jest trybie ciemnym. Zwłaszcza, gdy wiele osób chce oglądać filmy przy słabym, słabym oświetleniu, korzystając z przyciemnionego interfejsu. PWA ZDF to nie tylko przełącznik, który pozwala użytkownikom przełączać się między oświetleniem a oświetleniem motyw ciemny, dostosowuje się też do zmian preferencji kolorów w całym systemie operacyjnym. W ten sposób aplikacja automatycznie zmieni wygląd na urządzeniach, na których skonfigurowano według harmonogramu zmiany motywu graficznego do pory dnia.

Wyniki

Nowa progresywna aplikacja internetowa została udostępniona w marcu 2020 r. jako publiczna wersja beta i od tamtej pory otrzymał wiele pozytywnych opinii. Chociaż faza beta ale PWA wciąż działa w swojej tymczasowej domenie. Mimo że Aplikacja PWA nie była promowana publicznie, a jej liczba stale rośnie. Wiele pochodzi z Microsoft Store, który umożliwia użytkownikom systemu Windows 10 aplikacje PWA i instalują je jako aplikacje działające na określonej platformie.

Co dalej?

ZDF planuje dodać do swojej aplikacji PWA nowe funkcje, w tym możliwość logowania się personalizacja, wyświetlanie na różnych urządzeniach i platformach oraz powiadomienia push.