W niektórych sytuacjach może być zapisywana odpowiedź zastępcza na wypadek, gdyby użytkownik był offline. Implementacja kreacji zastępczych jest alternatywą dla zachowań w pamięci podręcznej, które zapewniają strategie takie jak koncentracja na sieci czy nieaktualne w trakcie ponownej weryfikacji.
Kreacja zastępcza to ogólna, uniwersalna odpowiedź, która stanowi lepszą wartość zastępczą niż domyślnie ustawiona w przeglądarce w przypadku niepowodzenia żądania. Przykłady:
- Alternatywa dla „brakującego obrazu” .
- Alternatywa HTML dla standardowego ustawienia „Brak dostępnego połączenia sieciowego” stronę.
Tylko strona offline
Jeśli wystarczy podać własną stronę HTML offline, ale nic więcej, oto podstawowy przepis, który możesz zastosować:
import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
setDefaultHandler(new NetworkOnly());
offlineFallback();
Powyższy kod korzysta ze strategii setDefaultHandler, aby domyślnie stosować strategię tylko sieciową dla wszystkich tras. Następnie uruchamia przepis offlineFallback, aby w przypadku wystąpienia błędu wyświetlać kreację zastępczą offline. Przepis zakłada, że Twój zastępczy plik HTML offline będzie miał nazwę offline.html i będzie wyświetlany z poziomu głównego serwera WWW.
Kompleksowe rozwiązania zastępcze
Gdy wystąpi awaria sieci lub brak pamięci podręcznej, strategie buforowania oferowane przez workbox-strategies będą konsekwentnie odrzucane. Sprzyja to umieszczaniu w internecie wzorca ustawiania globalnego typu „catch” radzi sobie z wszelkimi błędami w pojedynczej funkcji obsługi, co pozwala oferować różne wartości zastępcze dla różnych wartości request.destination.
Poniższy przykład korzysta z przepisu warmStrategyCache z elementu workbox-recipes i ustawia moduł obsługi żądań do obsługi elementów znajdujących się w pamięci podręcznej z wyprzedzeniem w pamięci podręcznej środowiska wykonawczego. Jednak w Twojej aplikacji lepszym rozwiązaniem mogą być wstępne buforowanie:
import {warmStrategyCache} from 'workbox-recipes';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';
// Fallback assets to cache
const FALLBACK_HTML_URL = '/offline.html';
const FALLBACK_IMAGE_URL = '/images/image-not-found.jpg';
const FALLBACK_STRATEGY = new CacheFirst();
// Warm the runtime cache with a list of asset URLs
warmStrategyCache({
urls: [FALLBACK_HTML_URL, FALLBACK_IMAGE_URL],
strategy: FALLBACK_STRATEGY,
});
// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());
// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
// The warmStrategyCache recipe is used to add the fallback assets ahead of
// time to the runtime cache, and are served in the event of an error below.
// Use `event`, `request`, and `url` to figure out how to respond, or
// use request.destination to match requests for specific resource types.
switch (request.destination) {
case 'document':
return FALLBACK_STRATEGY.handle({event, request: FALLBACK_HTML_URL});
case 'image':
return FALLBACK_STRATEGY.handle({event, request: FALLBACK_IMAGE_URL});
default:
// If we don't have a fallback, return an error response.
return Response.error();
}
});
W następnej kolejności odpowiedzi zastępcze są wstępnie zapisywane w pamięci podręcznej za pomocą injectManifest z narzędziami do kompilacji Workbox i używane w przypadku błędu związanego z metodą matchPrecache.
import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
// Optional: use the injectManifest mode of one of the Workbox
// build tools to precache a list of URLs, including fallbacks.
precacheAndRoute(self.__WB_MANIFEST);
// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());
// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
// Fallback assets are precached when the service worker is installed, and are
// served in the event of an error below. Use `event`, `request`, and `url` to
// figure out how to respond, or use request.destination to match requests for
// specific resource types.
switch (request.destination) {
case 'document':
// FALLBACK_HTML_URL must be defined as a precached URL for this to work:
return matchPrecache(FALLBACK_HTML_URL);
case 'image':
// FALLBACK_IMAGE_URL must be defined as a precached URL for this to work:
return matchPrecache(FALLBACK_IMAGE_URL);
default:
// If we don't have a fallback, return an error response.
return Response.error();
}
});
Przykładem użycia drugiej konfiguracji kreacji zastępczej jest sytuacja, w której strona została wcześniej zapisana w pamięci podręcznej, ale obrazy (lub inne zasoby) żądane przez stronę nie zostały pobrane. Gdy użytkownik jest offline, stronę można odczytać z pamięci podręcznej, ale w przypadku błędu sieci można użyć obiektów zastępczych lub innych funkcji.
Ogrzewanie pamięci podręcznej środowiska wykonawczego
Workbox przechowuje osobne pamięci podręczne do wstępnego buforowania i pamięci podręcznej środowiska wykonawczego. Może się też zdarzyć, że zechcesz zapisać coś w pamięci podręcznej z wyprzedzeniem i nie korzystać z wstępnego buforowania, ponieważ aktualizacje pliku manifestu precache będą wymagały wdrożenia zaktualizowanego mechanizmu Service Worker.
Aby z wyprzedzeniem uzupełnić pamięć podręczną środowiska wykonawczego o zasoby, możesz to zrobić, korzystając z przepisu warmStrategyCache z workbox-recipes. Ta strategia wywołuje w niej Cache.addAll w zdarzeniu install skryptu service worker.
import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = [
'/offline.html',
];
warmStrategyCache({urls, strategy});
Podsumowanie
Zarządzanie odpowiedziami zastępczymi na nieudane żądania jest dość pracochłonne, ale po wcześniejszym zaplanowaniu możesz skonfigurować aplikację internetową tak, by udostępniała pewne treści i funkcje, gdy użytkownik jest offline.