Buforowanie

Pamięć podręczna to potężne narzędzie. Sprawia, że aplikacje są mniej zależne od warunków sieciowych. Wykorzystując pamięci podręczne, możesz udostępnić swoją aplikację internetową w trybie offline i wyświetlać zasoby tak szybko, jak to możliwe, niezależnie od warunków sieciowych. Jak 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 aplikacji PWA).
• Skrypt service worker.
• Inne używane przez Ciebie instancje robocze.

Jedną z zalet zarządzania pamięcią podręczną za pomocą mechanizmów Service Worker jest to, że ich cykl życia nie jest powiązany z oknem, co oznacza, że nie blokujesz wątku głównego. Pamiętaj, że aby można było korzystać z interfejsu Cache Storage API, większość tych kontekstów musi być połączona z połączeniami TLS.

Co ma być buforowane

Pierwsze pytanie dotyczące buforowania dotyczy tego, co należy przechowywać w pamięci podręcznej. Nie ma jednej odpowiedzi na to pytanie, ale możesz zacząć od jak najmniejszych zasobów potrzebnych do renderowania interfejsu.

Zasoby te powinny obejmować:

• Kod HTML strony głównej (adres URL start_aplikacji).
• Arkusze stylów CSS są potrzebne 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.
• Czcionki internetowe.
• W aplikacji wielostronicowej inne dokumenty HTML, które mają być szybko udostępniane lub w trybie offline.

Możliwość korzystania z trybu offline

Obsługa trybu offline jest jednym z wymagań w przypadku progresywnej aplikacji internetowej. Warto jednak pamiętać, że nie każda aplikacja PWA wymaga pełnego działania offline. Dotyczy to np. rozwiązań do grania w chmurze lub aplikacji z kryptozasobami. Warto więc udostępnić podstawowy interfejs, który będzie pomocny w takich sytuacjach.

Twoja aplikacja PWA nie powinna renderować komunikatu o błędzie przeglądarki z informacją, że mechanizm renderowania internetowego nie może wczytać strony. Zamiast tego użyj skryptu service worker, aby wyświetlać własne komunikaty, unikając ogólnego i niezrozumiałego błędu przeglądarki.

Istnieje wiele różnych strategii buforowania, których możesz użyć w zależności od potrzeb PWA. Dlatego tak ważne jest tak zaprojektowanie wykorzystania pamięci podręcznej, by zapewnić szybkie i niezawodne działanie. Jeśli na przykład wszystkie komponenty z linkiem do aplikacji szybko się pobierają, nie zajmują dużo miejsca i nie trzeba aktualizować ich w każdym żądaniu, prawidłową strategią będzie buforowanie wszystkich zasobów. Jeśli z drugiej strony masz zasoby, które wymagają najnowszej wersji, możesz w ogóle ich nie zapisywać w pamięci podręcznej.

Korzystanie z interfejsu API

Użyj interfejsu Cache Storage API, aby zdefiniować zbiór pamięci podręcznych w punkcie początkowym. Każda z nich ma swoją nazwę w postaci ciągu, którą możesz zdefiniować. Uzyskaj dostęp do interfejsu API za pomocą obiektu caches, a metoda open umożliwia utworzenie lub otwarcie już utworzonej pamięci podręcznej. Metoda otwarta zwraca obietnicę 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 przechowanie 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ę opartą na 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ść. Dlatego możesz pobrać go później, używając żądania HTTP lub adresu URL jako klucza. Instrukcje, jak to zrobić, znajdziesz w rozdziale Obsługa.

Kiedy zapisywać w pamięci podręcznej

W przypadku PWA to Ty decydujesz, kiedy pliki mają być buforowane. Choć jednym z rozwiązań jest przechowywanie jak największej liczby zasobów podczas instalacji mechanizmu Service Worker, zwykle nie jest to najlepszy pomysł. Buforowanie niepotrzebnych zasobów zmniejsza przepustowość i miejsce na dane, przez co aplikacja może wyświetlać niezamierzone zasoby nieaktualne.

Nie musisz umieszczać w pamięci podręcznej wszystkich zasobów jednocześnie. Zasoby możesz zapisywać w pamięci podręcznej wiele razy w trakcie cyklu życia aplikacji PWA, na przykład:

• Po zainstalowaniu skryptu service worker.
• Po pierwszym wczytaniu strony.
• Gdy użytkownik przechodzi do danego odcinka lub trasy.
• Gdy sieć jest nieaktywna.

Możesz poprosić o buforowanie nowych plików w wątku głównym lub w kontekście skryptu service worker.

Buforowanie zasobów w mechanizmie Service Worker

Jednym z najczęstszych sytuacji jest przechowywanie w pamięci podręcznej minimalnego zestawu zasobów, gdy jest zainstalowany mechanizm Service Worker. Aby to zrobić, możesz użyć interfejsu pamięci podręcznej w zdarzeniu install skryptu 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. Zwiększy to szanse na przechowywanie wszystkich zasobów i utrzymanie spójności aplikacji. Poniższy przykład pokazuje, jak to zrobić przy użyciu metody waitUntil argumentu zdarzenia otrzymanego w detektorze zdarzeń 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 zadanie w ramach obietnicy (wykonane lub nieudane) przed zakończeniem procesu skryptu service worker. Może być konieczne łączenie obietnic i zwracanie wywołań add() lub addAll(), aby pojedynczy wynik dotarł do metody waitUntil().

Możesz też obsługiwać obietnice przy użyciu składni asynchronicznej/oczekującej. W takim przypadku musisz utworzyć funkcję asynchroniczną, która może wywołać funkcję await i zwrócić obietnicę do funkcji waitUntil() po jej wywołaniu, 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 z wielu domen i nieprzezroczyste odpowiedzi

Twoja aplikacja PWA może pobierać zasoby z Twojego punktu początkowego i w wielu domenach oraz zapisywać je w pamięci podręcznej, np. treści z zewnętrznych sieci CDN. W przypadku aplikacji międzydomenowych interakcja z pamięcią podręczną jest bardzo podobna do żądań z tej samej domeny. Żądanie jest wykonywane, a kopia odpowiedzi jest zapisywana w pamięci podręcznej. Tak jak w przypadku innych zasobów zapisanych w pamięci podręcznej, można go używać tylko w pierwotnej wersji aplikacji.

Zasób zostanie zapisany jako nieprzejrzysta odpowiedź, co oznacza, że Twój kod nie będzie mógł zobaczyć ani zmodyfikować treści czy nagłówków tej odpowiedzi. Poza tym nieprzezroczyste odpowiedzi nie ujawniają swojego rzeczywistego rozmiaru w interfejsie Storage API, co ma wpływ na limity. Niektóre przeglądarki udostępniają bardzo duże rozmiary, np. 7 MB, niezależnie od tego, czy plik ma tylko 1 KB.

Aktualizowanie i usuwanie zasobów

Możesz aktualizować zasoby 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 Aplikacja w Narzędziach deweloperskich. Zobaczysz tam zawartość każdej pamięci podręcznej w bieżącym punkcie początkowym. Więcej informacji o tych narzędziach znajdziesz w rozdziale o narzędziach i debugowaniu.

Zasoby

• Pamięć podręczna w MDN
• Interfejs Cache API: krótki przewodnik
• Książka kucharska offline