Diese Seite wurde von der Cloud Translation API übersetzt.

workbox-rezepte

Einige gängige Muster, insbesondere im Bereich Routing und Caching, sind so häufig, dass sie in wiederverwendbare Rezepte standardisiert werden können. workbox-recipes stellt diese in einem einfach zu nutzenden Paket zur Verfügung, sodass Sie schnell mit einem hochfunktionalen Service Worker loslegen können.

Rezepte

Jedes Rezept kombiniert eine Reihe von Workbox-Modulen und bündelt sie in gängigen Mustern. Die folgenden Anleitungen zeigen das Rezept, das Sie in diesem Modul verwenden, sowie das entsprechende Muster, das im Hintergrund verwendet wird, falls Sie es selbst schreiben möchten.

Offline-Fallback

Mit dem Offline-Fallback-Rezept kann Ihr Service Worker eine Webseite, ein Bild oder eine Schriftart ausliefern, wenn bei einem der drei Elemente ein Routingfehler auftritt, z. B. wenn ein Nutzer offline ist und kein Cache-Treffer vorliegt. In Version 6.1.0 von Workbox-Rezepten wurde die Anforderung entfernt, diese Elemente mithilfe des Vorab-Cachings im Cache zu speichern. Aus Gründen der Abwärtskompatibilität wird zuerst im Vorab-Cache nach Elementen gesucht, bevor der eigene Cache verwendet wird.

Bei diesem Rezept wird standardmäßig davon ausgegangen, dass die Fallback-Seite offline.html ist und es keinen Bild- oder Schriftschnitt-Fallback gibt. Unter Offline-Fallback-Optionen finden Sie eine Liste aller Konfigurationsoptionen.

Der Offline-Fallback wird nur angewendet, wenn für eine bestimmte Anfrage eine übereinstimmende Route vorhanden ist. Wenn Sie das Offline-Fallback-Schema allein verwenden, müssen Sie Routen selbst erstellen. Am einfachsten ist es, mit der Methode setDefaultHandler() eine Route zu erstellen, bei der die Strategie NetworkOnly auf alle Anfragen angewendet wird, wie unten gezeigt. Bei anderen Rezepten wie dem Seitencache, dem statischen Ressourcencache oder dem Bildcache werden Routen für die jeweiligen Caches eingerichtet. setDefaultHandler() ist nicht erforderlich, wenn sowohl das Offline-Fallback als auch eines dieser Rezepte verwendet werden.

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

Warmer Strategie-Cache

Mit dem Cache-Schema für warme Strategien können Sie während der install-Phase des Service Workers angegebene URLs in Ihren Cache laden und sie mit den Optionen der angegebenen Strategie im Cache speichern. Diese Funktion kann als Alternative zum Vorab-Caching verwendet werden, wenn Sie die URLs kennen, die Sie im Cache speichern möchten, den Cache einer Route vorwärmen oder ähnliche Orte während der Installation im Cache speichern möchten.

Eine Liste aller Konfigurationsoptionen finden Sie unter Warm-Strategie-Cache-Optionen.

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 Seitencache-Rezept kann Ihr Service Worker auf eine Anfrage für eine HTML-Seite (über die URL-Navigation) mit einer Netzwerk-first-Cache-Strategie reagieren, die so optimiert ist, dass der Cache-Fallback idealerweise schnell genug eintrifft, um einen Wert von weniger als 4,0 Sekunden für die größte inhaltsreiche Paint zu erzielen.

Bei diesem Rezept wird standardmäßig davon ausgegangen, dass die Netzwerkzeitüberschreitung 3 Sekunden betragen sollte. Außerdem wird die Cache-Vorwärmung über die Option warmCache unterstützt. Eine Liste aller Konfigurationsoptionen finden Sie unter Seitencache-Optionen.

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-Schema für statische Ressourcen kann Ihr Service Worker auf eine Anfrage nach statischen Ressourcen, insbesondere CSS-, JavaScript- und Web Worker-Anfragen, mit der Caching-Strategie stale- during-revalid antworten, damit diese Assets schnell aus dem Cache bereitgestellt und im Hintergrund aktualisiert werden können.

Dieses Rezept unterstützt die Cache-Vorwä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 Bild-Cache-Rezept kann Ihr Service Worker auf eine Bildanfrage mit einer Cache-first--Caching-Strategie antworten. So muss der Nutzer die Bilder nicht noch einmal anfordern, wenn sie im Cache verfügbar sind.

Mit diesem Rezept werden standardmäßig maximal 60 Bilder für jeweils 30 Tage im Cache gespeichert. Außerdem wird die Cache-Vorwärmung über die Option warmCache unterstützt. Unter Cache-Optionen für Bilder 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 mit den Schriftartdateien verknüpft sind
Die statischen, überarbeiteten Schriftartdateien.

Da sich das Stylesheet häufig ändern kann, wird die Caching-Strategie veraltete-während-Neuvalidierung verwendet. Die Schriftartdateien selbst ändern sich jedoch nicht und können eine Cache-First-Strategie nutzen.

Dieses Schema speichert standardmäßig maximal 30 Schriftartdateien für ein Jahr im Cache. Eine Liste aller Konfigurationsoptionen finden Sie unter Google Fonts-Cache-Optionen.

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 Nutzung

Wenn Sie alle Rezepte kombinieren, erhalten Sie einen Service Worker, der auf Seitenanfragen mit einer Netzwerk-first-Caching-Strategie antwortet, auf CSS-, JavaScript- und Web Worker-Anfragen mit einer Stale-While-Revalidate-Strategie antwortet, auf Bildanfragen mit einer Cache-first-Strategie antwortet, Google Fonts ordnungsgemäß im Cache speichert und einen Offline-Fallback für Seitenanfragen bereitstellt. Das ist so möglich:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Typen

GoogleFontCacheOptions

Attribute

cachePrefix

String optional
maxAgeSeconds

Zahl optional
maxEntries

Zahl optional

ImageCacheOptions

Attribute

cacheName

String optional
matchCallback

RouteMatchCallback optional
maxAgeSeconds

Zahl optional
maxEntries

Zahl optional
Plug-ins

WorkboxPlugin[] optional
warmCache

string[] optional

OfflineFallbackOptions

Attribute

fontFallback

String optional
imageFallback

String optional
pageFallback

String optional

PageCacheOptions

Attribute

cacheName

String optional
matchCallback

RouteMatchCallback optional
networkTimeoutSeconds

Zahl optional
Plug-ins

WorkboxPlugin[] optional
warmCache

string[] optional

StaticResourceOptions

Attribute

cacheName

String optional
matchCallback

RouteMatchCallback optional
Plug-ins

WorkboxPlugin[] optional
warmCache

string[] optional

WarmStrategyCacheOptions

Attribute

Strategie

Strategie
URLs

String[]

Methoden

googleFontsCache()

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

Eine Implementierung des [Google Fonts]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts-Caching-Rezepts

Parameter

Optionen

GoogleFontCacheOptions optional

imageCache()

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

Eine Implementierung des [Bild-Caching-Schemas]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

Parameter

Optionen

ImageCacheOptions optional

offlineFallback()

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

Eine Implementierung des [Rezepts für umfassende Fallbacks]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks. Fügen Sie die Fallbacks in die Pre-Cache-Injection ein.

Parameter

Optionen

OfflineFallbackOptions optional

pageCache()

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

Implementierung eines Schemas für das Seiten-Caching mit einem Netzwerkzeitlimit

Parameter

Optionen

PageCacheOptions optional

staticResourceCache()

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

Eine Implementierung des [Rezepts für CSS- und JavaScript-Dateien]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

Parameter

Optionen

StaticResourceOptions – optional

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

Parameter

Optionen

WarmStrategyCacheOptions