การจัดการการตอบกลับสำรอง

import {offlineFallback} from 'workbox-recipes'; import {setDefaultHandler} from 'workbox-routing'; import {NetworkOnly} from 'workbox-strategies';  setDefaultHandler(new NetworkOnly());  offlineFallback(); 

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();   } }); 

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();   } }); 

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});