Workbox-Build

Das workbox-build-Modul lässt sich in einen nodebasierten Buildprozess 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 werden, sind generateSW und injectManifest. Anhand der Antworten auf die folgenden Fragen können Sie den richtigen Modus und die richtige Konfiguration auswählen.

Welchen Modus verwenden?

generateSW

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

Verwendung von generateSW

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

Wann generateSW NICHT verwendet werden sollte

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

injectManifest

Im Modus injectManifest wird eine Liste der URLs generiert, die vorzeitig im Cache gespeichert werden sollen. Dieses Pre-Cache-Manifest wird einer vorhandenen Service Worker-Datei hinzugefügt. Andernfalls bleibt die Datei unverändert.

Verwendung von injectManifest

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

Wann injectManifest NICHT verwendet werden sollte

  • Sie möchten Ihrer Website auf die einfachste Weise einen Service Worker hinzufügen.

generateSW-Modus

Sie können den Modus generateSW in einem nodebasierten Build-Script mit den gängigsten Konfigurationsoptionen verwenden, z. B. so:

// 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 einer Pre-Caching-Einrichtung für alle Dateien generiert, die von Ihrer Konfiguration abgerufen werden, und die angegebenen Laufzeit-Caching-Regeln.

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

injectManifest-Modus

Sie können den Modus injectManifest in einem nodebasierten Build-Script mit den gängigsten Konfigurationsoptionen verwenden, z. B. so:

// 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 Pre-Cache-Manifest basierend auf den Dateien erstellt, die von Ihrer Konfiguration abgerufen wurden, 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 gerecht werden. Es gibt jedoch einen weiteren von workbox-build unterstützten Modus, der für bestimmte Anwendungsfälle geeignet sein könnte.

getManifest-Modus

Das ist konzeptionell dem Modus injectManifest ähnlich. Anstatt das Manifest jedoch in die Datei des Quell-Dienst-Workers 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 nodebasierten Build-Script mit den gängigsten Konfigurationsoptionen verwenden, z. B. so:

// 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 vor dem Caching gespeichert werden sollen, zusätzlich zu allen Einträgen, die im Rahmen der Build-Konfiguration generiert werden.

  • dontCacheBustURLsMatching

    Regex optional

    Für Assets, die diesem Muster entsprechen, wird davon ausgegangen, dass sie über ihre URL eindeutig versioniert sind. Sie werden von der normalen HTTP-Cache-Busting-Funktion ausgenommen, die beim Befüllen des Pre-Caches verwendet wird. Wenn Ihr vorhandener Buildprozess bereits einen [hash]-Wert in jeden Dateinamen einfügt, ist es zwar nicht erforderlich, aber empfehlenswert, ein RegExp anzugeben, das dies erkennt. Dadurch wird die beim Pre-Caching verbrauchte Bandbreite reduziert.

  • manifestTransforms

    ManifestTransform[] optional

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

  • maximumFileSizeToCacheInBytes

    number optional

    Standardwert: 2097152

    Mit diesem Wert lässt sich die maximale Größe von Dateien festlegen, die vorab im Cache gespeichert werden. So wird verhindert, dass sehr große Dateien versehentlich im Pre-Caching gespeichert werden, die möglicherweise versehentlich mit einem Ihrer Muster übereinstimmen.

  • modifyURLPrefix

    object optional

    Ein Objekt, das Stringpräfixe zu Ersatzstringwerten zuordnet. So können Sie beispielsweise ein Pfadpräfix aus einem Manifesteintrag entfernen oder hinzufügen, wenn Ihre Webhosting-Einrichtung nicht mit der Konfiguration Ihres lokalen Dateisystems übereinstimmt. Als flexiblere Alternative können Sie die Option manifestTransforms verwenden und eine Funktion angeben, die die Einträge im Manifest mithilfe 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

    Standardwert: ["chrome >= 56"]

    Die Ziele, die an babel-preset-env übergeben werden, wenn das Service Worker-Bundle transpiliert wird.

  • cacheId

    String optional

    Eine optionale ID, die Cachenamen vorangestellt werden soll. Dies ist vor allem für die lokale Entwicklung nützlich, bei der mehrere Websites vom selben http://localhost:port-Ursprung aus ausgeliefert werden können.

  • cleanupOutdatedCaches

    boolescher Wert optional

    Standardwert: false

    Ob Workbox versuchen soll, von älteren, inkompatiblen Versionen erstellte Pre-Caches zu identifizieren und zu löschen.

  • clientsClaim

    boolescher Wert optional

    Standardwert: false

    Gibt an, ob der Dienst-Worker vorhandene Clients sobald nach der Aktivierung steuern soll.

  • directoryIndex

    String optional

    Wenn eine Navigationsanfrage für eine URL, die auf / endet, nicht mit einer vorab im Cache gespeicherten URL übereinstimmt, wird dieser Wert an die URL angehängt und auf Übereinstimmung mit dem vorab im Cache gespeicherten Wert geprüft. Diese Einstellung sollte mit der Einstellung Ihres Webservers für den Verzeichnisindex übereinstimmen.

  • disableDevLogs

    boolescher Wert optional

    Standardwert: false

  • ignoreURLParametersMatching

    RegExp[] optional

    Alle Suchparameternamen, die mit einem der Regex-Objekte in diesem Array übereinstimmen, werden entfernt, bevor nach einer Übereinstimmung für die Vorab-Caching-Funktion gesucht wird. Das ist nützlich, wenn Ihre Nutzer URLs anfordern, die beispielsweise URL-Parameter enthalten, mit denen die Quelle der Zugriffe erfasst wird. Wenn keine Angabe erfolgt, beträgt der Standardwert [/^utm_/, /^fbclid$/].

  • importScripts

    string[] optional

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

  • inlineWorkboxRuntime

    boolescher Wert optional

    Standardwert: false

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

  • Modus

    String optional

    Standardwert: „production“

    Wenn „production“ festgelegt ist, wird ein optimiertes Service Worker-Bundle ohne Informationen zur Fehlerbehebung erstellt. Wenn hier nicht explizit konfiguriert, wird der Wert process.env.NODE_ENV verwendet. Andernfalls wird 'production' verwendet.

  • navigateFallback

    String optional

    Standardwert: null

    Wenn Sie diese Option angeben, werden alle Navigationsanfragen für URLs, die nicht vorab im Cache gespeichert sind, mit dem HTML-Code an der angegebenen URL erfüllt. Du musst die URL eines HTML-Dokuments übergeben, das in deinem Pre-Cache-Manifest aufgeführt ist. Diese Funktion ist für ein Szenario mit einer Single-Page-App gedacht, bei dem für alle Navigationen eine gemeinsame App-Shell-HTML verwendet werden soll.

  • navigateFallbackAllowlist

    RegExp[] optional

    Ein optionales Array von regulären Ausdrücken, das einschränkt, für welche URLs das konfigurierte navigateFallback-Verhalten gilt. Dies 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 Deaktivierungsliste Vorrang.

    Hinweis: Diese regulären Ausdrücke können bei einer Navigation anhand jeder Ziel-URL ausgewertet werden. Vermeiden Sie die Verwendung von komplexen regulären Ausdrücken, da es sonst zu Verzögerungen bei der Navigation auf Ihrer Website kommen kann.

  • navigateFallbackDenylist

    RegExp[] optional

    Ein optionales Array von regulären Ausdrücken, das einschränkt, für welche URLs das konfigurierte navigateFallback-Verhalten gilt. Dies 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 Deaktivierungsliste Vorrang.

    Hinweis: Diese regulären Ausdrücke können bei einer Navigation anhand jeder Ziel-URL ausgewertet werden. Vermeiden Sie die Verwendung von komplexen regulären Ausdrücken, da es sonst zu Verzögerungen bei der Navigation auf Ihrer Website kommen kann.

  • navigationPreload

    boolescher Wert optional

    Standardwert: false

    Ob die Navigationsvorab-Ladefunktion im generierten Dienst-Worker aktiviert werden soll. Wenn „true“ festgelegt ist, müssen Sie auch runtimeCaching verwenden, um eine geeignete Antwortstrategie einzurichten, die Navigationsanfragen abgleicht, und die vorab geladene Antwort zu verwenden.

  • offlineGoogleAnalytics

    boolean | GoogleAnalyticsInitializeOptions optional

    Standardwert: false

    Hier legen Sie fest, ob Offline-Google Analytics unterstützt werden soll. Wenn true, wird der Aufruf von initialize() von workbox-google-analytics Ihrem generierten Service Worker hinzugefügt. Wenn Sie einen Object festlegen, 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 zum Generieren Ihres Dienst-Workers verwenden, können Sie eine oder mehrere Laufzeit-Caching-Konfigurationen angeben. Diese werden dann mithilfe der von Ihnen definierten Übereinstimmungs- und Handlerkonfiguration in workbox-routing.registerRoute-Aufrufe umgewandelt.

    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

    boolescher Wert optional

    Standardwert: false

    Gibt an, ob dem generierten Dienst-Worker ein unbedingter Aufruf von skipWaiting() hinzugefügt werden soll. Wenn false, wird stattdessen ein message-Listener hinzugefügt. So können Clientseiten skipWaiting() auslösen, indem postMessage({type: 'SKIP_WAITING'}) auf einen wartenden Dienstworker aufgerufen wird.

  • sourcemap

    boolescher Wert optional

    Standardwert: true

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

GenerateSWOptions

Typ

BasePartial & GlobPartial & GeneratePartial & RequiredSWDestPartial & OptionalGlobDirectoryPartial

GetManifestOptions

Typ

BasePartial & GlobPartial & RequiredGlobDirectoryPartial

GetManifestResult

Attribute

  • Anzahl

    Zahl

  • manifestEntries

    ManifestEntry[]

  • Größe

    Zahl

  • Warnungen

    String[]

GlobPartial

Attribute

  • globFollow

    boolescher Wert optional

    Standardwert: true

    Bestimmt, ob beim Generieren des Pre-Cache-Manifests auf Symbolverknüpfungen verwiesen wird. Weitere Informationen finden Sie in der Dokumentation zu glob in der Definition von follow.

  • globIgnores

    string[] optional

    Standardwert: ["**\/node_modules\/**\/*"]

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

  • globPatterns

    string[] optional

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

    Dateien, die einem dieser Muster entsprechen, werden in das Pre-Cache-Manifest aufgenommen. Weitere Informationen finden Sie im glob-Leitfaden.

  • globStrict

    boolescher Wert optional

    Standardwert: true

    Wenn diese Option aktiviert ist, führt ein Fehler beim Lesen eines Verzeichnisses beim Generieren eines Precache-Manifests zum Abbruch des Builds. Wenn „false“ festgelegt ist, wird das problematische Verzeichnis übersprungen. Weitere Informationen finden Sie in der Definition von strict in der Dokumentation zu glob.

  • 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 Array von Strings sind, werden sie als glob-Muster interpretiert. Der Inhalt aller Dateien, die den Mustern entsprechen, wird verwendet, um eine eindeutige Version der URL zu erstellen. Wenn Sie „"version"“ mit einem einzelnen String verwenden, wird es als eindeutige Versionsinformationen interpretiert, die Sie für eine bestimmte URL generiert haben.

InjectManifestOptions

Typ

BasePartial & GlobPartial & InjectPartial & RequiredSWDestPartial & RequiredGlobDirectoryPartial

InjectPartial

Attribute

  • injectionPoint

    String optional

    Standardwert: "self.__WB_MANIFEST"

    Der String, der in der Datei swSrc gefunden werden soll. Sobald es gefunden wurde, wird es durch das generierte Pre-Cache-Manifest ersetzt.

  • swSrc

    String

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

ManifestEntry

Attribute

  • Integrität

    String optional

  • Revision

    String

  • URL

    String

ManifestTransform()

workbox-build.ManifestTransform(
  manifestEntries: (ManifestEntry & object)[],
  compilation?: unknown,
)

Typ

Funktion

Parameter

  • manifestEntries

    (ManifestEntry & object)[]

    • Größe

      Zahl

  • Zusammenstellung

    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

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

RuntimeCaching

Attribute

StrategyName

Enum

„CacheFirst“

„CacheOnly“

„NetworkFirst“

„NetworkOnly“

„StaleWhileRevalidate“

WebpackGenerateSWOptions

Typ

BasePartial & WebpackPartial & GeneratePartial & 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

    Standardwert: "service-worker.js"

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

WebpackInjectManifestOptions

Typ

BasePartial & WebpackPartial & InjectPartial & WebpackInjectManifestPartial

WebpackInjectManifestPartial

Attribute

  • compileSrc

    boolescher Wert optional

    Standardwert: true

    Bei true (Standardeinstellung) wird die swSrc-Datei von webpack kompiliert. Bei false erfolgt keine Kompilierung und webpackCompilationPlugins kann nicht verwendet werden. Legen Sie false fest, wenn Sie das Manifest beispielsweise in eine JSON-Datei einschleusen möchten.

  • swDest

    String optional

    Der Asset-Name der Service Worker-Datei, die von diesem Plug-in erstellt wird. Wenn Sie diesen Parameter weglassen, wird der Name anhand des swSrc-Namens festgelegt.

  • webpackCompilationPlugins

    any[] optional

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

WebpackPartial

Attribute

  • chunks

    string[] optional

    Ein oder mehrere Chunk-Namen, deren entsprechende Ausgabedateien in das Pre-Cache-Manifest aufgenommen werden sollen.

  • Ausschließen

    (string | RegExp | function)[] optional

    Ein oder mehrere spezifische Angaben, mit denen Assets aus dem Pre-Cache-Manifest ausgeschlossen werden. Die Interpretation erfolgt nach denselben Regeln wie bei der Standardoption exclude von webpack. Wenn keine Angabe erfolgt, beträgt der Standardwert [/\.map$/, /^manifest.*\.js$].

  • excludeChunks

    string[] optional

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

  • enthalten

    (string | RegExp | function)[] optional

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

  • Modus

    String optional

    Wenn „production“ festgelegt ist, wird ein optimiertes Service Worker-Bundle ohne Informationen zur Fehlerbehebung erstellt. Wenn hier nicht explizit konfiguriert, wird der in der aktuellen webpack-Kompilierung konfigurierte mode-Wert verwendet.

Methoden

copyWorkboxLibraries()

workbox-build.copyWorkboxLibraries(
  destDirectory: string,
)

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

Alternativ können Sie Workbox über die offizielle CDN-URL bereitstellen.

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

Parameter

  • destDirectory

    String

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

Ausgabe

  • Promise<string>

    Der Name des neu erstellten Verzeichnisses.

generateSW()

workbox-build.generateSW(
  config: GenerateSWOptions,
)

Bei dieser Methode wird anhand der von Ihnen angegebenen Optionen eine Liste von URLs zum Vorab-Caching erstellt, die als „Precache-Manifest“ bezeichnet wird.

Außerdem werden zusätzliche Optionen berücksichtigt, mit denen das Verhalten des Dienstarbeiters konfiguriert wird, z. B. alle runtimeCaching-Regeln, die er verwenden soll.

Anhand des Pre-Cache-Manifests und der zusätzlichen Konfiguration wird eine gebrauchsfertige 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,
)

Diese Methode gibt eine Liste der URLs zurück, die vorzeitig im Cache gespeichert werden sollen (Pre-Cache-Manifest). Außerdem werden Details zur Anzahl der Einträge und ihrer Größe zurückgegeben, die auf den von Ihnen angegebenen Optionen basieren.

// 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,
)

Parameter

  • moduleName

    String

  • buildType

    BuildType

Ausgabe

  • String

injectManifest()

workbox-build.injectManifest(
  config: InjectManifestOptions,
)

Bei dieser Methode wird anhand der von Ihnen angegebenen Optionen eine Liste von URLs zum Vorab-Caching erstellt, die als „Precache-Manifest“ bezeichnet wird.

Das Manifest wird in die swSrc-Datei eingefügt. Der Platzhalterstring injectionPoint gibt an, wo 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 Ihre swSrc-Datei 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