Zasoby i dane

Progresywna aplikacja internetowa to strona internetowa. Wszystkie jej zasoby są takie same jak w internecie. Zawierają jednak nowe narzędzia, które umożliwiają szybkie wczytywanie zasobów online i korzystanie z nich w trybie offline.

Komponenty aplikacji

Programowanie aplikacji obejmuje zwykle wiele zasobów i zasobów, od logiki i kodu (skompilowanego lub nie) po elementy interfejsu, takie jak projekty ekranów, obrazy, logo i czcionki.

Progresywna aplikacja internetowa to strona internetowa, więc wszystkie jej zasoby są takie same jak w internecie.

Kod HTML na potrzeby treści i renderowania strony początkowej.
JavaScript służący do obsługi logiki, w tym możliwość uruchamiania modułów WebAssembly (skompilowanego kodu) oraz renderowania grafiki 2D i 3D zoptymalizowanej pod kątem sprzętu.
CSS – układ, styl i animacje.
obrazy w formatach internetowych, np. PNG, JPEG, WebP lub SVG;
filmy w formatach internetowych, takich jak MPEG-4 lub WebM;
Czcionki internetowe
Dane w formacie JSON lub w innym formacie.

Domyślnie witryny pobierają zasoby przez sieć zaczynając od kodu HTML, a następnie do pozostałych zasobów.

Zarządzanie tymi zasobami w taki sposób, aby szybko się wczytywały i były dostępne offline, było wyzwaniem dla internetu. Obecnie aplikacje PWA wykorzystują możliwości, które wcześniej były powiązane tylko z aplikacjami na danej platformie.

Aplikacje na konkretnej platformie a PWA

Gdy instalujesz aplikację na konkretną platformę, zwykle pobierasz pakiet zawierający wszystkie zasoby aplikacji: kod, obrazy, czcionki, filmy itd. Dzięki temu wszystkie te zasoby są dostępne w pamięci urządzenia, nawet gdy aplikacja jest offline.

Natomiast klasyczna witryna wymaga połączenia sieciowego, aby w razie potrzeby pobrać zasoby. W trybie offline w przeglądarce pojawi się komunikat o błędzie z powodu braku zasobów po stronie klienta.

Takie podejście rozszerza tradycyjne funkcje internetowe, udostępniając niektóre lub wszystkie zasoby po stronie klienta, tak jak w przypadku aplikacji na danej platformie. Dlatego po otwarciu aplikacji PWA wstępne renderowanie może odbywać się tak samo szybko jak aplikacja platformy, ponieważ zasoby są dostępne bez połączenia z siecią.

Pamięć podręczna i miejsce na dane

Od momentu pojawienia się internetu deweloperzy nie mają pełnej kontroli nad sposobem przechowywania zasobów w pamięci podręcznej. Przeglądarka odpowiada za pamięć podręczną HTTP i może, ale nie musi, zapisywać w pamięci podręcznej i udostępniać zasoby na podstawie różnych zasad. Inne opcje przechowywania danych, takie jak Web Storage i IndexedDB, miały na celu zapisywanie prostych danych i obiektów.

PWA nie muszą polegać wyłącznie na tych zasadach w przypadku treści. Mamy natomiast rozwiązania, które zapewniają lepszą kontrolę nad czasem i sposobem buforowania zasobów oraz czasu i sposobu ich dostarczania lokalnie: interfejs Cache Storage API. W internecie znajdziesz kilka rozwiązań do przechowywania danych po stronie klienta:

Miejsce na dane w internecie: obejmuje localStorage i sessionStorage. Te interfejsy API przechowują proste pary klucz-wartość w postaci ciągów znaków. Ilość miejsca na dane w internecie jest ograniczona i korzysta z synchronicznego interfejsu API, dlatego w miarę możliwości należy tego unikać.
IndexedDB: oparta na obiektach (No-SQL) baza danych z asynchronicznym interfejsem API, która jest przydatna w przypadku rozwiązań internetowych. Technologia IndexedDB może przechowywać uporządkowane i binarne dane po stronie klienta. Zwykle jest to sposób przechowywania danych, np. informacje uzyskane lub wysłane w postaci żądania do interfejsu API. Warto też od razu zapisać dane lokalnie, a potem zsynchronizować je z serwerem. Interfejs IndexedDB API jest używany do interakcji z bazą danych.
Pamięć podręczna: zbiór par żądań i odpowiedzi HTTP, które pozwalają przechowywać i pobierać zasoby (z ich nagłówkami HTTP) dokładnie w takiej postaci, w jakiej są dostarczane z serwera. Interfejs Cache Storage API umożliwia przechowywanie, pobieranie, aktualizowanie i usuwanie żądań sieciowych, na przykład dotyczących zasobów, nawet w trybie offline.

Skrypty service worker

PWA może przechowywać swoje zasoby w magazynach Cache Storage i IndexedDB, ale jak możemy ich użyć, aby użytkownicy mogli szybko i offline korzystać z aplikacji. Odpowiedź? Skrypty service worker.

Skrypt service worker pozwala wyświetlać zasoby bez łączenia się z siecią, wysyłać powiadomienia do użytkowników, dodawać plakietki do ikony PWA, aktualizować treści w tle, a nawet umożliwić działanie całej aplikacji PWA w trybie offline. Więcej informacji o skryptach service worker znajdziesz w następnym rozdziale.

Tryb offline

Użytkownicy oczekują, że Twoja aplikacja będzie szybko i zawsze gotowa do pracy. Oznacza to, że aplikacja powinna działać w trybie offline.

Gotowość do działania offline nie oznacza, że wszystkie treści lub usługi powinny być dostępne bez połączenia sieciowego. Jednak zapewnienie co najmniej podstawowych elementów działania, gdy użytkownik jest offline (np. wyświetlenie strony z prośbą o podłączenie się do internetu, żeby kontynuować), zwiększy wygodę korzystania z aplikacji i uniknie ogólnego błędu przeglądarki. W niektórych przeglądarkach jest to funkcja obowiązkowa, aby spełnić kryteria instalacji PWA. Lepiej będzie wyświetlać interfejs PWA razem z zawartością przechowywaną w pamięci podręcznej. Złotym standardem w przypadku pracy w trybie offline jest umożliwienie użytkownikom dalszego korzystania z całej aplikacji PWA i synchronizowanie zmian na serwerze po powrocie online.

Aby udostępnić aplikację offline, musisz zapisać w pamięci podręcznej zasoby niezbędne do korzystania z trybu offline i skonfigurować skrypt service worker później. Pamiętaj, aby dodać zasoby offline do pamięci podręcznej, zanim będą potrzebne. Chodzi o szczególną sytuację, w której nie można buforować ich, kiedy o to poprosi.

Często używane sposoby korzystania z pamięci podręcznej

W PWA to Ty odpowiadasz za wszystkie decyzje. W zależności od potrzeb możesz wybrać najlepszą metodę buforowania lub instalowania zasobów. Oto kilka kwestii, które należy podjąć:

Stosowanie w pamięci podręcznej: wybierz zasoby, które chcesz zainstalować przy pierwszym wczytaniu. Powinny one zawierać kod HTML i minimalną liczbę zasobów potrzebnych do wyrenderowania aplikacji. Korzystając z pamięci podręcznej, pamiętaj, że wykorzystujesz miejsce i sieć urządzenia. Zachowaj rozwagę i odpowiedzialność przy pobieraniu zasobów i ich buforowaniu.
Buforuj w razie potrzeby: służy do dodawania zasobów do pamięci podręcznej w razie potrzeby. Zwykle są to komponenty, które mogą zmieniać się niezależnie od wersji aplikacji, np. obrazy lub treści. Różne strategie buforowania w razie potrzeby znajdziesz w sekcji o pamięci podręcznej.
Interfejsy API i usługi internetowe: wywołania interfejsu API mogą być zapisywane w pamięci podręcznej lub zamiast buforować odpowiedzi interfejsu API w pamięci podręcznej, możesz przechowywać ich dane w IndexedDB.

Aktualizuję zasoby

W standardowym modelu dotyczącym aplikacji zainstalowanych z katalogu aplikacji deweloperzy publikują nowy pakiet, gdy muszą ją zaktualizować. Użytkownicy muszą ponownie pobrać cały pakiet, nawet jeśli większość zasobów się nie zmieniła. Korzystając z opisanych powyżej rozwiązań PWA, decydujesz, jak i kiedy aktualizować zasoby. Zasoby możesz aktualizować na różne sposoby:

Pełna aktualizacja: w tym przypadku przy każdej zmianie, nawet nieznacznej, kod pobierze wszystkie zasoby z pamięci podręcznej ponownie.
Częściowa aktualizacja: w ramach tego podejścia tworzysz metodę określania, które zasoby zostały zaktualizowane, i aktualizujesz tylko te zasoby, niezależnie od tego, czy użytkownik ingerował w ten proces.
Ciągła aktualizacja: dzięki tej metodzie zasoby będą automatycznie sprawdzane i aktualizowane przy każdym użyciu PWA z osobna.

Rozmiar i okres eksploatacji

Zwykle aplikacje przeznaczone na daną platformę nie mają limitów rozmiaru. Podczas instalacji aplikacje mogą mieć co najmniej gigabajtowy rozmiar. Instalacja będzie dozwolona, o ile urządzenie osiągnie taki limit. Dodatkowo aplikacja będzie używać tej łącznej ilości miejsca bez względu na to, czy jest używana. Miejsce na dane jest obsługiwane w inny sposób w przypadku PWA. Przeglądarka będzie przechowywać Twoje zasoby zgodnie z zasadami, które określisz w logice PWA.

Limity rozmiarów zależą od przeglądarki. Nie jest tak elastyczna jak w przypadku aplikacji na danej platformie, ale zwykle sprawdza się w większości aplikacji internetowych. Informacje o ograniczeniach w poszczególnych przeglądarkach znajdziesz w tym artykule.

Przeglądarki mogą usuwać zasoby zależnie od ilości miejsca na dane lub po kilku tygodniach braku aktywności, jeśli użytkownik korzysta z PWA w przeglądarce. Na niektórych platformach, jeśli użytkownik zainstaluje Twoją progresywną aplikację internetową, usunięcie aplikacji nie nastąpi. Tam, gdzie to możliwe, kod może zażądać trwałej pamięci masowej za pomocą interfejsu API, aby uniknąć trwałego usunięcia.