Informacje o limicie miejsca na dane

Wszystkie przeglądarki nakładają górny limit na ilość miejsca na dane wykorzystywanego przez źródło aplikacji. Możesz skonfigurować Workbox tak, aby automatycznie czyścił dane w pamięci podręcznej w czasie działania. Pozwoli to uniknąć przekroczenia limitu miejsca na dane, które mogłoby wpłynąć na wydajność buforowania i niezawodność Twojej witryny.

Jakie opcje konfiguracji są obsługiwane?

Podczas konfigurowania strategii dotyczącej tworzenia kopii zapasowych na czas działania możesz dodać instancję ExpirationPlugin z workbox-expiration skonfigurowaną z ustawieniami, które najlepiej pasują do typu zasobów, które są przechowywane w pamięci podręcznej.

Poniższa konfiguracja może być na przykład używana do buforowania obrazów w czasie działania, z jednoznacznymi limitami i z automatycznym usuwaniem po ich przekroczeniu:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  // Use a cache-first strategy with the following config:
  new CacheFirst({
    // You need to provide a cache name when using expiration.
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        // Keep at most 50 entries.
        maxEntries: 50,
        // Don't keep any entries for more than 30 days.
        maxAgeSeconds: 30 * 24 * 60 * 60,
        // Automatically cleanup if quota is exceeded.
        purgeOnQuotaError: true
      })
    ]
  })
);

Podczas korzystania z funkcji ExpirationPlugin musisz ustawić wartość maxEntries, maxAgeSeconds lub obie te wartości. purgeOnQuotaError jest opcjonalny.

maxEntries

Narzuca to górny limit liczby wpisów (tzn. unikalnych adresów URL) w danej pamięci podręcznej.

Zwykle warto to zrobić, chyba że wiesz, że istnieje tylko niewielka liczba możliwych adresów URL, które mogą być obsługiwane przez daną strategię.

maxAgeSeconds

Wpisy dodane do pamięci podręcznej przed upływem tej liczby sekund będą uważane za nieaktualne i automatycznie czyszczone przy następnym dostępie do pamięci podręcznej.

Nie jest to tak skuteczne rozwiązanie do zarządzania limitem miejsca na dane jak maxEntries, ponieważ pamięć podręczna może dowolnie się powiększać, o ile wszystkie wpisy zostały dodane w krótkim czasie. Jest to szczególnie przydatne, gdy wiesz, że chcesz narzucić górny limit świeżości, a zachowywanie starszych wpisów nie ma większego znaczenia dla Twojej aplikacji internetowej.

purgeOnQuotaError

Ta opcja pozwala oznaczyć daną pamięć podręczną jako bezpieczną do automatycznego usuwania w przypadku przekroczenia dostępnego miejsca na dane przez aplikację internetową.

Domyślna wartość to obecnie false. Pamięć podręczna w czasie wykonywania powinna być ogólnie odporna na usuwanie, dlatego ustawienie tej opcji na true jest dobrym rozwiązaniem. Pomaga to aplikacji internetowej automatycznie odzyskać stan, gdy napotyka ograniczenia pamięci.

Ile danych możesz przechowywać?

Każda przeglądarka ma własne limity miejsca na dane, więc nie ma jednej odpowiedzi. Dodatkowo niektóre przeglądarki mają limit dynamiczny, który zmienia się w zależności od ilości wolnego miejsca na danym urządzeniu, więc rzeczywisty górny limit może się zmienić bez powiadomienia.

Niektóre przeglądarki udostępniają interfejs do wysyłania zapytań o przybliżoną ilość miejsca na dane używanego przez źródło oraz jego górny limit (navigator.storage.estimate()). Więcej informacji o tym, jak korzystać z tego w swoich własnych aplikacjach internetowych, znajdziesz w artykule Szacowanie dostępnej ilości miejsca na dane.

Specjalne uwagi dotyczące trybu incognito w Chrome

Otwieranie aplikacji internetowej w trybie incognito w Chrome powoduje nałożenie specjalnego ograniczenia dotyczącego pamięci, które nie ma zastosowania w normalnych kontekstach przeglądania. Limit tej kwoty wynosi około 100 megabajtów, niezależnie od wolnego miejsca na urządzeniu.

Uważaj na niejasne odpowiedzi.

Częstym źródłem nieoczekiwanego wykorzystania limitu jest buforowanie nieprzezroczystych odpowiedzi, czyli odpowiedzi z innych domen na żądania wysłane bez włączonego CORS.

Z powodów bezpieczeństwa przeglądarki automatycznie zwiększają wpływ tych niejasnych odpowiedzi na limit. W Chrome nawet nieprzejrzysta odpowiedź o długości kilku kilobajtów będzie obciążać Twój limit około 7 megabajtów.

Po rozpoczęciu buforowania odpowiedzi nieprzezroczystych możesz szybko wykorzystać znacznie większą pulę limitu niż przewidujesz, dlatego najlepszym rozwiązaniem jest używanie ExpirationPlugin z maxEntries i opcjonalnie purgeOnQuotaError skonfigurowanych odpowiednio.