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.
Gdy nadawca ZDF rozważał przeprojektowanie swojego stosu technologicznego frontendu, postanowił przyjrzeć się bliżej progresywnym aplikacjom internetowym w swojej witrynie do odtwarzania strumieniowego ZDFmediathek. Agencja deweloperska komórkowa podjęła wyzwanie polegające na stworzeniu internetowego interfejsu użytkownika, który byłby zgodny z aplikacjami na iOS i Androida na danej platformie firmy ZDF. Progresywna aplikacja internetowa umożliwia instalację, odtwarzanie filmów offline, animacje przejść i tryb ciemny.
Dodawanie skryptu service worker
Kluczową funkcją PWA jest obsługa offline. W przypadku ZDF większość zadań jest wykonywana przez Workbox, czyli zestaw bibliotek i modułów węzłów, które ułatwiają obsługę różnych strategii buforowania. Aplikacja ZDF PWA została stworzona przy użyciu języka TypeScript i React, dlatego korzysta z biblioteki Workbox wbudowanej w aplikację create-react-app w celu przechowywania zasobów statycznych w pamięci podręcznej. Dzięki temu aplikacja może skupić się na udostępnianiu treści dynamicznych w trybie offline – w tym przypadku filmów i ich metadanych.
Podstawowy założenie jest dość proste: pobrać film i zapisać go jako obiekt blob w IndexedDB. Następnie w trakcie odtwarzania nasłuchuj zdarzeń online/offline i przełączaj się na pobraną wersję, gdy urządzenie utraci połączenie z internetem.
Okazało się jednak, że cała sprawa jest nieco bardziej złożona. Jednym z wymagań projektu było użycie oficjalnego odtwarzacza internetowego ZDF, który nie obsługuje żadnych działań w trybie offline. Odtwarzacz przyjmuje jako dane wejściowe identyfikator treści, komunikuje się z interfejsem ZDF API i odtwarza powiązany film.
W takiej sytuacji ratuje się jedną z najskuteczniejszych funkcji internetu: skrypty service worker.
Skrypt service worker może przechwytywać różne żądania wysyłane przez odtwarzacz i udzielać odpowiedzi, korzystając z danych z IndexedDB. W przejrzysty sposób zwiększa to możliwości offline bez konieczności zmiany ani jednego wiersza kodu odtwarzacza.
Ponieważ filmy offline są zwykle dość duże, zastanawiam się, ile z nich można tak naprawdę zapisać na urządzeniu. Za pomocą interfejsu StorageManager API aplikacja może oszacować dostępne miejsce i informować użytkownika o braku miejsca jeszcze przed rozpoczęciem pobierania. przeglądarki Safari nie ma na liście przeglądarek, które stosują ten interfejs API. W momencie tworzenia tego interfejsu nie mogliśmy znaleźć aktualnych informacji o tym, jak inne przeglądarki stosowały limity. Dlatego zespół opracował niewielkie narzędzie do testowania działania na różnych urządzeniach. W tej chwili dostępny jest obszerny artykuł, który zawiera wszystkie szczegóły.
Dodawanie niestandardowej prośby o instalację
PWA ZDF udostępnia niestandardowy proces instalacji w aplikacji i zachęca użytkowników do zainstalowania aplikacji zaraz po pobraniu pierwszego filmu. To dobry moment, aby poprosić o instalację, ponieważ użytkownik wyraził wyraźny zamiar korzystania z aplikacji w trybie offline.
Tworzenie strony offline z dostępem do pobranych plików
Gdy urządzenie nie jest połączone z internetem, a użytkownik przechodzi na stronę, która nie jest dostępna w trybie offline, wyświetla się specjalna strona z listą wszystkich wcześniej pobranych filmów lub krótkim objaśnieniem (jeśli nie pobrano jeszcze żadnych treści).
Korzystanie z częstotliwości wczytywania klatek na potrzeby funkcji adaptacyjnych
Aby zapewnić użytkownikom wygodę, progresywna aplikacja internetowa ZDF zawiera kilka subtelnych przejść, które są wykonywane, gdy użytkownik przewija stronę lub się na niej porusza. Na słabszych urządzeniach takie animacje mają zwykle odwrotny skutek i sprawiają, że aplikacja działa wolno i słabo, jeśli nie uruchamia się z szybkością 60 klatek na sekundę. W tym celu aplikacja mierzy faktyczną liczbę klatek za pomocą requestAnimationFrame() podczas wczytywania i wyłącza wszystkie animacje, gdy wartość spadnie poniżej określonego progu.
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 pomiar ten dostarcza tylko przybliżoną wydajność urządzenia i zmienia się przy każdym obciążeniu, nadal był dobrą podstawą do podjęcia decyzji. Warto wspomnieć, że w zależności od przypadku użycia są dostępne inne techniki wczytywania adaptacyjnego, które deweloperzy mogą wdrożyć. Ogromną zaletą tego podejścia jest dostępność na wszystkich platformach.
Tryb ciemny
Popularną funkcją na nowoczesnych urządzeniach mobilnych jest tryb ciemny. Wiele osób woli przyciemniony interfejs, szczególnie przy słabym oświetleniu. PWA ZDF to nie tylko przełącznik, który pozwala użytkownikom przełączać się między jasnym i ciemnym motywem, lecz także reaguje na zmiany preferencji kolorów w całym systemie operacyjnym. Dzięki temu aplikacja automatycznie zmieni wygląd na urządzeniach, na których skonfigurowano harmonogram zmiany motywu w zależności od pory dnia.
Wyniki
Nowa progresywna aplikacja internetowa została opublikowana w marcu 2020 r. jako publiczna wersja beta i od tego czasu otrzymała wiele pozytywnych opinii. Chociaż faza beta jest kontynuowana, PWA będzie nadal działać we własnej domenie tymczasowej. Mimo że PWA nie była promowana publicznie, liczba użytkowników stale rośnie. Wiele z nich pochodzi ze sklepu Microsoft Store, który pozwala użytkownikom systemu Windows 10 odkrywać aplikacje PWA i instalować je jak aplikacje właściwe dla danej platformy.
Co dalej?
ZDF planuje dalej dodawać do swoich aplikacji PWA takie jak logowanie w celu personalizacji, wyświetlanie na różnych urządzeniach i platformach oraz powiadomienia push.