Pamięć podręczna jest potężnym narzędziem. Dzięki temu aplikacje są w mniejszym stopniu zależne od warunków sieciowych. Dobre wykorzystanie pamięci podręcznych pozwala udostępnić aplikację internetową offline i wyświetlać zasoby tak szybko, jak to możliwe w każdej sieci. Jak już wspomnieliśmy w sekcji Zasoby i dane, możesz wybrać najlepszą strategię buforowania niezbędnych zasobów. Aby zarządzać pamięcią podręczną, skrypt service worker współpracuje z interfejsem Cache Storage API.
Interfejs Cache Storage API jest dostępny w różnych kontekstach:
- Kontekst okna (główny wątek PWA).
- Skrypt service worker.
- inne używane instancje robocze,
Jedną z zalet zarządzania pamięcią podręczną za pomocą mechanizmów Service Worker jest to, że jej cykl życia nie jest powiązany z oknem, co oznacza, że nie blokujesz wątku głównego. Pamiętaj, że aby korzystać z interfejsu Cache Storage API, większość tych kontekstów musi być dostępna w połączeniu TLS.
Co zapisywać w pamięci podręcznej
Pierwsze pytanie dotyczące buforowania dotyczy tego, co zapisywać w pamięci podręcznej. Nie ma jednej odpowiedzi na to pytanie, ale możesz zacząć od wszystkich niezbędnych zasobów do wyrenderowania interfejsu.
Zasoby te powinny obejmować:
- Kod HTML strony głównej (adres URL start_url aplikacji).
- arkuszy stylów CSS wymaganych w głównym interfejsie użytkownika.
- Obrazy używane w interfejsie.
- Pliki JavaScript wymagane do renderowania interfejsu użytkownika.
- Dane, takie jak plik JSON, są wymagane do renderowania podstawowego interfejsu.
- Czcionki internetowe
- w aplikacji wielostronicowej inne dokumenty HTML, które chcesz wyświetlać szybko lub w trybie offline;
Tryb offline
Możliwość pracy w trybie offline jest jednym z wymagań progresywnej aplikacji internetowej, ale trzeba pamiętać, że nie każda aplikacja PWA musi mieć pełną funkcjonalność offline, np. gry w chmurze lub aplikacje oferujące kryptozasoby. Dlatego można udostępniać podstawowy interfejs, który poprowadzi użytkowników przez te sytuacje.
PWA nie powinna wyświetlać komunikatu o błędzie przeglądarki informujący o tym, że mechanizm renderowania stron internetowych nie mógł wczytać strony. Zamiast tego używaj skryptu service worker, aby pokazywać własne komunikaty, unikając ogólnego i dezorientującego błędu przeglądarki.
Istnieje wiele różnych strategii buforowania, których możesz użyć w zależności od potrzeb Twojej aplikacji PWA. Dlatego tak ważne jest zaprojektowanie wykorzystania pamięci podręcznej w taki sposób, by działała szybko i niezawodnie. Jeśli na przykład wszystkie komponenty z linkiem do aplikacji pobierają się szybko, nie zajmują dużo miejsca i nie trzeba ich aktualizować za każdym razem, dobrym rozwiązaniem będzie zapisywanie ich w pamięci podręcznej. Jeśli jednak masz zasoby, które wymagają najnowszej wersji, być może warto zrezygnować z buforowania tych zasobów w pamięci podręcznej.
Korzystanie z interfejsu API
Użyj interfejsu Cache Storage API do zdefiniowania zestawu pamięci podręcznych w źródle, z których każda będzie identyfikowana przez możliwy do określenia ciąg znaków. Uzyskaj dostęp do interfejsu API za pomocą obiektu caches, a metoda open umożliwia tworzenie lub otwieranie wcześniej utworzonej pamięci podręcznej. Metoda open zwraca obietnicę dla obiektu pamięci podręcznej.
caches.open("pwa-assets")
.then(cache => {
// you can download and store, delete or update resources with cache arguments
});
Pobieranie i przechowywanie zasobów
Aby poprosić przeglądarkę o pobranie i zapisanie zasobów, użyj metody add lub addAll. Metoda add wysyła żądanie i zapisuje 1 odpowiedź HTTP, a addAll – grupę odpowiedzi HTTP jako transakcję na podstawie tablicy żądań lub adresów URL.
caches.open("pwa-assets")
.then(cache => {
cache.add("styles.css"); // it stores only one resource
cache.addAll(["styles.css", "app.js"]); // it stores two resources
});
Interfejs pamięci podręcznej przechowuje całą odpowiedź, w tym wszystkie nagłówki i treść. W związku z tym możesz go później pobrać, używając żądania HTTP lub adresu URL jako klucza. Instrukcję, jak to zrobić, znajdziesz w sekcji dotyczącej udostępniania.
Kiedy zapisywać w pamięci podręcznej
W PWA to Ty decydujesz, kiedy chcesz zapisywać pliki w pamięci podręcznej. Przechowywanie jak największej liczby zasobów, gdy zainstalowany jest skrypt service worker, nie jest jednak najlepszym pomysłem. Buforowanie niepotrzebnych zasobów odciąża przepustowość i miejsce na dane, przez co aplikacja może udostępniać niezamierzone nieaktualne zasoby.
Nie musisz zapisywać wszystkich zasobów w pamięci podręcznej naraz. Możesz je zapisywać w pamięci podręcznej wiele razy w trakcie cyklu życia aplikacji PWA, na przykład:
- Podczas instalacji skryptu service worker.
- Po pierwszym wczytaniu strony.
- Gdy użytkownik przechodzi do sekcji lub trasy.
- Gdy sieć jest bezczynna.
Możesz poprosić o buforowanie nowych plików w wątku głównym lub w kontekście skryptu service worker.
Buforowanie zasobów w skryptach service worker
Jednym z najczęstszych scenariuszy jest zapisywanie w pamięci podręcznej minimalnego zestawu zasobów, gdy zainstalowany jest skrypt service worker. Aby to zrobić, możesz skorzystać z interfejsu pamięci podręcznej w zdarzeniu install w skrypcie service worker.
Wątek skryptu service worker można zatrzymać w dowolnym momencie, dlatego możesz poprosić przeglądarkę o zaczekanie na zakończenie obietnicy addAll, co zwiększy szanse na zapisanie wszystkich zasobów i utrzymanie spójności aplikacji. Poniższy przykład pokazuje, jak to zrobić przy użyciu metody waitUntil dla argumentu zdarzenia odebranego przez detektor zdarzeń skryptu service worker.
const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
event.waitUntil(
caches.open("pwa-assets")
.then(cache => {
return cache.addAll(urlsToCache);
});
);
});
Metoda waitUntil() otrzymuje obietnicę i prosi przeglądarkę o zaczekanie na zakończenie zadania w ramach obietnicy (spełnienie lub niepowodzenie) przed zakończeniem procesu skryptu service worker. Może być konieczne łączenie obietnic w łańcuch i zwracanie wywołań add() lub addAll(), aby pojedynczy wynik dotarł do metody waitUntil().
Możesz też obsługiwać obietnice za pomocą składni asynchronicznej/await. W takim przypadku musisz utworzyć funkcję asynchroniczną, która może wywołać funkcję await i po jej wywołaniu zwraca obietnicę do waitUntil(), jak w tym przykładzie:
const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
let cacheUrls = async () => {
const cache = await caches.open("pwa-assets");
return cache.addAll(urlsToCache);
};
event.waitUntil(cacheUrls());
});
Żądania między domenami i nieprzejrzyste odpowiedzi
PWA może pobierać i zapisywać w pamięci podręcznej zasoby ze źródła i z wielu domen, na przykład treści z zewnętrznych sieci CDN. W przypadku aplikacji w wielu domenach interakcja z pamięcią podręczną jest bardzo podobna do żądań z tej samej domeny. Żądanie jest wykonywane, a kopia odpowiedzi jest przechowywana w pamięci podręcznej. Podobnie jak w przypadku innych zasobów z pamięci podręcznej można go używać tylko w źródle aplikacji.
Zasób będzie przechowywany jako nieprzejrzysta odpowiedź, co oznacza, że kod nie będzie widzieć ani modyfikować treści ani nagłówków takiej odpowiedzi. Poza tym nieprzejrzyste odpowiedzi nie pokazują swojego rzeczywistego rozmiaru w interfejsie Storage API, co wpływa na limity. Niektóre przeglądarki obsługują duże rozmiary, np. 7 MB, niezależnie od tego, czy rozmiar pliku wynosi tylko 1 KB.
Aktualizowanie i usuwanie zasobów
Zasoby możesz aktualizować za pomocą narzędzia cache.put(request, response), a usuwać za pomocą narzędzia delete(request).
Więcej informacji znajdziesz w dokumentacji obiektów pamięci podręcznej.
Debugowanie pamięci podręcznej
Wiele przeglądarek umożliwia debugowanie zawartości pamięci podręcznej na karcie aplikacji Narzędzi deweloperskich. Możesz tam zobaczyć zawartość każdej pamięci podręcznej w bieżącym źródle. Więcej o tych narzędziach dowiesz się w rozdziale na temat narzędzi i debugowania.
