Workbox-Precaching

Ein Feature von Service Workern ist die Möglichkeit, eine Reihe von Dateien im Cache zu speichern, wenn der Service Worker installiert wird. Dies wird oft als "Precaching" bezeichnet, da Sie Inhalte vor dem verwendeten Service Worker im Cache speichern.

Der Hauptgrund dafür ist, dass Entwickler damit die Kontrolle über den Cache haben. Sie können so feststellen, wann und wie lange eine Datei im Cache gespeichert wird, und sie an den Browser senden, ohne das Netzwerk zu nutzen. So können sie Web-Apps erstellen, die offline ausgeführt werden.

Workbox entlastet das Precaching erheblich, indem es die API vereinfacht und dafür sorgt, dass Assets effizient heruntergeladen werden.

Funktionsweise der Workbox-Precaching

Wenn eine Web-App zum ersten Mal geladen wird, prüft workbox-precaching alle Assets, die Sie herunterladen möchten, entfernt alle Duplikate und verbindet die entsprechenden Service Worker-Ereignisse zum Herunterladen und Speichern der Assets. URLs, die bereits Versionsinformationen wie einen Inhalts-Hash enthalten, werden ohne weitere Änderungen als Cache-Schlüssel verwendet. Bei URLs, die keine Versionsinformationen enthalten, ist an ihren Cache-Schlüssel ein zusätzlicher URL-Suchparameter angehängt, der einen Hash ihrer Inhalte darstellt, den Workbox bei der Build-Erstellung generiert.

workbox-precaching führt all dies während des install-Ereignisses des Service Workers aus.

Wenn ein Nutzer Ihre Webanwendung später noch einmal aufruft und Sie einen neuen Service Worker mit anderen vorab im Cache gespeicherten Assets haben, prüft workbox-precaching die neue Liste und ermittelt anhand der Überarbeitung, welche Assets komplett neu sind und welche der vorhandenen Assets aktualisiert werden müssen. Alle neuen Assets oder Aktualisierungen von Versionen werden dem Cache während des install-Ereignisses des neuen Service Workers hinzugefügt.

Dieser neue Service Worker wird erst dann zum Antworten auf Anfragen verwendet, wenn das entsprechende activate-Ereignis ausgelöst wurde. Im activate-Ereignis sucht workbox-precaching nach im Cache gespeicherten Assets, die nicht mehr in der Liste der aktuellen URLs vorhanden sind, und entfernt diese aus dem Cache.

workbox-precaching führt diese Schritte bei jeder Installation und Aktivierung des Service Workers aus, um sicherzustellen, dass der Nutzer über die neuesten Assets verfügt, und lädt nur die geänderten Dateien herunter.

Vorab im Cache gespeicherte Antworten bereitstellen

Durch den Aufruf von precacheAndRoute() oder addRoute() wird eine Route erstellt, die Anfragen für vorab im Cache gespeicherte URLs entspricht.

Die in dieser Route verwendete Antwortstrategie ist cache-first: Die vorab im Cache gespeicherte Antwort wird verwendet, es sei denn, die Antwort im Cache ist aufgrund eines unerwarteten Fehlers nicht vorhanden. In diesem Fall wird stattdessen eine Netzwerkantwort verwendet.

Es ist wichtig, in welcher Reihenfolge Sie precacheAndRoute() oder addRoute() aufrufen. Normalerweise sollten Sie ihn früh in der Service Worker-Datei aufrufen, bevor Sie zusätzliche Routen mit registerRoute() registrieren. Wenn Sie zuerst registerRoute() aufgerufen haben und diese Route einer eingehenden Anfrage entspricht, wird für die Antwort die Strategie verwendet, die Sie in dieser zusätzlichen Route definiert haben, und nicht die von workbox-precaching verwendete Cache-First-Strategie.

Erläuterung der Precache-Liste

workbox-precaching erwartet ein Array von Objekten mit den Attributen url und revision. Dieses Array wird manchmal als Precache-Manifest bezeichnet:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

Diese Liste verweist auf eine Reihe von URLs mit jeweils eigenen Überarbeitungsinformationen.

Für das zweite und dritte Objekt im Beispiel oben ist das Attribut revision auf null gesetzt. Das liegt daran, dass sich die Informationen zur Überarbeitung in der URL selbst befinden, was im Allgemeinen eine Best Practice für statische Assets ist.

Das erste Objekt (/index.html) legt explizit ein Überarbeitungsattribut fest, bei dem es sich um einen automatisch generierten Hash des Dateiinhalts handelt. Im Gegensatz zu JavaScript- und CSS-Ressourcen können HTML-Dateien in ihren URLs in der Regel keine Überarbeitungsinformationen enthalten. Andernfalls funktionieren Links zu diesen Dateien im Web jedes Mal, wenn sich der Inhalt der Seite ändert.

Durch die Übergabe einer Überarbeitungseigenschaft an precacheAndRoute() weiß Workbox, wann sich die Datei geändert hat, und kann die Datei entsprechend aktualisieren.

Workbox enthält Tools, mit denen Sie diese Liste erstellen können:

  • workbox-build: Dies ist ein Knotenpaket, das in einer Gulp-Aufgabe oder als npm-Ausführungsskript verwendet werden kann.
  • workbox-webpack-plugin: Webpack-Nutzer können dieses Plug-in verwenden.
  • workbox-cli: Mit der Befehlszeile können Sie auch die Liste der Assets generieren und Ihrem Service Worker hinzufügen.

Eingehende Anfragen für vorab im Cache gespeicherte Dateien

Eine Sache, die workbox-precaching standardmäßig ausführt, ist die Manipulation der eingehenden Netzwerkanfragen, um vorab im Cache gespeicherte Dateien abzugleichen. Dies ermöglicht die Verwendung gängiger Praktiken im Web.

Eine Anfrage für / kann beispielsweise in der Regel von der Datei unter /index.html erfüllt werden.

Im Folgenden finden Sie eine Liste der Bearbeitungen, die workbox-precaching standardmäßig ausführt, und wie Sie dieses Verhalten ändern können.

URL-Parameter ignorieren

Anfragen mit Suchparametern können so geändert werden, dass bestimmte Werte oder alle Werte entfernt werden.

Standardmäßig werden Suchparameter, die mit utm_ beginnen oder genau mit fbclid übereinstimmen, entfernt. Das bedeutet, dass eine Anfrage für /about.html?utm_campaign=abcd mit einem vorab im Cache gespeicherten Eintrag für /about.html erfüllt wird.

Andere Suchparameter können Sie mit ignoreURLParametersMatching ignorieren:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

Verzeichnisindex

Anfragen, die mit / enden, werden standardmäßig mit Einträgen abgeglichen, an deren Ende ein index.html angehängt ist. Das bedeutet, dass eine eingehende Anfrage für / automatisch mit dem vorab im Cache gespeicherten Eintrag /index.html verarbeitet werden kann.

Sie können sie ändern oder vollständig deaktivieren, indem Sie directoryIndex festlegen:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

Bereinigte URLs

Wenn eine Anfrage nicht mit dem Vorcache übereinstimmt, fügen wir am Ende .html hinzu, um „saubere“ URLs (auch „pretty“ URLs genannt) zu unterstützen. Das bedeutet, dass eine Anfrage wie /about vom vorab im Cache gespeicherten Eintrag für /about.html verarbeitet wird.

Sie können dieses Verhalten deaktivieren, indem Sie cleanUrls festlegen:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

Benutzerdefinierte Manipulationen

Wenn Sie benutzerdefinierte Übereinstimmungen von eingehenden Anfragen mit vorab im Cache gespeicherten Assets definieren möchten, können Sie dies mit der Option urlManipulation tun. Dies sollte ein Callback sein, der ein Array möglicher Übereinstimmungen zurückgibt.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

Erweiterte Nutzung

PrecacheController direkt verwenden

Standardmäßig richtet workbox-precaching die Listener install und activate für Sie ein. Für Entwickler, die mit Service Workern vertraut sind, ist dies möglicherweise nicht empfehlenswert, wenn sie mehr Kontrolle benötigen.

Anstatt den Standardexport zu verwenden, können Sie direkt mit dem PrecacheController Elemente zum Vorcache hinzufügen und feststellen, wann diese Assets installiert und wann eine Bereinigung stattfinden soll.

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

Vorab im Cache gespeicherte Assets direkt lesen

Es kann vorkommen, dass Sie ein vorab im Cache gespeichertes Asset direkt außerhalb des Kontexts des Routings lesen müssen, das workbox-precaching automatisch ausführen kann. Sie können beispielsweise HTML-Vorlagen teilweise im Cache speichern, die dann abgerufen und beim Erstellen einer vollständigen Antwort verwendet werden müssen.

Im Allgemeinen können Sie die Cache Storage API verwenden, um die vorab im Cache gespeicherten Response-Objekte abzurufen. Es gibt jedoch eine Falten: Der URL-Cache-Schlüssel, der beim Aufruf von cache.match() verwendet werden muss, kann einen Versionsverwaltungsparameter enthalten, den workbox-precaching automatisch erstellt und verwaltet.

Um den richtigen Cache-Schlüssel zu erhalten, können Sie getCacheKeyForURL() aufrufen, die ursprüngliche URL übergeben und dann das Ergebnis verwenden, um einen cache.match() für den entsprechenden Cache auszuführen.

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

Wenn Sie nur das vorab im Cache gespeicherte Response-Objekt benötigen, können Sie alternativ matchPrecache() aufrufen, das automatisch den richtigen Cache-Schlüssel verwendet und im richtigen Cache sucht:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

Alte Precaches bereinigen

Die meisten Workbox-Releases haben dasselbe Format für die Speicherung von vorab im Cache gespeicherten Daten. Außerdem können Vor-Caches, die von älteren Versionen von Workbox erstellt wurden, von neueren Versionen in der Regel unverändert verwendet werden. In seltenen Fällen gibt es jedoch eine funktionsgefährdende Änderung beim Precaching des Speichers, sodass bestehende Nutzer alles noch einmal herunterladen müssen und zuvor vorab zwischengespeicherte Daten überflüssig machen. Eine solche Änderung gab es zwischen den Workbox-Versionen v3 und v4.

Diese veralteten Daten dürften den normalen Betrieb nicht beeinträchtigen, tragen aber zu Ihrer Gesamtnutzung des Speicherkontingents bei und es kann für Ihre Nutzer einfacher sein, sie explizit zu löschen. Fügen Sie dazu Ihrem Service Worker cleanupOutdatedCaches() hinzu oder legen Sie cleanupOutdatedCaches: true fest, wenn Sie den Service Worker mit einem der Build-Tools von Workbox generieren.

Unterressourcenintegrität verwenden

Einige Entwickler möchten möglicherweise die zusätzlichen Garantien, die von der Erzwingung der Unterressourcenintegrität angeboten werden, wenn vorab im Cache gespeicherte URLs aus dem Netzwerk abgerufen werden.

Die zusätzliche, optionale Eigenschaft integrity kann jedem Eintrag im Precache-Manifest hinzugefügt werden. Wenn angegeben, wird sie beim Erstellen des Request zum Füllen des Cache als integrity-Wert verwendet. Bei einer Abweichung schlägt der Precaching-Prozess fehl.

In den Build-Tools von Workbox kann nicht ermittelt werden, welche Pre-Cache-Manifesteinträge integrity-Attribute haben sollen und welche geeigneten Werte verwendet werden sollen. Entwickler, die diese Funktion aktivieren möchten, sollten stattdessen das von Workbox generierte Precache-Manifest ändern, um die entsprechenden Informationen selbst hinzuzufügen. Die Option manifestTransform in der Konfiguration der Build-Tools von Workbox kann Abhilfe schaffen:

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

Typen

CleanupResult

Attribute

  • deletedCacheRequests

    String[]

InstallResult

Attribute

  • notUpdatedURLs

    String[]

  • updatedURLs

    String[]

PrecacheController

Führt ein effizientes Precaching von Assets durch.

Attribute

  • Konstruktor

    void

    Erstellen Sie einen neuen PrecacheController.

    Die Funktion constructor sieht so aus: 

    (options?: PrecacheControllerOptions)=> {...}

    • Optionen

      PrecacheControllerOptions optional

  • Strategie

    Strategie

  • aktivieren

    void

    Löscht Assets, die im aktuellen Precache-Manifest nicht mehr vorhanden sind. Rufen Sie diese Methode aus dem Service Worker-Aktivierungsereignis auf.

    Hinweis: Diese Methode ruft event.waitUntil() für Sie auf, sodass Sie sie nicht selbst in Ihren Event-Handlern aufrufen müssen.

    Die Funktion activate sieht so aus: 

    (event: ExtendableEvent)=> {...}

    • event

      ExtendableEvent

  • addToCacheList

    void

    Mit dieser Methode werden der Precache-Liste Elemente hinzugefügt, Duplikate entfernt und sichergestellt, dass die Informationen gültig sind.

    Die Funktion addToCacheList sieht so aus: 

    (entries: (string|PrecacheEntry)[])=> {...}

    • entries

      (String|PrecacheEntry)[]

      Array mit Einträgen, die vorab im Cache gespeichert werden sollen.

  • createHandlerBoundToURL

    void

    Gibt eine Funktion zurück, die url im Vorabcache sucht (unter Berücksichtigung von Überarbeitungsinformationen) und den entsprechenden Response-Wert zurückgibt.

    Die Funktion createHandlerBoundToURL sieht so aus: 

    (url: string)=> {...}

    • url

      String

      Die vorab im Cache gespeicherte URL, die für die Suche nach Response verwendet wird.

  • getCacheKeyForURL

    void

    Gibt den Cache-Schlüssel zurück, der zum Speichern einer bestimmten URL verwendet wird. Wenn diese URL nicht versioniert ist, z. B. „/index.html“, ist der Cache-Schlüssel die ursprüngliche URL, an die ein Suchparameter angehängt wird.

    Die Funktion getCacheKeyForURL sieht so aus: 

    (url: string)=> {...}

    • url

      String

      Eine URL, deren Cache-Schlüssel Sie aufrufen möchten.

    • Gibt zurück

      String

      Die versionierte URL, die einem Cache-Schlüssel der ursprünglichen URL entspricht, oder nicht definiert, wenn diese URL nicht vorab im Cache gespeichert wird.

  • getCachedURLs

    void

    Gibt eine Liste aller URLs zurück, die vom aktuellen Service Worker vorab im Cache gespeichert wurden.

    Die Funktion getCachedURLs sieht so aus: 

    ()=> {...}

    • Gibt zurück

      String[]

      Die vorab im Cache gespeicherten URLs.

  • getIntegrityForCacheKey

    void

    Die Funktion getIntegrityForCacheKey sieht so aus: 

    (cacheKey: string)=> {...}

    • cacheKey

      String

    • Gibt zurück

      String

      Die Integrität der Unterressource, die dem Cache-Schlüssel zugeordnet ist, oder nicht definiert, wenn er nicht festgelegt ist.

  • getURLsToCacheKeys

    void

    Gibt eine Zuordnung einer vorab im Cache gespeicherten URL zum entsprechenden Cache-Schlüssel zurück, wobei die Überarbeitungsinformationen für die URL berücksichtigt werden.

    Die Funktion getURLsToCacheKeys sieht so aus: 

    ()=> {...}

    • Gibt zurück

      Map<string>

      Eine URL-zu-Cache-Schlüsselzuordnung.

  • installieren

    void

    Neue und aktualisierte Assets werden vorab im Cache gespeichert. Rufen Sie diese Methode aus dem Service Worker-Installationsereignis auf.

    Hinweis: Diese Methode ruft event.waitUntil() für Sie auf, sodass Sie sie nicht selbst in Ihren Event-Handlern aufrufen müssen.

    Die Funktion install sieht so aus: 

    (event: ExtendableEvent)=> {...}

    • event

      ExtendableEvent

  • matchPrecache

    void

    Dies dient als Drop-in-Ersatz für cache.match() mit den folgenden Unterschieden:

    • Es kennt den Namen des Vorcache und prüft nur in diesem Cache.
    • Sie können damit eine „Original“-URL ohne Versionsverwaltungsparameter übergeben. Es wird dann automatisch der richtige Cache-Schlüssel für die aktuell aktive Version dieser URL gesucht.

    Beispiel: matchPrecache('index.html') findet die richtige vorab im Cache gespeicherte Antwort für den aktuell aktiven Service Worker, auch wenn der tatsächliche Cache-Schlüssel '/index.html?__WB_REVISION__=1234abcd' ist.

    Die Funktion matchPrecache sieht so aus: 

    (request: string|Request)=> {...}

    • Request

      String|Anfrage

      Der Schlüssel (ohne Überarbeitungsparameter), der im Precache nachgeschlagen werden soll.

    • Gibt zurück

      Promise<Antwort>

  • vorab im Cache speichern

    void

    Fügt der Precache-Liste Elemente hinzu, entfernt alle Duplikate und speichert die Dateien im Cache.

    Diese Methode kann mehrmals aufgerufen werden.

    Die Funktion precache sieht so aus: 

    (entries: (string|PrecacheEntry)[])=> {...}

PrecacheEntry

Attribute

  • Integrität

    String optional

  • Revision

    String optional

  • url

    String

PrecacheFallbackPlugin

Mit PrecacheFallbackPlugin können Sie eine „Offline-Fallback“-Antwort angeben, die verwendet wird, wenn eine bestimmte Strategie keine Antwort generieren kann.

Dazu wird der Callback des handlerDidError-Plug-ins abgefangen und eine vorab im Cache gespeicherte Antwort zurückgegeben, wobei der erwartete Überarbeitungsparameter automatisch berücksichtigt wird.

Sofern Sie keine PrecacheController-Instanz explizit an den Konstruktor übergeben, wird die Standardinstanz verwendet. Generell verwenden die meisten Entwickler die Standardeinstellung.

Attribute

  • Konstruktor

    void

    Erstellt ein neues PrecacheFallbackPlugin mit der zugehörigen Fallback-URL.

    Die Funktion constructor sieht so aus: 

    (config: object)=> {...}

    • config

      Objekt

      • fallbackURL

        String

        Eine vorab im Cache gespeicherte URL, die als Fallback verwendet wird, wenn die verknüpfte Strategie keine Antwort generieren kann.

      • precacheController

        PrecacheController optional

PrecacheRoute

Eine abgeleitete Klasse von workbox-routing.Route, die eine workbox-precaching.PrecacheController-Instanz verwendet, um eingehende Anfragen abzugleichen und Abrufantworten aus dem Precache zu verarbeiten.

Attribute

PrecacheRouteOptions

Attribute

  • cleanURLs

    Boolescher Wert optional

  • directoryIndex

    String optional

  • ignoreURLParametersMatching

    Regulärer Ausdruck[] optional

  • urlManipulation

    urlManipulation optional

PrecacheStrategy

Eine workbox-strategies.Strategy-Implementierung, die speziell für die Zusammenarbeit mit workbox-precaching.PrecacheController entwickelt wurde, um vorab im Cache gespeicherte Assets sowohl im Cache zu speichern als auch abzurufen.

Hinweis: Eine Instanz dieser Klasse wird beim Erstellen eines PrecacheController automatisch erstellt. Im Allgemeinen ist es nicht erforderlich, sie selbst zu erstellen.

Attribute

  • Konstruktor

    void

    Die Funktion constructor sieht so aus: 

    (options?: PrecacheStrategyOptions)=> {...}

    • Optionen

      PrecacheStrategyOptions optional

  • cacheName

    String

  • fetchOptions

    RequestInit optional

  • matchOptions

    CacheQueryOptions optional

  • plugins

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    WorkboxPlugin

  • _awaitAbgeschlossen

    void

    Die Funktion _awaitComplete sieht so aus: 

    (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • responseDone

      Promise<Antwort>

    • Handler

      StrategyHandler

    • Request

      Anfragen

    • event

      ExtendableEvent

    • Gibt zurück

      Promise<void>

  • _getResponse

    void

    Die Funktion _getResponse sieht so aus: 

    (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • Gibt zurück

      Promise<Antwort>

  • _handleFetch

    void

    Die Funktion _handleFetch sieht so aus: 

    (request: Request,handler: StrategyHandler)=> {...}

    • Gibt zurück

      Promise<Antwort>

  • _handleInstallieren

    void

    Die Funktion _handleInstall sieht so aus: 

    (request: Request,handler: StrategyHandler)=> {...}

    • Gibt zurück

      Promise<Antwort>

  • Handle (der)

    void

    Führt eine Anfragestrategie aus und gibt ein Promise zurück, das mit einem Response aufgelöst wird und alle relevanten Plug-in-Callbacks aufruft.

    Wenn eine Strategieinstanz mit einer Workbox-workbox-routing.Route registriert ist, wird diese Methode automatisch aufgerufen, wenn die Route übereinstimmt.

    Alternativ kann diese Methode in einem eigenständigen FetchEvent-Listener verwendet werden. Dazu wird sie an event.respondWith() übergeben.

    Die Funktion handle sieht so aus: 

    (options: FetchEvent|HandlerCallbackOptions)=> {...}

    • Optionen

      FetchEvent|HandlerCallbackOptions

      Ein FetchEvent oder ein Objekt mit den unten aufgeführten Attributen.

    • Gibt zurück

      Promise<Antwort>

  • handleAll

    void

    Ähnlich wie workbox-strategies.Strategy~handle, wird aber nicht nur ein Promise zurückgegeben, das in ein Response aufgelöst wird, ein Tupel von [response, done]-Promise-Objekten, wobei das erste Tupel (response) dem entspricht, was handle() zurückgibt. Letzteres ist ein Promise, das aufgelöst wird, sobald alle Versprechen, die im Rahmen der Ausführung der Strategie zu event.waitUntil() hinzugefügt wurden, abgeschlossen sind.

    Sie können das Versprechen done abwarten, um sicherzustellen, dass die von der Strategie ausgeführte zusätzliche Arbeit (in der Regel das Caching von Antworten) erfolgreich abgeschlossen wird.

    Die Funktion handleAll sieht so aus: 

    (options: FetchEvent|HandlerCallbackOptions)=> {...}

    • Optionen

      FetchEvent|HandlerCallbackOptions

      Ein FetchEvent oder ein Objekt mit den unten aufgeführten Attributen.

    • Gibt zurück

      [Promise<Response>,Promise<void>]

      Ein Tupel von [response, done] Promise, mit dem ermittelt werden kann, wann die Antwort aufgelöst und der Handler seine gesamte Arbeit abgeschlossen hat.

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

Typ

Funktion

Parameters

  • { URL }

    Objekt

    • url

      URL

Rückgaben

  • URL[]

Methoden

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

Fügt der Precaching-Strategie Plug-ins hinzu.

Parameters

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

Fügen Sie dem Service Worker einen fetch-Listener hinzu, der mit vorab im Cache gespeicherten Assets auf [Netzwerkanfragen]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests antwortet.

Auf Anfragen für Assets, die nicht vorab im Cache gespeichert sind, wird FetchEvent nicht beantwortet, sodass das Ereignis auf andere fetch-Ereignis-Listener übertragen werden kann.

Parameters

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Fügt einen activate-Event-Listener hinzu, der inkompatible Pre-Caches bereinigt, die von älteren Versionen von Workbox erstellt wurden.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Hilfsfunktion, die PrecacheController#createHandlerBoundToURL für die Standardinstanz PrecacheController aufruft.

Wenn Sie einen eigenen PrecacheController erstellen, rufen Sie PrecacheController#createHandlerBoundToURL für diese Instanz auf, anstatt diese Funktion zu verwenden.

Parameters

  • url

    String

    Die vorab im Cache gespeicherte URL, die für die Suche nach Response verwendet wird.

Rückgaben

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

Nimmt eine URL und gibt die entsprechende URL zurück, die für die Suche nach dem Eintrag im Precache verwendet werden könnte.

Wenn eine relative URL angegeben ist, wird der Speicherort der Service Worker-Datei als Basis verwendet.

Bei vorab im Cache gespeicherten Einträgen ohne Überarbeitungsinformationen ist der Cache-Schlüssel mit der ursprünglichen URL identisch.

Bei vorab im Cache gespeicherten Einträgen mit Überarbeitungsinformationen ist der Cache-Schlüssel die Original-URL mit einem zusätzlichen Abfrageparameter, mit dem die Versionsinformationen nachverfolgt werden können.

Parameters

  • url

    String

    Die URL, deren Cache-Schlüssel aufgerufen werden soll.

Rückgaben

  • String|nicht definiert

    Der Cache-Schlüssel, der dieser URL entspricht.

matchPrecache()

workbox-precaching.matchPrecache(
  request: string|Request,
)

Hilfsfunktion, die PrecacheController#matchPrecache für die Standardinstanz PrecacheController aufruft.

Wenn Sie eine eigene PrecacheController erstellen, rufen Sie für diese Instanz PrecacheController#matchPrecache auf, anstatt diese Funktion zu verwenden.

Parameters

  • Request

    String|Anfrage

    Der Schlüssel (ohne Überarbeitungsparameter), der im Precache nachgeschlagen werden soll.

Rückgaben

  • Promise<Antwort|nicht definiert>

precache()

workbox-precaching.precache(
  entries: (string|PrecacheEntry)[],
)

Fügt der Precache-Liste Elemente hinzu, entfernt alle Duplikate und speichert die Dateien im Cache.

Diese Methode kann mehrmals aufgerufen werden.

Hinweis: Bei dieser Methode werden keine im Cache gespeicherten Dateien für Sie bereitgestellt. Es werden nur Dateien vorab im Cache gespeichert. Rufen Sie workbox-precaching.addRoute auf, um auf eine Netzwerkanfrage zu antworten.

Wenn ein einzelnes Array mit Dateien vorab im Cache gespeichert werden soll, können Sie einfach workbox-precaching.precacheAndRoute aufrufen.

Parameters

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string|PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

Mit dieser Methode werden der Pre-Cache-Liste Einträge sowie eine Route hinzugefügt, die auf Abrufereignisse reagiert.

Dies ist eine unkomplizierte Methode, bei der workbox-precaching.precache und workbox-precaching.addRoute in einem einzigen Aufruf aufgerufen werden.

Parameters