workbox-rezepte

Eine Reihe gängiger Muster, insbesondere beim Routing und Caching, sind so weit verbreitet, dass sie in wiederverwendbare Schemas standardisiert werden können. workbox-recipes stellt sie in einem einfach zu verwendenden Paket zur Verfügung, damit Sie schnell mit einem hochfunktionalen Service Worker arbeiten können.

Rezepte

In jedem Schema werden mehrere Workbox-Module miteinander kombiniert und zu häufig verwendeten Mustern gebündelt. In den Rezepten unten finden Sie das Rezept, das Sie in diesem Modul verwenden, und das entsprechende Muster, das im Hintergrund verwendet wird, falls Sie es selbst aufschreiben möchten.

Offline-Fallback

Mit dem Offline-Fallback-Rezept kann Ihr Service Worker eine Webseite, ein Bild oder eine Schriftart bereitstellen, wenn bei einer der drei Elemente ein Routingfehler auftritt, z. B. wenn ein Nutzer offline ist und es keinen Cache-Treffer gibt. In Version 6.1.0 von Workbox Recipes ist es nicht mehr erforderlich, diese Elemente per Precaching zwischenzuspeichern. Aus Gründen der Abwärtskompatibilität wird zuerst nach Elementen im Precache gesucht, bevor der eigene Cache ausprobiert wird.

Bei diesem Schema wird standardmäßig davon ausgegangen, dass die Fallback-Seite offline.html ist und es kein Bild- oder Schrift-Fallback gibt. Eine Liste aller Konfigurationsoptionen finden Sie unter Offline-Fallback-Optionen.

Das Offline-Fallback wird nur angewendet, wenn für eine bestimmte Anfrage eine übereinstimmende route vorhanden ist. Wenn Sie das Offline-Fallback-Rezept eigenständig verwenden, müssen Sie Routen selbst erstellen. Am einfachsten erstellen Sie mit der Methode setDefaultHandler() eine Route, bei der die Strategie NetworkOnly auf alle Anfragen angewendet wird, wie unten dargestellt. Andere Schemas, wie der Seiten-Cache, der Cache für statische Ressourcen oder den Bild-Cache, richten Routen für die jeweiligen Caches ein. setDefaultHandler() ist nicht erforderlich, wenn sowohl ein Offline-Fallback als auch eines dieser Schemas verwendet werden soll.

Rezept

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

setDefaultHandler(new NetworkOnly());

offlineFallback();

Muster

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

Cache für Warm-Strategie

Mit dem Cache-Rezept für die warme Strategie können Sie während der install-Phase des Service Workers bereitgestellte URLs in Ihren Cache laden und sie mit den Optionen der angegebenen Strategie im Cache speichern. Diese Methode kann als Alternative zum Precaching verwendet werden, wenn Sie bestimmte URLs kennen, die im Cache gespeichert werden sollen, oder wenn Sie den Cache einer Route aufwärmen möchten, oder für ähnliche Stellen, an denen URLs während der Installation zwischengespeichert werden sollen.

Eine Liste aller Konfigurationsoptionen finden Sie unter Cache-Optionen für die Warm-Strategie.

Rezept

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

Muster

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

Seiten-Cache

Mit dem Rezept für den Seiten-Cache kann Ihr Service Worker auf eine Anfrage für eine HTML-Seite (über URL-Navigation) mit einer Netzwerk zuerst-Caching-Strategie reagieren, die idealerweise so optimiert ist, dass der Cache-Fallback schnell genug eintrifft, um einen Largest Contentful Paint-Wert von weniger als 4,0 Sekunden zu erzielen.

Bei diesem Schema wird standardmäßig davon ausgegangen, dass das Netzwerkzeitlimit 3 Sekunden beträgt. Außerdem wird die Cache-Aufwärmung durch die Option warmCache unterstützt. Unter Seiten-Cache-Optionen finden Sie eine Liste aller Konfigurationsoptionen.

Rezept

import {pageCache} from 'workbox-recipes';

pageCache();

Muster

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

Cache für statische Ressourcen

Mit dem Cache-Rezept für statische Ressourcen kann Ihr Service Worker auf Anfragen nach statischen Ressourcen, insbesondere CSS-, JavaScript- und Web Worker-Anfragen, mit einer Caching-Strategie des Typs stale-while-revalidator antworten, damit diese Assets schnell aus dem Cache bereitgestellt und im Hintergrund aktualisiert werden können.

Dieses Schema unterstützt die Cache-Erwärmung über die Option warmCache. Eine Liste aller Konfigurationsoptionen finden Sie unter Cache-Optionen für statische Ressourcen.

Rezept

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Muster

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

Bild-Cache

Mit dem Rezept für den Bild-Cache kann Ihr Service Worker auf Anfragen nach Bildern mit einer Cache-First-Caching-Strategie antworten, sodass Nutzer keine weitere Anfrage stellen müssen, sobald sie im Cache verfügbar sind.

Dieses Schema speichert standardmäßig maximal 60 Bilder jeweils 30 Tage lang im Cache und unterstützt die Cache-Erwärmung über die Option warmCache. Unter Optionen für den Bild-Cache finden Sie eine Liste aller Konfigurationsoptionen.

Rezept

import {imageCache} from 'workbox-recipes';

imageCache();

Muster

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

Das Google Fonts-Rezept speichert die beiden Teile einer Google Fonts-Anfrage im Cache:

• Das Stylesheet mit den @font-face-Definitionen, die auf die Schriftartdateien verlinken.
• Die statischen, überarbeiteten Schriftartdateien.

Da sich das Stylesheet häufig ändern kann, wird eine Caching-Strategie des Typs Veralteter Vorgang zur erneuten Validierung verwendet. Die Schriftartdateien selbst ändern sich dagegen nicht und können eine Cache-First-Strategie nutzen.

Bei diesem Schema werden für jedes Jahr maximal 30 Schriftartdateien im Cache gespeichert. Unter Google Fonts-Cache-Optionen finden Sie eine Liste aller Konfigurationsoptionen.

Rezept

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

Muster

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

Schnelle Verwendung

Wenn alle Schemas kombiniert werden, wird ein Service Worker mit einer Netzwerk-First-Caching-Strategie auf Seitenanfragen reagiert, der auf CSS-, JavaScript- und Web Worker-Anfragen mit der Strategie Veralteter Vorgang reagiert, Bildanfragen mit einer Cache-First-Strategie beantwortet, Google Fonts ordnungsgemäß im Cache speichert und ein Offline-Fallback für Seitenanfragen bietet. Dies kann so geschehen:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

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

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

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

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

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

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)