Wszystkie przeglądarki nakładają górny limit ilości miejsca na dane, z którego może korzystać źródło Twojej aplikacji internetowej. Możesz skonfigurować usługę Workbox tak, aby automatycznie czyściła dane przechowywane w pamięci podręcznej w czasie działania. Dzięki temu unikniesz ograniczeń związanych z limitem miejsca na dane, które mogłyby obniżyć efektywność buforowania i niezawodność witryny.
Jakie opcje konfiguracji są obsługiwane?
Podczas konfigurowania trasy i strategii buforowania w czasie działania aplikacji możesz dodać wystąpienie ExpirationPlugin z workbox-expiration skonfigurowane za pomocą ustawień, które najlepiej sprawdzą się w przypadku danego typu zasobów buforowanych.
Na przykład ta konfiguracja może być używana do buforowania obrazów w czasie działania z określonymi limitami oraz z automatycznym czyszczeniem po przekroczeniu limitu:
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
})
]
})
);
Jeśli używasz metody ExpirationPlugin, musisz ustawić właściwość maxEntries, maxAgeSeconds lub obie te wartości. Pole purgeOnQuotaError jest opcjonalne.
maxEntries
Nakłada to górny limit liczby wpisów (czyli unikalnych adresów URL) w danej pamięci podręcznej.
To ustawienie jest zwykle dobrym rozwiązaniem, chyba że wiesz, że dana strategia może obsługiwać niewielką liczbę adresów URL.
maxAgeSeconds
Wpisy dodane do pamięci podręcznej ponad tę liczbę sekund temu zostaną uznane za nieaktualne i automatycznie wyczyszczone przy następnym dostępie do pamięci podręcznej.
To nie jest tak skuteczne w zarządzaniu limitem miejsca na dane jak maxEntries, ponieważ pamięć podręczna może rosnąć dowolnie, pod warunkiem, że wszystkie wpisy zostały dodane w krótkim czasie. Jest to szczególnie przydatne, gdy wiesz, że jest pewien górny limit aktualności, który chcesz nałożyć, a pilnowanie, by pozostało aktywne, nie ma większego znaczenia dla Twojej aplikacji internetowej.
purgeOnQuotaError
Dzięki tej opcji możesz oznaczyć pamięć podręczną jako bezpieczną i automatycznie usunąć ją, gdy aplikacja internetowa przekroczy dostępne miejsce.
Ta opcja jest obecnie ustawiona domyślnie na false. Pamięć podręczna środowiska wykonawczego powinna być odporna na usunięcie z pamięci, dlatego ustawienie tej opcji na true to sprawdzona metoda, która pomaga zapewnić, że aplikacja internetowa będzie automatycznie przywracała ustawienia, gdy występują ograniczenia miejsca na dane.
Ile danych możesz przechowywać?
Każda przeglądarka ma własne limity miejsca na dane, więc nie ma jednej odpowiedzi. Dodatkowo w niektórych przeglądarkach obowiązuje limit dynamiczny, który zmienia się w zależności od ilości wolnego miejsca na danym urządzeniu, dlatego górny limit może ulec zmianie bez powiadomienia.
Niektóre przeglądarki udostępniają interfejs do wysyłania zapytań dotyczących przybliżonej ilości miejsca na dane wykorzystywanego przez źródło (wraz z górnym limitem) przez navigator.storage.estimate(). W artykule „Szacowanie dostępnego miejsca na dane” znajdziesz więcej informacji o tym, jak wykorzystać te dane we własnych aplikacjach internetowych.
Specjalne uwagi dotyczące trybu incognito w Chrome
Otwarcie aplikacji internetowej w trybie incognito w Chrome wiąże się ze specjalnym ograniczeniem miejsca na dane, które nie ma zastosowania w normalnych kontekstach przeglądania. Limit wynosi około 100 megabajtów (niezależnie od ilości wolnego miejsca na urządzeniu).
Uważaj na nieprzejrzyste odpowiedzi.
Częstym źródłem nieoczekiwanego wykorzystania limitu jest zapisywanie w czasie działania nieprzejrzystych odpowiedzi w pamięci podręcznej, czyli odpowiedzi z innych domen na żądania przesłane bez włączonego CORS.
Przeglądarki automatycznie zwiększają limit tych niejednoznacznych odpowiedzi ze względów bezpieczeństwa. Na przykład w Chrome nawet nieprzejrzysta odpowiedź o wartości kilku kilobajtów przesyła w sumie około 7 megabajtów limitu.
Po rozpoczęciu buforowania niejednoznacznych odpowiedzi możesz szybko zużyć znacznie większy limit, niż się spodziewasz. Dlatego sprawdzoną metodą jest użycie polecenia ExpirationPlugin z elementem maxEntries i potencjalnie odpowiedniego skonfigurowania purgeOnQuotaError.