Workbox-Build

Das workbox-build-Modul lässt sich in einen knotenbasierten Build-Prozess einbinden und kann einen vollständigen Service Worker oder nur eine Liste von Assets zum Vorab-Caching generieren, die in einem vorhandenen Service Worker verwendet werden können.

Die beiden Modi, die die meisten Entwickler verwenden, sind generateSW und injectManifest. Die Antworten auf die folgenden Fragen können Ihnen bei der Auswahl des richtigen Modus und der richtigen Konfiguration helfen.

Welchen Modus soll ich verwenden?

generateSW

Im generateSW-Modus wird eine Service Worker-Datei für Sie erstellt, die über Konfigurationsoptionen angepasst wird, und auf die Festplatte geschrieben.

Verwendung von generateSW

  • Sie möchten Dateien vorab im Cache speichern.
  • Sie benötigen ein einfaches Laufzeit-Caching.

WANN generateSW NICHT VERWENDET WERDEN SOLLTE

  • Sie möchten andere Service Worker-Funktionen verwenden, z.B. Web Push.
  • Sie möchten zusätzliche Skripts importieren oder zusätzliche Logik für benutzerdefinierte Caching-Strategien hinzufügen.

injectManifest

Im Modus injectManifest wird eine Liste von URLs zum Vorab-Caching generiert und das Vorab-Cache-Manifest einer vorhandenen Service Worker-Datei hinzugefügt. Andernfalls bleibt die Datei unverändert.

Verwendung von injectManifest

  • Sie möchten mehr Kontrolle über Ihren Service Worker haben.
  • Sie möchten Dateien vorab im Cache speichern.
  • Sie müssen das Routing und die Strategien anpassen.
  • Sie möchten Ihren Service Worker mit anderen Plattformfunktionen verwenden, z.B. Web Push.

WANN injectManifest NICHT VERWENDET WERDEN SOLLTE

  • Sie möchten einen Service Worker auf Ihrer Website hinzufügen und dabei so wenig Aufwand wie möglich haben.

generateSW-Modus

Sie können den Modus generateSW in einem knotenbasierten Build-Skript mit den gängigsten Konfigurationsoptionen verwenden:

// Inside of build.js:
const {generateSW} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
generateSW({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
  swDest: '...',
}).then(({count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while generating a service worker:',
      warnings.join('\n')
    );
  }

  console.log(`Generated a service worker, which will precache ${count} files, totaling ${size} bytes.`);
});

Dadurch wird ein Service Worker mit eingerichtetem Pre-Caching für alle Dateien generiert, die von Ihrer Konfiguration und den angegebenen Regeln für das Laufzeit-Caching erfasst werden.

Eine vollständige Liste der Konfigurationsoptionen finden Sie in der Referenzdokumentation.

injectManifest-Modus

Sie können den Modus injectManifest in einem knotenbasierten Build-Skript mit den gängigsten Konfigurationsoptionen verwenden:

// Inside of build.js:
const {injectManifest} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
injectManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  swDest: '...',
  swSrc: '...',
}).then(({count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while injecting the manifest:',
      warnings.join('\n')
    );
  }

  console.log(`Injected a manifest which will precache ${count} files, totaling ${size} bytes.`);
});

Dadurch wird ein Precache-Manifest basierend auf den von Ihrer Konfiguration erkannten Dateien erstellt und in Ihre vorhandene Service Worker-Datei eingefügt.

Eine vollständige Liste der Konfigurationsoptionen finden Sie in der Referenzdokumentation.

Zusätzliche Modi

Wir gehen davon aus, dass generateSW oder injectManifest den Anforderungen der meisten Entwickler entsprechen. workbox-build unterstützt jedoch einen weiteren Modus, der für bestimmte Anwendungsfälle geeignet sein könnte.

getManifest-Modus

Das ist konzeptionell ähnlich wie der injectManifest-Modus. Anstatt das Manifest in die Quell-Service-Worker-Datei einzufügen, wird das Array der Manifesteinträge zusammen mit Informationen zur Anzahl der Einträge und zur Gesamtgröße zurückgegeben.

Sie können den Modus injectManifest in einem knotenbasierten Build-Skript mit den gängigsten Konfigurationsoptionen verwenden:

// Inside of build.js:
const {getManifest} = require('workbox-build');

// These are some common options, and not all are required.
// Consult the docs for more info.
getManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
}).then(({manifestEntries, count, size, warnings}) => {
  if (warnings.length > 0) {
    console.warn(
      'Warnings encountered while getting the manifest:',
      warnings.join('\n')
    );
  }

  // Do something with the manifestEntries, and potentially log count and size.
});

Eine vollständige Liste der Konfigurationsoptionen finden Sie in der Referenzdokumentation.

Typen

BasePartial

Attribute

  • additionalManifestEntries

    (String | ManifestEntry)[] optional

    Eine Liste der Einträge, die zusätzlich zu allen Einträgen, die im Rahmen der Build-Konfiguration generiert werden, vorab im Cache gespeichert werden sollen.

  • dontCacheBustURLsMatching

    RegExp optional

    Assets, die dieser Regel entsprechen, werden als eindeutig versioniert über ihre URL betrachtet und sind von der normalen HTTP-Cache-Umgehung ausgenommen, die beim Auffüllen des Precache erfolgt. Es ist zwar nicht erforderlich, aber es wird empfohlen, dass Sie einen regulären Ausdruck angeben, der dies erkennt, wenn in Ihrem bestehenden Build-Prozess bereits ein [hash]-Wert in jeden Dateinamen eingefügt wird. Dadurch wird die beim Pre-Caching verbrauchte Bandbreite reduziert.

  • manifestTransforms

    ManifestTransform[] optional

    Eine oder mehrere Funktionen, die sequenziell auf das generierte Manifest angewendet werden. Wenn auch modifyURLPrefix oder dontCacheBustURLsMatching angegeben sind, werden die entsprechenden Transformationen zuerst angewendet.

  • maximumFileSizeToCacheInBytes

    number optional

    Der Standardwert ist 2097152.

    Mit diesem Wert kann die maximale Größe von Dateien bestimmt werden, die vorab im Cache gespeichert werden. So wird verhindert, dass Sie versehentlich sehr große Dateien vorab im Cache speichern, die möglicherweise versehentlich einem Ihrer Muster entsprechen.

  • modifyURLPrefix

    object optional

    Ein Objekt, das Stringpräfixe Ersetzungs-Stringwerten zuordnet. Damit lässt sich beispielsweise ein Pfadpräfix aus einem Manifesteintrag entfernen oder hinzufügen, wenn Ihre Webhosting-Konfiguration nicht mit Ihrer lokalen Dateisystemkonfiguration übereinstimmt. Alternativ können Sie die Option manifestTransforms verwenden und eine Funktion bereitstellen, die die Einträge im Manifest mit der von Ihnen angegebenen Logik ändert.

    Nutzungsbeispiel:

    // Replace a '/dist/' prefix with '/', and also prepend
// '/static' to every URL.
modifyURLPrefix: {
  '/dist/': '/',
  '': '/static',
}

BuildResult

Typ

Omit<GetManifestResult"manifestEntries"
> & object

Attribute

  • filePaths

    String[]

GeneratePartial

Attribute

  • babelPresetEnvTargets

    string[] optional

    Der Standardwert ist ["chrome >= 56"].

    Die Ziele, die beim Transpilieren des Service Worker-Bundles an babel-preset-env übergeben werden sollen.

  • cacheId

    String optional

    Eine optionale ID, die Cache-Namen vorangestellt wird. Dies ist vor allem für die lokale Entwicklung nützlich, bei der mehrere Websites vom selben http://localhost:port-Ursprung aus bereitgestellt werden.

  • cleanupOutdatedCaches

    Boolesch optional

    Der Standardwert ist false.

    Gibt an, ob Workbox versuchen soll, alle von älteren, inkompatiblen Versionen erstellten Vorabcaches zu identifizieren und zu löschen.

  • clientsClaim

    Boolesch optional

    Der Standardwert ist false.

    Gibt an, ob der Service Worker sofort die Kontrolle über alle vorhandenen Clients übernehmen soll, sobald er aktiviert wird.

  • directoryIndex

    String optional

    Wenn eine Navigationsanfrage für eine URL, die mit / endet, nicht mit einer vorab im Cache gespeicherten URL übereinstimmt, wird dieser Wert an die URL angehängt und es wird geprüft, ob eine Übereinstimmung mit dem Vorab-Cache vorliegt. Dieser Wert sollte auf den Wert festgelegt werden, den Ihr Webserver für seinen Verzeichnisindex verwendet.

  • disableDevLogs

    Boolesch optional

    Der Standardwert ist false.

  • ignoreURLParametersMatching

    RegExp[] optional

    Alle Namen von Suchparametern, die mit einem der regulären Ausdrücke in diesem Array übereinstimmen, werden entfernt, bevor nach einer Übereinstimmung im Precache gesucht wird. Das ist nützlich, wenn Nutzer möglicherweise URLs anfordern, die beispielsweise URL-Parameter enthalten, mit denen die Quelle des Traffics erfasst wird. Wenn keine Angabe erfolgt, beträgt der Standardwert [/^utm_/, /^fbclid$/].

  • importScripts

    string[] optional

    Eine Liste der JavaScript-Dateien, die an importScripts() in der generierten Service Worker-Datei übergeben werden sollen. Das ist nützlich, wenn Sie möchten, dass Workbox Ihre Service Worker-Datei der obersten Ebene erstellt, aber zusätzlichen Code einfügen möchten, z. B. einen Push-Ereignis-Listener.

  • inlineWorkboxRuntime

    Boolesch optional

    Der Standardwert ist false.

    Gibt an, ob der Laufzeitcode für die Workbox-Bibliothek in den Service Worker der obersten Ebene aufgenommen oder in eine separate Datei aufgeteilt werden soll, die zusammen mit dem Service Worker bereitgestellt werden muss. Wenn die Laufzeit separat gehalten wird, müssen Nutzer den Workbox-Code nicht jedes Mal neu herunterladen, wenn sich Ihr Service Worker der obersten Ebene ändert.

  • Modus

    String optional

    Der Standardwert ist „production“.

    Wenn diese Option auf „production“ festgelegt ist, wird ein optimiertes Service Worker-Bundle ohne Debugging-Informationen erstellt. Wenn hier keine explizite Konfiguration erfolgt, wird der Wert process.env.NODE_ENV verwendet. Andernfalls wird auf 'production' zurückgegriffen.

  • navigateFallback

    String optional

    Der Standardwert ist null.

    Falls angegeben, werden alle Navigationsanfragen für URLs, die nicht vorab im Cache gespeichert sind, mit dem HTML-Code unter der angegebenen URL erfüllt. Sie müssen die URL eines HTML-Dokuments übergeben, das in Ihrem Precache-Manifest aufgeführt ist. Diese Funktion ist für Single-Page-Apps vorgesehen, in denen für alle Navigationsvorgänge ein gemeinsames App-Shell-HTML verwendet werden soll.

  • navigateFallbackAllowlist

    RegExp[] optional

    Ein optionales Array regulärer Ausdrücke, das einschränkt, auf welche URLs das konfigurierte navigateFallback-Verhalten angewendet wird. Das ist nützlich, wenn nur ein Teil der URLs Ihrer Website als Teil einer Single-Page-App behandelt werden soll. Wenn sowohl navigateFallbackDenylist als auch navigateFallbackAllowlist konfiguriert sind, hat die Denylist Vorrang.

    Hinweis: Diese regulären Ausdrücke können bei jeder Navigation für jede Ziel-URL ausgewertet werden. Vermeiden Sie die Verwendung komplexer regulärer Ausdrücke, da Nutzer sonst möglicherweise Verzögerungen beim Navigieren auf Ihrer Website feststellen.

  • navigateFallbackDenylist

    RegExp[] optional

    Ein optionales Array regulärer Ausdrücke, das einschränkt, auf welche URLs das konfigurierte navigateFallback-Verhalten angewendet wird. Das ist nützlich, wenn nur eine Teilmenge der URLs Ihrer Website als Teil einer Single-Page-App behandelt werden soll. Wenn sowohl navigateFallbackDenylist als auch navigateFallbackAllowlist konfiguriert sind, hat die Sperrliste Vorrang.

    Hinweis: Diese regulären Ausdrücke können bei jeder Navigation für jede Ziel-URL ausgewertet werden. Vermeiden Sie die Verwendung komplexer regulärer Ausdrücke, da Nutzer sonst möglicherweise Verzögerungen beim Navigieren auf Ihrer Website feststellen.

  • navigationPreload

    Boolesch optional

    Der Standardwert ist false.

    Gibt an, ob Navigation Preload im generierten Service Worker aktiviert werden soll. Wenn diese Option auf „true“ gesetzt ist, müssen Sie auch runtimeCaching verwenden, um eine geeignete Antwortstrategie einzurichten, die mit Navigationsanfragen übereinstimmt und die vorab geladene Antwort nutzt.

  • offlineGoogleAnalytics

    boolean | GoogleAnalyticsInitializeOptions optional

    Der Standardwert ist false.

    Legt fest, ob Unterstützung für Offline-Google Analytics enthalten sein soll. Wenn true, wird der Aufruf von workbox-google-analyticss initialize() zu Ihrem generierten Service Worker hinzugefügt. Wenn ein Object festgelegt ist, wird dieses Objekt an den initialize()-Aufruf übergeben, sodass Sie das Verhalten anpassen können.

  • runtimeCaching

    RuntimeCaching[] optional

    Wenn Sie die Build-Tools von Workbox verwenden, um Ihren Service Worker zu generieren, können Sie eine oder mehrere Laufzeit-Caching-Konfigurationen angeben. Diese werden dann mithilfe der von Ihnen definierten Konfiguration für Abgleich und Handler in workbox-routing.registerRoute-Aufrufe übersetzt.

    Eine vollständige Liste der Optionen finden Sie in der Dokumentation zu workbox-build.RuntimeCaching. Das folgende Beispiel zeigt eine typische Konfiguration mit zwei definierten Laufzeitrouten:

  • skipWaiting

    Boolesch optional

    Der Standardwert ist false.

    Gibt an, ob dem generierten Service Worker ein bedingungsloser Aufruf von skipWaiting() hinzugefügt werden soll. Wenn false, wird stattdessen ein message-Listener hinzugefügt, sodass Clientseiten skipWaiting() auslösen können, indem sie postMessage({type: 'SKIP_WAITING'}) für einen wartenden Service Worker aufrufen.

  • sourcemap

    Boolesch optional

    Der Standardwert ist true.

    Gibt an, ob eine Sourcemap für die generierten Service Worker-Dateien erstellt werden soll.

GenerateSWOptions

Typ

BasePartial, GlobPartial, GeneratePartial, RequiredSWDestPartial und OptionalGlobDirectoryPartial

GetManifestOptions

Typ

BasePartial, GlobPartial und RequiredGlobDirectoryPartial

GetManifestResult

Attribute

  • Anzahl

    Zahl

  • manifestEntries

    ManifestEntry[]

  • Größe

    Zahl

  • Warnungen

    String[]

GlobPartial

Attribute

  • globFollow

    Boolesch optional

    Der Standardwert ist true.

    Gibt an, ob beim Generieren des Precache-Manifests Symlinks gefolgt werden soll. Weitere Informationen finden Sie in der Definition von follow in der glob Dokumentation.

  • globIgnores

    string[] optional

    Der Standardwert ist ["**\/node_modules\/**\/*"].

    Eine Reihe von Mustern, die mit Dateien übereinstimmen, die beim Generieren des Precache-Manifests immer ausgeschlossen werden sollen. Weitere Informationen finden Sie in der Definition von ignore in der glob Dokumentation.

  • globPatterns

    string[] optional

    Der Standardwert ist ["**\/*.{js,wasm,css,html}"].

    Dateien, die einem dieser Muster entsprechen, werden in das Precache-Manifest aufgenommen. Weitere Informationen finden Sie in der glob-Kurzanleitung.

  • templatedURLs

    object optional

    Wenn eine URL basierend auf einer serverseitigen Logik gerendert wird, kann ihr Inhalt von mehreren Dateien oder einem anderen eindeutigen Stringwert abhängen. Die Schlüssel in diesem Objekt sind serverseitig gerenderte URLs. Wenn die Werte ein String-Array sind, werden sie als glob-Muster interpretiert. Der Inhalt aller Dateien, die mit den Mustern übereinstimmen, wird verwendet, um die URL eindeutig zu versionieren. Wenn es mit einem einzelnen String verwendet wird, wird es als eindeutige Versionsinformationen interpretiert, die Sie für eine bestimmte URL generiert haben.

InjectManifestOptions

Typ

BasePartial, GlobPartial, InjectPartial, RequiredSWDestPartial und RequiredGlobDirectoryPartial

InjectPartial

Attribute

  • injectionPoint

    String optional

    Der Standardwert ist "self.__WB_MANIFEST".

    Der String, der in der Datei swSrc gesucht werden soll. Wenn sie gefunden wird, wird sie durch das generierte Precache-Manifest ersetzt.

  • swSrc

    String

    Der Pfad und der Dateiname der Service Worker-Datei, die während des Build-Prozesses relativ zum aktuellen Arbeitsverzeichnis gelesen wird.

ManifestEntry

Attribute

  • Integrität

    String optional

  • Revision

    String

  • URL

    String

ManifestTransform()

workbox-build.ManifestTransform(
  manifestEntries: (ManifestEntry & object)[],
  compilation?: unknown,
): Promise<ManifestTransformResult> | ManifestTransformResult

Typ

Funktion

Parameter

  • manifestEntries

    (ManifestEntry & object)[]

    • Größe

      Zahl

  • Compilation

    unbekannt optional

Ausgabe

ManifestTransformResult

Attribute

  • Manifest

    (ManifestEntry & object)[]

    • Größe

      Zahl

  • Warnungen

    string[] optional

OptionalGlobDirectoryPartial

Attribute

  • globDirectory

    String optional

    Das lokale Verzeichnis, mit dem globPatterns abgeglichen werden soll. Der Pfad bezieht sich auf das aktuelle Verzeichnis.

RequiredGlobDirectoryPartial

Attribute

  • globDirectory

    String

    Das lokale Verzeichnis, mit dem globPatterns abgeglichen werden soll. Der Pfad bezieht sich auf das aktuelle Verzeichnis.

RequiredSWDestPartial

Attribute

  • swDest

    String

    Der Pfad und der Dateiname der Service Worker-Datei, die vom Build-Prozess relativ zum aktuellen Arbeitsverzeichnis erstellt wird. Es muss auf „.js“ enden.

RuntimeCaching

Attribute

StrategyName

Enum

"CacheFirst"

"CacheOnly"

"NetworkFirst"

"NetworkOnly"

„StaleWhileRevalidate“

WebpackGenerateSWOptions

Typ

BasePartial, WebpackPartial, GeneratePartial und WebpackGenerateSWPartial

WebpackGenerateSWPartial

Attribute

  • importScriptsViaChunks

    string[] optional

    Ein oder mehrere Namen von Webpack-Chunks. Der Inhalt dieser Chunks wird über einen Aufruf von importScripts() in den generierten Service Worker aufgenommen.

  • swDest

    String optional

    Der Standardwert ist "service-worker.js".

    Der Asset-Name der Service Worker-Datei, die von diesem Plug-in erstellt wurde.

WebpackInjectManifestOptions

Typ

BasePartial, WebpackPartial, InjectPartial und WebpackInjectManifestPartial

WebpackInjectManifestPartial

Attribute

  • compileSrc

    Boolesch optional

    Der Standardwert ist true.

    Wenn true (Standardeinstellung) festgelegt ist, wird die Datei swSrc von webpack kompiliert. Wenn false, findet keine Kompilierung statt und webpackCompilationPlugins kann nicht verwendet werden. Auf false setzen, wenn Sie das Manifest z.B. in eine JSON-Datei einfügen möchten.

  • swDest

    String optional

    Der Asset-Name der Service Worker-Datei, die von diesem Plug-in erstellt wird. Wenn nichts angegeben ist, basiert der Name auf dem Namen von swSrc.

  • webpackCompilationPlugins

    any[] optional

    Optionale webpack-Plug-ins, die beim Kompilieren der Eingabedatei swSrc verwendet werden. Nur gültig, wenn compileSrc true ist.

WebpackPartial

Attribute

  • Chunks

    string[] optional

    Ein oder mehrere Chunks, deren entsprechende Ausgabedateien in das Precache-Manifest aufgenommen werden sollen.

  • Ausschließen

    (string | RegExp | function)[] optional

    Ein oder mehrere Spezifizierer, mit denen Assets aus dem Precache-Manifest ausgeschlossen werden. Die Interpretation erfolgt nach denselben Regeln wie bei der Standardoption exclude von webpack. Wenn kein Wert angegeben wird, ist der Standardwert [/\.map$/, /^manifest.*\.js$].

  • excludeChunks

    string[] optional

    Ein oder mehrere Chunk-Namen, deren entsprechende Ausgabedateien aus dem Precache-Manifest ausgeschlossen werden sollen.

  • enthalten

    (string | RegExp | function)[] optional

    Ein oder mehrere Spezifizierer, mit denen Assets in das Precache-Manifest aufgenommen werden. Die Interpretation erfolgt nach denselben Regeln wie bei der Standardoption include von webpack.

  • Modus

    String optional

    Wenn diese Option auf „production“ gesetzt ist, wird ein optimiertes Service Worker-Bundle ohne Debugging-Informationen erstellt. Wenn hier nicht explizit konfiguriert, wird der in der aktuellen webpack-Kompilierung konfigurierte mode-Wert verwendet.

Methoden

copyWorkboxLibraries()

workbox-build.copyWorkboxLibraries(
  destDirectory: string,
): Promise<string>

Dadurch wird eine Reihe von Laufzeitbibliotheken, die von Workbox verwendet werden, in ein lokales Verzeichnis kopiert, das zusammen mit Ihrer Service Worker-Datei bereitgestellt werden sollte.

Als Alternative zur Bereitstellung dieser lokalen Kopien können Sie stattdessen Workbox über die offizielle CDN-URL verwenden.

Diese Methode wird für Entwickler bereitgestellt, die workbox-build.injectManifest verwenden und die CDN-Kopien von Workbox nicht nutzen möchten. Entwickler, die workbox-build.generateSW verwenden, müssen diese Methode nicht explizit aufrufen.

Parameter

  • destDirectory

    String

    Der Pfad zum übergeordneten Verzeichnis, in dem das neue Verzeichnis mit Bibliotheken erstellt wird.

Ausgabe

  • Promise<string>

    Der Name des neu erstellten Verzeichnisses.

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
): Promise<BuildResult>

Bei dieser Methode wird anhand der von Ihnen angegebenen Optionen eine Liste von URLs zum Vorab-Caching erstellt, das sogenannte „Vorab-Cache-Manifest“.

Außerdem werden zusätzliche Optionen berücksichtigt, mit denen das Verhalten des Service Workers konfiguriert wird, z. B. alle runtimeCaching-Regeln, die verwendet werden sollen.

Anhand des Precache-Manifests und der zusätzlichen Konfiguration wird eine einsatzbereite Service Worker-Datei unter swDest auf die Festplatte geschrieben.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, size, warnings} = await generateSW({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
  swDest: '...',
});

Parameter

Ausgabe

getManifest()

workbox-build.getManifest(
  config: GetManifestOptions,
): Promise<GetManifestResult>

Diese Methode gibt eine Liste von URLs zurück, die vorab im Cache gespeichert werden sollen. Diese Liste wird als „Precache-Manifest“ bezeichnet. Außerdem werden Details zur Anzahl der Einträge und zu ihrer Größe zurückgegeben, basierend auf den von Ihnen angegebenen Optionen.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, manifestEntries, size, warnings} = await getManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
});

Parameter

Ausgabe

getModuleURL()

workbox-build.getModuleURL(
  moduleName: string,
  buildType: BuildType,
): string

Parameter

  • moduleName

    String

  • buildType

    BuildType

Ausgabe

  • String

injectManifest()

workbox-build.injectManifest(
  config: InjectManifestOptions,
): Promise<BuildResult>

Bei dieser Methode wird anhand der von Ihnen angegebenen Optionen eine Liste von URLs zum Vorab-Caching erstellt, das sogenannte „Vorab-Cache-Manifest“.

Das Manifest wird in die Datei swSrc eingefügt. Der Platzhalterstring injectionPoint bestimmt, an welcher Stelle in der Datei das Manifest eingefügt werden soll.

Die endgültige Service Worker-Datei mit dem eingefügten Manifest wird unter swDest auf die Festplatte geschrieben.

Bei dieser Methode wird die Datei swSrc nicht kompiliert oder gebündelt. Es wird nur das Manifest eingefügt.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
const {count, size, warnings} = await injectManifest({
  dontCacheBustURLsMatching: [new RegExp('...')],
  globDirectory: '...',
  globPatterns: ['...', '...'],
  maximumFileSizeToCacheInBytes: ...,
  swDest: '...',
  swSrc: '...',
});

Parameter

Ausgabe