werkdoos-recepten

Een aantal veel voorkomende patronen, vooral rond routing en caching , zijn zo gebruikelijk dat ze kunnen worden gestandaardiseerd in herbruikbare recepten. workbox-recipes stelt deze beschikbaar in een eenvoudig te gebruiken pakket, zodat u snel aan de slag kunt met een zeer functionele servicemedewerker.

Recepten

Elk recept combineert een aantal Workbox-modules en bundelt deze in veelgebruikte patronen. De onderstaande recepten tonen het recept dat u gebruikt bij het gebruik van deze module, en het equivalente patroon dat het onder de motorkap gebruikt, mocht u het zelf willen schrijven.

Offline terugval

Met het offline fallback-recept kan uw servicemedewerker een webpagina, afbeelding of lettertype weergeven als er een routeringsfout optreedt voor een van de drie, bijvoorbeeld als een gebruiker offline is en er geen cachetreffer is. In versie 6.1.0 van Workbox Recipes is de vereiste om deze items in de cache op te slaan met behulp van precaching verwijderd; voor achterwaartse compatibiliteit zal het eerst naar items in de precache zoeken voordat het zijn eigen cache probeert.

Dit recept gaat er standaard van uit dat de fallback-pagina offline.html is en dat er geen fallback voor afbeeldingen of lettertypen is. Zie de offline fallback-opties voor een lijst met alle configuratieopties.

De offline fallback wordt alleen toegepast als er een overeenkomende route is voor een bepaald verzoek. Als u het offline fallback-recept alleen gebruikt, moet u zelf routes maken. De eenvoudigste manier om dit te doen is door de methode setDefaultHandler() te gebruiken om een ​​route te maken die de NetworkOnly -strategie op alle verzoeken toepast, zoals hieronder weergegeven. Andere recepten, zoals de paginacache , de statische broncache of de afbeeldingscache , stellen routes in voor hun respectievelijke caches. setDefaultHandler() is niet vereist bij gebruik van zowel offline fallback als een van deze recepten.

Recept

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

setDefaultHandler(new NetworkOnly());

offlineFallback();

Patroon

import {setCatchHandler, setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const pageFallback = 'offline.html';
const imageFallback = false;
const fontFallback = false;

setDefaultHandler(new NetworkOnly());

self.addEventListener('install', event => {
  const files = [pageFallback];
  if (imageFallback) {
    files.push(imageFallback);
  }
  if (fontFallback) {
    files.push(fontFallback);
  }

  event.waitUntil(
    self.caches
      .open('workbox-offline-fallbacks')
      .then(cache => cache.addAll(files))
  );
});

const handler = async options => {
  const dest = options.request.destination;
  const cache = await self.caches.open('workbox-offline-fallbacks');

  if (dest === 'document') {
    return (await cache.match(pageFallback)) || Response.error();
  }

  if (dest === 'image' && imageFallback !== false) {
    return (await cache.match(imageFallback)) || Response.error();
  }

  if (dest === 'font' && fontFallback !== false) {
    return (await cache.match(fontFallback)) || Response.error();
  }

  return Response.error();
};

setCatchHandler(handler);

Warme strategiecache

Met het warme strategie-cacherecept kunt u de opgegeven URL's in uw cache laden tijdens de install van de servicemedewerker, waarbij u ze in de cache opslaat met de opties van de opgegeven strategie . Dit kan worden gebruikt als alternatief voor precaching als u de specifieke URL's kent die u in de cache wilt opslaan, de cache van een route wilt opwarmen of vergelijkbare plaatsen waar u tijdens de installatie URL's wilt cachen.

Zie de cache-opties voor warme strategie voor een lijst met alle configuratie-opties.

Recept

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

Patroon

import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

self.addEventListener('install', event => {
  // handleAll returns two promises, the second resolves after all items have been added to cache.
  const done = urls.map(
    path =>
      strategy.handleAll({
        event,
        request: new Request(path),
      })[1]
  );

  event.waitUntil(Promise.all(done));
});

Paginacache

Met het paginacacherecept kan uw servicemedewerker reageren op een verzoek om een ​​HTML-pagina (via URL-navigatie) met een netwerk-eerst -cachestrategie, geoptimaliseerd om, idealiter, de cache-fallback snel genoeg te laten arriveren voor een hoogste inhoudelijke verfscore van minder dan 4,0 seconden.

Dit recept gaat er standaard van uit dat de netwerktime-out 3 seconden moet bedragen en ondersteunt het opwarmen van de cache via de optie warmCache . Zie de pagina cache-opties voor een overzicht van alle configuratie-opties.

Recept

import {pageCache} from 'workbox-recipes';

pageCache();

Patroon

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

const cacheName = 'pages';
const matchCallback = ({request}) => request.mode === 'navigate';
const networkTimeoutSeconds = 3;

registerRoute(
  matchCallback,
  new NetworkFirst({
    networkTimeoutSeconds,
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Statische bronnencache

Met het cacherecept voor statische bronnen kan uw servicemedewerker reageren op een verzoek om statische bronnen, met name CSS-, JavaScript- en Web Worker-verzoeken, met een cachestrategie die verouderd en opnieuw valideert, zodat deze assets snel vanuit de cache kunnen worden bediend en bijgewerkt op de achtergrond

Dit recept ondersteunt het opwarmen van de cache via de optie warmCache . Zie de cache-opties voor statische bronnen voor een lijst met alle configuratie-opties.

Recept

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Patroon

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

const cacheName = 'static-resources';
const matchCallback = ({request}) =>
  // CSS
  request.destination === 'style' ||
  // JavaScript
  request.destination === 'script' ||
  // Web Workers
  request.destination === 'worker';

registerRoute(
  matchCallback,
  new StaleWhileRevalidate({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Afbeeldingscache

Met het cacherecept voor afbeeldingen kan uw servicemedewerker op een verzoek om afbeeldingen reageren met een cache-first caching-strategie, zodat een gebruiker, zodra ze beschikbaar zijn in de cache, er geen nieuw verzoek meer voor hoeft te doen.

Dit recept slaat standaard maximaal 60 afbeeldingen op in de cache, elk gedurende 30 dagen, en ondersteunt het opwarmen van de cache via de warmCache optie. Zie de afbeeldingscache-opties voor een lijst met alle configuratieopties.

Recept

import {imageCache} from 'workbox-recipes';

imageCache();

Patroon

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

const cacheName = 'images';
const matchCallback = ({request}) => request.destination === 'image';
const maxAgeSeconds = 30 * 24 * 60 * 60;
const maxEntries = 60;

registerRoute(
  matchCallback,
  new CacheFirst({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries,
        maxAgeSeconds,
      }),
    ],
  })
);

Google Fonts-cache

Het Google Fonts-recept slaat de twee delen van een Google Fonts-verzoek op in de cache:

• Het stylesheet met de @font-face -definities, die linken naar de lettertypebestanden.
• De statische, herziene lettertypebestanden.

Omdat het stylesheet vaak kan veranderen, wordt een cachestrategie gebruikt die verouderd en opnieuw valideert . De lettertypebestanden zelf veranderen daarentegen niet en kunnen gebruikmaken van een cache first -strategie.

Dit recept bewaart standaard maximaal 30 lettertypebestanden, elk voor één jaar. Zie de cache-opties van Google Fonts voor een lijst met alle configuratie-opties.

Recept

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

Patroon

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

const sheetCacheName = 'google-fonts-stylesheets';
const fontCacheName = 'google-fonts-webfonts';
const maxAgeSeconds = 60 * 60 * 24 * 365;
const maxEntries = 30;

registerRoute(
  ({url}) => url.origin === 'https://fonts.googleapis.com',
  new StaleWhileRevalidate({
    cacheName: sheetCacheName,
  })
);

// Cache the underlying font files with a cache-first strategy for 1 year.
registerRoute(
  ({url}) => url.origin === 'https://fonts.gstatic.com',
  new CacheFirst({
    cacheName: fontCacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxAgeSeconds,
        maxEntries,
      }),
    ],
  })
);

Snel gebruik

Door alle recepten samen te combineren, ontstaat een servicemedewerker die reageert op paginaverzoeken met een netwerk-eerste caching-strategie, reageert op CSS-, JavaScript- en Web Worker-verzoeken met een verouderde-terwijl-revalideren -strategie, reageert op afbeeldingsverzoeken met eerst een cache strategie, Google Fonts op de juiste manier in de cache opslaan en een offline terugval bieden voor paginaverzoeken. Dit kan allemaal met het volgende:

import {
  pageCache,
  imageCache,
  staticResourceCache,
  googleFontsCache,
  offlineFallback,
} from 'workbox-recipes';

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Soorten

GoogleFontCacheOptions

Eigenschappen

• cacheVoorvoegsel

  tekenreeks optioneel

• maxAgeSeconden

  nummer optioneel

• maxInvoer

  nummer optioneel

ImageCacheOptions

Eigenschappen

• cacheNaam

  tekenreeks optioneel

• matchTerugbellen

  RouteMatchCallback optioneel

• maxAgeSeconden

  nummer optioneel

• maxInvoer

  nummer optioneel

• plug-ins

  WorkboxPlugin [] optioneel

• warme cache

  tekenreeks[] optioneel

OfflineFallbackOptions

Eigenschappen

• lettertypeFallback

  tekenreeks optioneel

• afbeeldingFallback

  tekenreeks optioneel

• paginaFallback

  tekenreeks optioneel

PageCacheOptions

Eigenschappen

• cacheNaam

  tekenreeks optioneel

• matchTerugbellen

  RouteMatchCallback optioneel

• netwerkTimeoutSeconden

  nummer optioneel

• plug-ins

  WorkboxPlugin [] optioneel

• warme cache

  tekenreeks[] optioneel

StaticResourceOptions

Eigenschappen

• cacheNaam

  tekenreeks optioneel

• matchTerugbellen

  RouteMatchCallback optioneel

• plug-ins

  WorkboxPlugin [] optioneel

• warme cache

  tekenreeks[] optioneel

WarmStrategyCacheOptions

Eigenschappen

• strategie

  Strategie

• URL's

  snaar[]

Methoden

googleFontsCache()

workbox-recipes.googleFontsCache(
  options?: GoogleFontCacheOptions,
)

Een implementatie van het [Google-lettertypen] https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts caching-recept

Parameters

• opties

  GoogleFontCacheOptions optioneel

imageCache()

workbox-recipes.imageCache(
  options?: ImageCacheOptions,
)

Een implementatie van het [recept voor het cachen van afbeeldingen] https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

Parameters

• opties

  ImageCacheOptions optioneel

offlineFallback()

workbox-recipes.offlineFallback(
  options?: OfflineFallbackOptions,
)

Een implementatie van het [uitgebreide fallbacks-recept] https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks . Zorg ervoor dat u de fallbacks opneemt in uw precache-injectie

Parameters

• opties

  OfflineFallbackOptions optioneel

pageCache()

workbox-recipes.pageCache(
  options?: PageCacheOptions,
)

Een implementatie van een paginacacherecept met een netwerktime-out

Parameters

• opties

  PageCacheOptions optioneel

staticResourceCache()

workbox-recipes.staticResourceCache(
  options?: StaticResourceOptions,
)

Een implementatie van het [recept voor CSS- en JavaScript-bestanden] https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

Parameters

• opties

  StaticResourceOptions optioneel

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

Parameters

• opties

  WarmStrategyCacheOptions