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