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.

// 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: ...,
});