Dowiedz się, jak ZDF stworzył 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 front-endowego zestawu technologii, postanowił przyjrzeć się bliżej progresywnym aplikacjom internetowym na potrzeby swojej witryny do streamingu ZDFmediathek. Agencja programistyczna Cellular podjęła się wyzwania polegającego na stworzeniu aplikacji internetowej na miarę aplikacji ZDF na iOS i Androida. PWA umożliwia instalację, odtwarzanie filmów offline, animacje przejścia i tryb ciemny.
Dodawanie service workera
Kluczową funkcją aplikacji PWA jest obsługa offline. W przypadku ZDF większość pracy wykonuje Workbox, czyli zestaw bibliotek i modułów Node, które ułatwiają obsługę różnych strategii buforowania. ZDF PWA korzysta z narzędzi TypeScript i React, dlatego do wstępnego zapisywania zasobów statycznych w pamięci podręcznej używa biblioteki Workbox wbudowanej w create-react-app. Dzięki temu aplikacja może skupić się na udostępnianiu dynamicznych treści offline, w tym przypadku filmów i ich metadanych.
Podstawowy pomysł jest dość prosty: pobierz film i przechowuj go jako blob w IndexedDB. Następnie podczas odtwarzania sprawdzaj zdarzenia online/offline i przełącz się na wersję pobraną, gdy urządzenie przejdzie w tryb offline.
Niestety okazało się, że sprawa jest nieco bardziej skomplikowana. Jednym z wymagań projektu było użycie oficjalnego odtwarzacza internetowego ZDF, który nie zapewnia żadnego wsparcia offline. Odtwarzacz otrzymuje identyfikator treści jako dane wejściowe, komunikuje się z interfejsem ZDF API i odtwarza powiązany film.
W takich sytuacjach z pomocą przychodzi jedna z najskuteczniejszych funkcji internetu: service worker.
Usługa może przechwytywać różne żądania wysyłane przez odtwarzacz i odpowiadać na nie przy użyciu danych z IndexedDB. Pozwala to w przejrzysty sposób dodać możliwość odtwarzania offline bez konieczności zmiany ani jednego wiersza kodu odtwarzacza.
Ponieważ filmy offline są zwykle dość duże, pojawia się pytanie, ile z nich można zapisać na urządzeniu. Dzięki interfejsowi StorageManager API aplikacja może oszacować ilość dostępnego miejsca i poinformować użytkownika o braku miejsca jeszcze przed rozpoczęciem pobierania. Safari nie znajduje się na liście przeglądarek, które implementują to API, a w momencie pisania tego artykułu nie było zbyt wielu aktualnych informacji o tym, jak inne przeglądarki stosują limity. Dlatego zespół opracował małe narzędzie do testowania działania na różnych urządzeniach. Obecnie istnieje szczegółowy artykuł, który zawiera wszystkie szczegóły.
Dodawanie niestandardowego prompta instalacji
PWA ZDF oferuje niestandardowy proces instalacji w aplikacji i prosi użytkowników o zainstalowanie aplikacji, gdy tylko chcą pobrać pierwszy film. To dobry moment na poproszenie o instalację, ponieważ użytkownik wyraźnie wyraził zamiar korzystania z aplikacji 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 na stronę niedostępną w trybie offline, zamiast niej wyświetla się specjalna strona z listą wszystkich filmów, które zostały wcześniej pobrane, lub (jeśli żadne treści nie zostały jeszcze pobrane) krótkie wyjaśnienie funkcji offline.
Korzystanie z szybkości wczytywania klatek w przypadku funkcji dostosowywania
Aby zapewnić użytkownikom bogate wrażenia, PWA w trybie ZDF zawiera subtelne przejścia, które występują podczas przewijania lub nawigacji przez użytkownika. Na słabszych urządzeniach animacje zwykle mają odwrotny skutek i spowodują, że aplikacja działa wolniej i mniej responsywnie, jeśli nie wyświetla 60 klatek na sekundę. Aby to uwzględnić, aplikacja mierzy rzeczywistą liczbę klatek na podstawie parametru requestAnimationFrame()
, gdy się ładuje 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 ten pomiar dostarcza tylko przybliżone informacje o wydajności urządzenia i różni się w zależności od obciążenia, nadal był dobrym podstawą do podejmowania decyzji. Warto pamiętać, że w zależności od przypadku użycia deweloperzy mogą stosować inne techniki adaptacyjnego wczytywania. Jedną z zalet tego podejścia jest to, że jest ono dostępne na wszystkich platformach.
Tryb ciemny
Popularną funkcją w przypadku nowoczesnych urządzeń mobilnych jest tryb ciemny. Wiele osób woli ciemniejsze interfejsy, zwłaszcza podczas oglądania filmów w słabo oświetlonym otoczeniu. ZDF PWA nie tylko zawiera przełącznik, który pozwala użytkownikom przełączać się między jasnym i ciemnym motywem, ale również reaguje na zmiany preferencji kolorów w całym systemie operacyjnym. Dzięki temu aplikacja będzie automatycznie zmieniać wygląd na urządzeniach, na których skonfigurowano harmonogram zmiany motywu według pory dnia.
Wyniki
Nowa progresywna aplikacja internetowa została w marcu 2020 r. wprowadzona w wersji publicznej w ramach testów beta i od tego czasu zebrała wiele pozytywnych opinii. Podczas trwania fazy beta PWA nadal działa w ramach własnej tymczasowej domeny. Mimo że PWA nie była publicznie promowana, liczba użytkowników stale rośnie. Wiele z nich pochodzi ze sklepu Microsoft Store, który umożliwia użytkownikom systemu Windows 10 znajdowanie PWA i instalowanie ich jak aplikacji platformowych.
Co dalej?
ZDF planuje nadal dodawać do swojej aplikacji PWA nowe funkcje, w tym logowanie się w celu personalizacji, wyświetlanie na różnych urządzeniach i platformach oraz powiadomienia push.