Workbox-Sw

Mit dem Modul workbox-sw können Sie ganz einfach loslegen. mit den Workbox-Modulen, vereinfacht das Laden der Workbox-Module bietet einige einfache Hilfsmethoden.

Sie können workbox-sw über unser CDN oder mit einer Reihe von Workbox-Dateien verwenden. auf Ihrem eigenen Server.

Workbox SW über CDN verwenden

Am einfachsten nutzen Sie dieses Modul über das CDN. Sie müssen nur Fügen Sie Ihrem Service Worker Folgendes hinzu:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

Damit haben Sie den workbox-Namespace in Ihrem Service Worker, der Zugriff auf alle Workbox-Module.

workbox.precaching.*
workbox.routing.*
etc

Wenn Sie anfangen, die zusätzlichen Module zu verwenden, ist das ein bisschen wie von Zauberhand.

Wenn Sie zum ersten Mal auf ein Modul verweisen, erkennt workbox-sw dies und laden Sie das Modul, bevor Sie es verfügbar machen. Sie können sehen, was passiert in auf dem Tab „Network“ in den Entwicklertools.

Workbox-Bibliotheken werden in Entwicklertools geladen

Diese Dateien werden von Ihrem Browser im Cache gespeichert, damit sie für zukünftige Zwecke verfügbar sind für die Offlinenutzung.

Lokale Workbox-Dateien anstelle von CDN verwenden

Wenn Sie das CDN nicht verwenden möchten, können Sie ganz einfach zu Workbox-Dateien wechseln. auf Ihrer eigenen Domain gehostet werden.

Die einfachste Methode besteht darin, die Dateien über den Befehl copyLibraries von workbox-cli abzurufen und dann workbox-sw, wo diese Dateien über die Konfigurationsoption modulePathPrefix zu finden sind.

Wenn Sie die Dateien unter /third_party/workbox-vX.Y.Z/ ablegen, verwenden Sie sie so:

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});

Asynchrone Importe vermeiden

Im Grunde umfasst das erstmalige Laden neuer Module den Aufruf importScripts() durch den Pfad zur entsprechenden JavaScript-Datei (entweder auf dem CDN oder über eine lokale URL gehostet). In beiden Fällen gilt eine wichtige Einschränkung: Die impliziten Aufrufe von importScripts() können nur innerhalb des install-Handlers eines Service Workers oder während des synchronen erste Ausführung des Service Worker-Skripts

Um Verstöße gegen diese Einschränkung zu vermeiden, empfiehlt es sich, auf die verschiedenen workbox.*-Namespaces außerhalb von Event-Handlern oder asynchronen Funktionen.

Der folgende Service Worker-Code der obersten Ebene ist in Ordnung:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will work!
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst()
);

Der folgende Code könnte jedoch ein Problem darstellen, wenn Sie nicht workbox.strategies nirgendwo in Ihrem Service Worker:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
    // outside of the initial, synchronous service worker execution.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

Wenn Sie Code schreiben müssen, der sonst gegen diese Einschränkung verstoßen würde, können Sie explizit den importScripts()-Aufruf mithilfe der Methode workbox.loadModule()-Methode:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Referencing workbox.strategies will now work as expected.
    const cacheFirst = new workbox.strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

Alternativ können Sie einen Verweis auf die relevanten Namespaces außerhalb Ihrer Event-Handler erstellen. und diese Referenz später verwenden:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('.png')) {
    // Using the previously-initialized strategies will work as expected.
    const cacheFirst = new strategies.CacheFirst();
    event.respondWith(cacheFirst.handle({request: event.request}));
  }
});

Verwendung von Debug- oder Produktions-Builds erzwingen

Alle Workbox-Module enthalten zwei Builds, einen Debug-Build, enthält Logging und zusätzliche Typprüfung sowie einen Produktions-Build, die Protokollierung und Typprüfung.

Standardmäßig verwendet workbox-sw den Debug-Build für Websites auf localhost. Für jeden anderen Ursprung verwendet er den Produktions-Build.

Wenn Sie Fehlerbehebungs- oder Produktions-Builds erzwingen möchten, können Sie die Konfiguration debug festlegen. Option:

workbox.setConfig({
  debug: true,
});

Code mithilfe von Importanweisungen zur Verwendung von workbox-sw konvertieren

Beim Laden der Workbox mit workbox-sw erfolgt der Zugriff auf alle Workbox-Pakete über den globalen Namespace workbox.*.

Wenn Sie ein Codebeispiel mit import-Anweisungen haben, die Sie umwandeln möchten Um workbox-sw zu verwenden, müssen Sie nur workbox-sw laden und alle import-Anweisungen durch lokale Variablen ersetzen, die auf diese Module im globalen Namespace.

Das funktioniert, weil jedes in npm veröffentlichte Service Worker-Paket von Workbox auch mit verfügbar im globalen Namespace workbox über ein camelCase-Version des Namens (z.B. finden Sie alle Module, die aus dem workbox-precaching-npm-Paket exportiert wurden: workbox.precaching.* Alle aus dem Modul exportierten Module workbox-background-sync-npm-Paket ist zu finden unter workbox.backgroundSync.*).

Im Folgenden finden Sie als Beispiel Code, der import-Anweisungen verwendet, die auf Workbox-Module:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);

Und hier ist derselbe Code zur Verwendung von workbox-sw neu geschrieben. Beachten Sie, dass nur der Importanweisungen geändert (die Logik wurde nicht geändert):

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
  })
);