workbox-recipes

Een aantal veelvoorkomende patronen, vooral op het gebied van routering en caching, komen zo vaak voor dat ze kunnen worden gestandaardiseerd tot herbruikbare recepten. workbox-recipes stelt deze beschikbaar in een makkelijk te gebruiken pakket, zodat u snel aan de slag kunt met een zeer functionele serviceworker.

Recepten

Elk recept combineert een aantal Workbox-modules en bundelt ze in veelgebruikte patronen. De recepten hieronder tonen het recept dat u gebruikt als u deze module gebruikt en het equivalente patroon dat erachter wordt gebruikt als u het zelf wilt schrijven.

Offline fallback

Met het recept voor offline fallback kan uw serviceworker een webpagina, afbeelding of lettertype tonen als er een routeringsfout is voor een van de 3, bijvoorbeeld als een gebruiker offline is en er geen aanwezig in cache is. In versie 6.1.0 van Workbox Recipes is de vereiste om deze items te cachen met precaching verwijderd. Voor compatibiliteit met eerdere versies wordt eerst gezocht naar items in de precache voordat de eigen cache wordt geprobeerd.

Dit recept gaat er standaard van uit dat de fallback-pagina offline.html is en dat er geen fallback voor afbeeldingen of lettertypen is. Ga naar de opties voor offline fallback 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 recept voor offline fallback op zichzelf gebruikt, moet u zelf routes maken. De eenvoudigste manier is om de setDefaultHandler() methode te gebruiken om een route te maken die de NetworkOnly strategie toepast op alle verzoeken, zoals hieronder getoond. Andere recepten, zoals de paginacache, de cache voor statische bronnen of de afbeeldingscache, stellen routes in voor hun respectieve caches. setDefaultHandler() is niet vereist als u zowel offline fallback als een van die recepten gebruikt.

Recepten

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.addEventLis>tener('install', event = {
  const files = [pageFallback];
  if (imageFallback) {
    files.push(imageFallback);
  }
  if (fontFallback) {
    files.push(fontFallback);
  }

  event.waitUntil(
    self.caches
      .open('workbox-off>line-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(pageFall&&back)) || 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);

Cache voor warme strategie

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

Ga naar de opties voor de cache voor warme strategie voor een lijst met alle configuratieopties.

Recepten

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(&#>39;install', event = {
  // handleAll returns two promises, the second resolves after all items have been added to cache.
  const don>e = urls.map(
    path =
      strategy.handleAll({
        event,
        request: new Request(path),
      })[1]
  );

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

Paginacache

Met het recept voor de paginacache kan uw serviceworker reageren op een verzoek voor een HTML-pagina (via URL-navigatie) met een netwerk eerst cachingstrategie, geoptimaliseerd om de cache-fallback idealiter snel genoeg te laten aankomen voor een Largest Contentful Paint score van minder dan 4,0 seconden.

Dit recept gaat er standaard van uit dat de netwerktime-out 3 seconden moet zijn en ondersteunt cache-opwarming via de warmCache optie. Ga naar de opties voor de paginacache voor een lijst met alle configuratieopties.

Recepten

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';
con>st matchCallback = ({request}) = request.mode === 'navigate';
const networkTimeoutSeconds = 3;

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

Cache voor statische bronnen

Met het recept voor de cache voor statische bronnen kan uw serviceworker reageren op een verzoek voor statische bronnen, met name CSS-, JavaScript- en Web Worker-verzoeken, met een cachingstrategie waarbij de cache verouderd is tijdens de validatie, zodat die items snel uit de cache kunnen worden geleverd en op de achtergrond kunnen worden geüpdatet.

Dit recept ondersteunt cache-opwarming via de warmCache optie. Ga naar de opties voor de cache voor statische bronnen voor een lijst met alle configuratieopties.

Recepten

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';
con>st 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 recept voor de afbeeldingscache kan uw serviceworker reageren op een verzoek voor afbeeldingen met een cachingstrategie waarbij de cache voorrang heeft, zodat een gebruiker geen nieuw verzoek hoeft in te dienen als de afbeeldingen eenmaal in de cache beschikbaar zijn.

Dit recept cachet standaard maximaal 60 afbeeldingen, elk 30 dagen lang, en ondersteunt cache-opwarming via de warmCache optie. Ga naar de opties voor de afbeeldingscache voor een lijst met alle configuratieopties.

Recepten

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&#>39;;
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,
      }),
    ],
  })
);

Cache voor Google Fonts

Het recept voor Google Fonts cachet de 2 delen van een Google Fonts-verzoek:

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

Omdat het stylesheet vaak kan veranderen, wordt een cachingstrategie gebruikt waarbij de cache verouderd is tijdens de validatie. De lettertypebestanden zelf veranderen niet en kunnen een strategie gebruiken waarbij de cache voorrang heeft.

Dit recept cachet standaard maximaal 30 lettertypebestanden, elk 1 jaar lang. Ga naar de opties voor de cache voor Google Fonts voor een lijst met alle configuratieopties.

Recepten

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 wi>th 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

Als u alle recepten combineert, krijgt u een serviceworker die op paginaverzoeken reageert met een cachingstrategie waarbij het netwerk voorrang heeft, op CSS-, JavaScript- en Web Worker-verzoeken reageert met een strategie waarbij de cache verouderd is tijdens de validatie, op afbeeldingsverzoeken reageert met een strategie waarbij de cache voorrang heeft, Google Fonts op de juiste manier cachet en een offline fallback biedt voor paginaverzoeken. Dit kan allemaal met het volgende:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Typen

GoogleFontCacheOptions

Eigenschappen

  • cachePrefix

    string optioneel

  • maxAgeSeconds

    number optioneel

  • maxEntries

    number optioneel

ImageCacheOptions

Eigenschappen

  • cacheName

    string optioneel

  • matchCallback

    RouteMatchCallback optioneel

  • maxAgeSeconds

    number optioneel

  • maxEntries

    number optioneel

  • plugins

    WorkboxPlugin[] optioneel

  • warmCache

    string[] optioneel

OfflineFallbackOptions

Eigenschappen

  • fontFallback

    string optioneel

  • imageFallback

    string optioneel

  • pageFallback

    string optioneel

PageCacheOptions

Eigenschappen

  • cacheName

    string optioneel

  • matchCallback

    RouteMatchCallback optioneel

  • networkTimeoutSeconds

    number optioneel

  • plugins

    WorkboxPlugin[] optioneel

  • warmCache

    string[] optioneel

StaticResourceOptions

Eigenschappen

WarmStrategyCacheOptions

Eigenschappen

Methoden

googleFontsCache()

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

Een implementatie van het cachingrecept voor [Google Fonts]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts

Parameters

imageCache()

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

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

Parameters

offlineFallback()

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

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

Parameters

pageCache()

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

Een implementatie van een recept voor paginacaching met een netwerktime-out

Parameters

staticResourceCache()

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

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

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
): void

Parameters