Diese Seite wurde von der Cloud Translation API übersetzt.

workbox-webpack-plugin

Workbox bietet zwei Webpack-Plug-ins: eines, das einen vollständigen Service Worker für Sie generiert, und eines, das eine Liste von Assets zum Vorab-Caching generiert, die in eine Service Worker-Datei eingefügt wird.

Die Plug-ins sind als zwei Klassen im Modul workbox-webpack-plugin implementiert, die GenerateSW und InjectManifest heißen. Die Antworten auf die folgenden Fragen können Ihnen bei der Auswahl des richtigen Plug-ins und der richtigen Konfiguration helfen.

Welches Plug-in ist das richtige?

`GenerateSW`

Das GenerateSW-Plug-in erstellt eine Service Worker-Datei für Sie und fügt sie der Webpack-Asset-Pipeline hinzu.

Verwendung von `GenerateSW`

Sie möchten Dateien vorab im Cache speichern.
Ihre Anforderungen an das Caching von Laufzeiten sind einfach.

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`

Das InjectManifest-Plug-in generiert eine Liste der URLs, die vorzeitig im Cache gespeichert werden sollen, und fügt dieses Pre-Cache-Manifest einer vorhandenen Service Worker-Datei hinzu. Andernfalls bleibt die Datei unverändert.

Verwendung von `InjectManifest`

Sie möchten mehr Kontrolle über Ihren Service Worker.
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 einen Service Worker am einfachsten zu Ihrer Website hinzufügen.

GenerateSW-Plug-in

Sie können das GenerateSW-Plug-in Ihrer Webpack-Konfiguration so hinzufügen:

// Inside of webpack.config.js:
const {GenerateSW} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new GenerateSW({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      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: ...,
    }),
  ],
};

Dadurch wird ein Service Worker mit einer Pre-Caching-Einrichtung für alle von Ihrer Konfiguration erfassten Webpack-Assets und den bereitgestellten Laufzeit-Caching-Regeln generiert.

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

`InjectManifest` Plug-in

So fügen Sie Ihrer Webpack-Konfiguration das InjectManifest-Plug-in hinzu:

// Inside of webpack.config.js:
const {InjectManifest} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new InjectManifest({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      swSrc: '...',
    }),
  ],
};

Dadurch wird ein Pre-Cache-Manifest basierend auf den von Ihrer Konfiguration abgerufenen Webpack-Assets erstellt und in die gebundelte und kompilierte Service Worker-Datei eingefügt.

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

Zusätzliche Informationen

Eine Anleitung zur Verwendung der Plug-ins im Kontext eines größeren Webpack-Builds finden Sie im Abschnitt Progressive Web Application der Webpack-Dokumentation.

Typen

GenerateSW

Diese Klasse unterstützt das Erstellen einer neuen, sofort einsatzbereiten Service Worker-Datei im Rahmen des Webpack-Kompilierungsprozesses.

Verwenden Sie eine Instanz von GenerateSW im plugins-Array einer Webpack-Konfiguration.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new GenerateSW({
  exclude: [/.../, '...'],
  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: ...,
});

Attribute

Konstruktor

void

Erstellt eine Instanz von GenerateSW.

Die constructor-Funktion sieht so aus:
```
(config?: GenerateSWConfig) => {...}
```
- config
  
  GenerateSWConfig optional
- Gibt zurück
  GenerateSW
config

GenerateSWConfig

GenerateSWConfig

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

string[] optional
Standardwert: ["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 Cachenamen vorangestellt werden soll. Dies ist vor allem für die lokale Entwicklung nützlich, bei der mehrere Websites von derselben http://localhost:port-Quelle ausgeliefert werden können.
chunks

string[] optional

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

boolescher Wert optional
Der Standardwert ist 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 steuern soll, sobald er aktiviert wird.
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. Hier sollte festgelegt werden, was Ihr Webserver für seinen Verzeichnisindex verwendet.
disableDevLogs

Boolescher Wert optional
Standardwert: false
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. Es ist zwar nicht erforderlich, aber wenn der vorhandene Build-Prozess bereits einen [hash]-Wert in jeden Dateinamen einfügt, sollten Sie einen RegExp-Wert angeben, der dies erkennt, da dadurch die beim Precaching verbrauchte Bandbreite reduziert wird.
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.
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 müssen. 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.
importScriptsViaChunks

string[] optional

Ein oder mehrere Namen von Webpack-Blöcken. Der Inhalt dieser Chunks wird über einen Aufruf von importScripts() in den generierten Service Worker aufgenommen.
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.
inlineWorkboxRuntime

boolescher Wert optional
Der Standardwert ist 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 Service Worker der obersten Ebene ändert.
manifestEntries

ManifestEntry[] optional
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

Zahl optional
Der Standardwert ist 2097152.

Mit diesem Wert lässt sich die maximale Größe von Dateien festlegen, die vorab im Cache gespeichert werden. Dadurch wird verhindert, dass Sie versehentlich sehr große Dateien im Cache speichern, die möglicherweise versehentlich mit einem Ihrer Muster übereinstimmen.
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.
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',
}
```
navigateFallback

String optional
Der Standardwert ist: 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 komplexe RegExp-Vorgänge. Andernfalls kann es für Nutzer zu Verzögerungen beim Navigieren auf Ihrer Website kommen.
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 komplexe RegExp-Vorgänge. Andernfalls kann es für Nutzer zu Verzögerungen beim Navigieren auf Ihrer Website kommen.
navigationPreload

boolescher Wert optional
Der Standardwert ist 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

Steuert, ob die Unterstützung für Google Analytics Offline berücksichtigt wird. Bei true wird der Aufruf des initialize() von workbox-google-analytics dem 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.
swDest

String optional
Standardwert: "service-worker.js"

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

InjectManifest

Diese Klasse unterstützt das Kompilieren einer über swSrc bereitgestellten Service Worker-Datei und das Einschleusen einer Liste von URLs und Versionsinformationen für das Pre-Caching basierend auf der Webpack-Asset-Pipeline in diesen Service Worker.

Verwenden Sie eine Instanz von InjectManifest im plugins-Array einer Webpack-Konfiguration.

Dieses Plug-in führt nicht nur das Manifest ein, sondern kompiliert auch die swSrc-Datei mit den Optionen aus der Haupt-Webpack-Konfiguration.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new InjectManifest({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  swSrc: '...',
});

Attribute

Konstruktor

void

Erstellt eine Instanz von InjectManifest.

Die constructor-Funktion sieht so aus:
```
(config: WebpackInjectManifestOptions) => {...}
```
- config
  
  WebpackInjectManifestOptions
- Gibt zurück
  InjectManifest
config

WebpackInjectManifestOptions

workbox-webpack-plugin

Welches Plug-in ist das richtige?

GenerateSW

Verwendung von GenerateSW

Wann GenerateSW NICHT verwendet werden sollte

InjectManifest

Verwendung von InjectManifest

Wann InjectManifest NICHT verwendet werden sollte

GenerateSW-Plug-in

InjectManifest Plug-in

Zusätzliche Informationen

Typen

GenerateSW

Attribute

GenerateSWConfig

Attribute

InjectManifest

Attribute

Attribute

default

Typ

Attribute

`GenerateSW`

Verwendung von `GenerateSW`

Wann `GenerateSW` NICHT verwendet werden sollte

`InjectManifest`

Verwendung von `InjectManifest`

Wann `InjectManifest` NICHT verwendet werden sollte

`InjectManifest` Plug-in