In bepaalde situaties wilt u mogelijk dat er een terugvalreactie in de cache wordt opgeslagen voor het geval de gebruiker offline is. Het implementeren van een fallback is een alternatief voor caching-gedrag dat strategieën zoals network-first of mulle-while-revalidate bieden.
Een fallback is een generiek, one-size-fits-all antwoord dat een betere tijdelijke aanduiding is dan wat de browser standaard zou bieden als een verzoek mislukt. Enkele voorbeelden zijn:
- Een alternatief voor de tijdelijke aanduiding 'ontbrekende afbeelding'.
- Een HTML-alternatief voor de standaardpagina "geen netwerkverbinding beschikbaar".
Alleen offline pagina
Als u alleen maar een aangepaste offline HTML-pagina hoeft aan te leveren, maar verder niets, dan is hier een basisrecept dat u kunt volgen:
import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
setDefaultHandler(new NetworkOnly());
offlineFallback();
De bovenstaande code gebruikt setDefaultHandler om standaard een netwerkstrategie te gebruiken voor alle routes. Vervolgens wordt het offlineFallback -recept uitgevoerd om de offline fallback uit te voeren in het geval er een fout optreedt. Het recept gaat ervan uit dat uw offline fallback-HTML-bestand de naam offline.html krijgt en wordt aangeboden vanaf de hoofdmap van uw webserver.
Uitgebreide terugvalmogelijkheden
Telkens wanneer er een netwerkfout of cache-misser optreedt, zullen de caching-strategieën die door workbox-strategies worden aangeboden consequent worden afgewezen. Dit bevordert het patroon van het instellen van een globale 'catch'-handler om eventuele fouten in een enkele handlerfunctie op te lossen, waardoor u verschillende fallbacks kunt bieden voor verschillende request.destination waarden.
In het volgende voorbeeld wordt het warmStrategyCache -recept uit workbox-recipes gebruikt en wordt een catch-handler ingesteld om items weer te geven die van tevoren in de runtime-cache zijn opgeslagen. Precaching-fallbacks kunnen echter beter geschikt zijn voor uw toepassing:
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();
}
});
In het volgende voorbeeld worden de terugvalreacties vooraf in de cache geplaatst met behulp van injectManifest met de buildtools van Workbox, en dienden als terugval in het geval van een fout met de matchPrecache methode.
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();
}
});
Een voorbeeld van een gebruiksscenario voor de tweede fallback-configuratie is als een pagina van tevoren in de cache was opgeslagen, maar de door de pagina opgevraagde afbeeldingen (of andere elementen) niet. De pagina kan nog steeds uit de cache worden gelezen wanneer de gebruiker offline is, maar er kunnen tijdelijke aanduidingen voor terugval of alternatieve functionaliteit worden geboden als er een netwerkfout optreedt.
Het opwarmen van de runtime-cache
Workbox onderhoudt afzonderlijke caches voor precache- en runtime-caches, en er kunnen zich situaties voordoen waarin u iets van tevoren in de cache wilt opslaan zonder afhankelijk te zijn van precaching, omdat voor updates van het precache-manifest u een bijgewerkte servicemedewerker moet inzetten.
Als u de runtime-cache van tevoren wilt vullen met assets, kunt u dit doen met behulp van het warmStrategyCache recept uit workbox-recipes . Onder de motorkap roept deze strategie Cache.addAll aan in de install van een servicemedewerker.
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});
Conclusie
Het beheren van terugvalreacties op mislukte aanvragen kost wat werk, maar met een beetje planning vooraf kunt u uw web-app zo instellen dat deze een bepaald niveau van inhoud en functionaliteit biedt wanneer de gebruiker offline is.