Workbox-Strategien

Bei der Einführung von Service Workern gab es eine Reihe gängiger Caching-Strategien. sind. Eine Caching-Strategie ist ein Muster, das bestimmt, wie ein Service Worker generiert nach Empfang eines Abrufereignisses eine Antwort.

workbox-strategies bietet die gängigsten Caching-Strategien, sodass und wenden sie in Ihrem Service Worker an.

Wir werden nur auf die von Workbox unterstützten Strategien, Weitere Informationen finden Sie im Offline-Rezeptbuch.

Strategien verwenden

In den folgenden Beispielen zeigen wir Ihnen, wie Sie das Workbox-Caching verwenden. mit workbox-routing. Es gibt einige Optionen, die Sie mit die im Kurs behandelt werden, Abschnitt „Strategien konfigurieren“ in diesem Dokument.

Im Abschnitt Erweiterte Nutzung erfahren Sie, wie Sie ohne workbox-routing die Caching-Strategien anwenden zu können.

Stale-Während-Neuvalidierung

Diagramm „Veraltet während der Neuvalidierung“

Der Parameter stale- while-revalid Muster ermöglichen, so schnell wie möglich mit einer im Cache gespeicherte Antwort, falls verfügbar, und greift auf die Netzwerkanfrage zurück, nicht im Cache gespeichert. Die Netzwerkanfrage wird dann zum Aktualisieren des Cache verwendet. Im Gegensatz zu einige Implementierungen wird mit dieser Strategie immer eine erneute Validierung angefordert. unabhängig vom Alter der im Cache gespeicherten Antwort.

Dies ist eine relativ gängige Strategie, bei der die aktuellsten Ressourcen ist für die Anwendung nicht entscheidend.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

Zuerst Cache speichern (Cache mit Fallback auf das Netzwerk)

Diagramm „Cache zuerst“

Offline-Web-Apps benötigen den Cache. nicht kritisch ist und nach und nach im Cache gespeichert werden kann, zuerst im Cache speichern ist die beste Option.

Wenn sich eine Antwort im Cache befindet, wird die Anfrage mithilfe der Methode Antwort im Cache gespeichert und das Netzwerk wird überhaupt nicht verwendet. Wenn kein im Cache gespeichertes wird die Anfrage von einer Netzwerkanfrage erfüllt, werden im Cache gespeichert, sodass die nächste Anfrage direkt aus dem Cache bereitgestellt wird.

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

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

Netzwerk zuerst (Netzwerk, das auf den Cache zurückgreift)

Diagramm: Netzwerk zuerst

Bei Anfragen, die häufig aktualisiert werden, Netzwerk zuerst ist die ideale Lösung. Standardmäßig wird versucht, die aktuellen vom Netzwerk erhalten. Wenn die Anfrage erfolgreich ist, wird die Antwort im Cache gespeichert. Wenn das Netzwerk keine Antwort zurückgibt, verwendet werden.

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

Nur Netzwerk

Diagramm „Nur Netzwerk“

Wenn bestimmte Anfragen aus dem Netzwerk beantwortet werden müssen, nur Netzwerk ist die richtige Strategie.

import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

Nur Cache

Diagramm „Nur Cache“

Nur Cache -Strategie stellt sicher, dass die Antworten aus einem Cache abgerufen werden. Das kommt seltener vor in der Workbox, kann aber nützlich sein, wenn Sie einen eigenen Precaching-Schritt durchführen.

import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());

Strategien konfigurieren

Mit allen Strategien können Sie Folgendes konfigurieren:

  • Der Name des Cache, der in der Strategie verwendet werden soll.
  • Cache-Ablaufbeschränkungen, die in der Strategie verwendet werden sollen.
  • Ein Array von Plug-ins, deren Lebenszyklusmethoden aufgerufen werden, wenn Abrufen und Caching einer Anfrage.

Ändern des von einer Strategie verwendeten Cache

Sie können den Cache einer Strategie ändern, indem Sie einen Cache-Namen angeben. Dies ist nützlich, wenn Sie Ihre Assets für die Fehlerbehebung trennen möchten.

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

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

Plug-ins verwenden

Workbox enthält eine Reihe von Plug-ins, die mit diesen Strategien verwendet werden können.

Um eines dieser Plug-ins (oder eines benutzerdefinierten Plug-ins) zu verwenden, müssen Sie Instanzen auf die Option plugins.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ],
  })
);

Benutzerdefinierte Strategien

Neben der Konfiguration von Strategien können Sie mit Workbox auch Ihre eigenen benutzerdefinierten Strategien erstellen. Dazu kann die Strategy-Basisklasse aus workbox-strategies importiert und erweitert werden:

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

In diesem Beispiel wird handle() als Anfragestrategie verwendet, um eine bestimmte Verarbeitungslogik zu definieren. Es sind zwei Anfragestrategien, die verwendet werden können:

  • handle(): Eine Anfragestrategie ausführen und ein Promise zurückgeben, das mit einem Response aufgelöst wird Durch Aufrufen aller relevanten Plug-in-Callbacks
  • handleAll(): Ähnlich wie handle(), gibt aber zwei Promise-Objekte zurück. Die erste ist der Rückgabe von handle() entspricht, und die zweite wird aufgelöst, wenn Versprechungen innerhalb der Strategie zu event.waitUntil() hinzugefügt wurden.

Beide Anfragestrategien werden mit zwei Parametern aufgerufen:

  • request: Das Request, für das die Strategie eine Antwort zurückgibt.
  • handler: Eine StrategyHandler-Instanz, die automatisch für die aktuelle Strategie erstellt wurde.

Neue Strategie entwickeln

Das folgende Beispiel zeigt eine neue Strategie, bei der das Verhalten von NetworkOnly neu implementiert wird:

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

Beachten Sie, wie handler.fetch() anstelle der nativen fetch-Methode aufgerufen wird. Das StrategyHandler bietet eine Reihe von Abruf- und Cache-Aktionen, die immer dann verwendet werden können, wenn handle() oder handleAll() wird verwendet:

  • fetch: Ruft eine bestimmte Anfrage ab und ruft requestWillFetch(), fetchDidSucceed() und fetchDidFail() Plug-in-Lebenszyklusmethoden
  • cacheMatch: Gleicht eine Anfrage aus dem Cache ab und ruft die cacheKeyWillBeUsed() und cachedResponseWillBeUsed() Plug-in-Lebenszyklusmethoden
  • cachePut: Fügt ein Anfrage/Antwort-Paar in den Cache ein und ruft den cacheKeyWillBeUsed() auf. cacheWillUpdate() und cacheDidUpdate() Plug-in-Lebenszyklusmethoden
  • fetchAndCachePut: Ruft fetch() auf und führt cachePut() im Hintergrund für die Antwort aus generiert von fetch().
  • hasCallback: Nimmt einen Callback als Eingabe an und gibt „true“ zurück, wenn die Strategie mindestens ein Plug-in hat mit dem jeweiligen Callback.
  • runCallbacks: Führt alle Plug-in-Callbacks aus, die mit einem bestimmten Namen übereinstimmen und dabei einen bestimmten Parameter übergeben. -Objekt (zusammengeführt mit dem aktuellen Plug-in-Status) als einziges Argument.
  • iterateCallbacks: Nimmt einen Callback an und gibt eine Iteration übereinstimmender Plug-in-Callbacks zurück, wobei wird jeder Callback mit dem aktuellen Handler-Status versehen (d.h., wenn Sie die einzelnen Callbacks aufrufen, Objektparameter, den Sie übergeben, wird mit dem aktuellen Status des Plug-ins zusammengeführt.
  • waitUntil: Fügt ein Promise zu den verlängerten Zusicherungen für die Lebensdauer des Ereignisses hinzu, das mit dem Ereignis verknüpft ist verarbeitete Anfrage (normalerweise FetchEvent).
  • doneWaiting: Gibt ein Versprechen zurück, das aufgelöst wird, sobald alle an waitUntil() weitergegebenen Versprechen beglichen.
  • destroy: Beendet die Ausführung der Strategie und löst alle ausstehenden waitUntil()-Zusicherungen sofort auf.

Benutzerdefinierte Cache-Netzwerk-Rennstrategie

Das folgende Beispiel basiert auf cache-network-race vom Offline Cookbook (was in der Workbox nicht enthalten ist), geht aber noch einen Schritt weiter und aktualisiert die nach einer erfolgreichen Netzwerkanfrage wieder im Cache gespeichert. Dies ist ein Beispiel für eine komplexere Strategie, bei der mehrere Aktionen ausführen.

import {Strategy} from 'workbox-strategies';

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then(response => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        results => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === 'rejected' &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

Erweiterte Nutzung

Wenn Sie die Strategien in Ihrer eigenen Abrufereignislogik verwenden möchten, können Sie Verwenden Sie die Strategieklassen, um eine Anfrage mithilfe einer bestimmten Strategie auszuführen.

Um beispielsweise die Strategie „veraltet“ zu verwenden, Folgendes:

self.addEventListener('fetch', event => {
  const {request} = event;
  const url = new URL(request.url);

  if (url.origin === location.origin && url.pathname === '/') {
    event.respondWith(new StaleWhileRevalidate().handle({event, request}));
  }
});

Die Liste der verfügbaren Kurse finden Sie in der Referenzdokumente zu Workbox-Strategien

Typen

CacheFirst

Implementierung eines Cache-First- Anfragestrategie.

Eine Cache-First-Strategie ist nützlich für überarbeitete Assets, wie URLs wie /styles/example.a8f5f1.css, da sie längere Zeit im Cache gespeichert werden können.

Wenn die Netzwerkanfrage fehlschlägt und keine Cache-Übereinstimmung vorliegt, wird eine WorkboxError-Ausnahme.

Attribute

  • Konstruktor

    voidm

    Erstellt eine neue Instanz der Strategie und legt alle dokumentierten Optionen fest als öffentliche Instanz-Properties.

    Hinweis: Wenn eine benutzerdefinierte Strategieklasse die Basisklasse für die Strategie erweitert und nicht mehr als diese Eigenschaften benötigt, muss keine eigene -Konstruktor.

    Die Funktion constructor sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

  • cacheName

    String

  • fetchOptions

    RequestInit optional

  • matchOptions

    CacheQueryOptions optional

  • Plug-ins
  • _awaitComplete

    voidm

    Die Funktion _awaitComplete sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • responseDone

      Promise&lt;Response&gt;

    • Handler
    • Anfrage

      Anfrage

    • event

      ExtendableEvent

    • Gibt zurück

      Versprechen<void>

  • _getResponse

    voidm

    Die Funktion _getResponse sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • Handle (der)

    voidm

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

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

    Alternativ kann diese Methode in einem eigenständigen FetchEvent-Element verwendet werden. Listener, indem er an event.respondWith() übergeben wird.

    Die Funktion handle sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • handleAll

    voidm

    Ähnlich wie „workbox-strategies.Strategy~handle“, aber anstatt nur ein Promise zurückzugeben, das in Response aufgelöst wird. wird ein Tupel von [response, done]-Versprechen zurückgegeben, wobei (response) entspricht der Rückgabe von handle(). Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zu event.waitUntil() wurde im Rahmen der Umsetzung der Strategie abgeschlossen.

    Sie können auf das done-Versprechen abwarten, um alle zusätzlichen Arbeiten durch die die Strategie (normalerweise Caching-Antworten) erfolgreich abgeschlossen wird.

    Die Funktion handleAll sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      [Promise<Response>, Promise<void>]

      Ein Tupel von [response, erledigt] Versprechungen, mit denen ermittelt werden kann, wann die Antwort als und wenn der Handler seine gesamte Arbeit abgeschlossen hat.

CacheOnly

Implementierung eines ausschließlichen Cache Anfragestrategie.

Diese Klasse ist nützlich, wenn Sie Workbox-Plug-ins.

Wenn keine Cache-Übereinstimmung vorliegt, wird die Ausnahme WorkboxError ausgelöst.

Attribute

  • Konstruktor

    voidm

    Erstellt eine neue Instanz der Strategie und legt alle dokumentierten Optionen fest als öffentliche Instanz-Properties.

    Hinweis: Wenn eine benutzerdefinierte Strategieklasse die Basisklasse für die Strategie erweitert und nicht mehr als diese Eigenschaften benötigt, muss keine eigene -Konstruktor.

    Die Funktion constructor sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

  • cacheName

    String

  • fetchOptions

    RequestInit optional

  • matchOptions

    CacheQueryOptions optional

  • Plug-ins
  • _awaitComplete

    voidm

    Die Funktion _awaitComplete sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • responseDone

      Promise&lt;Response&gt;

    • Handler
    • Anfrage

      Anfrage

    • event

      ExtendableEvent

    • Gibt zurück

      Versprechen<void>

  • _getResponse

    voidm

    Die Funktion _getResponse sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • Handle (der)

    voidm

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

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

    Alternativ kann diese Methode in einem eigenständigen FetchEvent-Element verwendet werden. Listener, indem er an event.respondWith() übergeben wird.

    Die Funktion handle sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • handleAll

    voidm

    Ähnlich wie „workbox-strategies.Strategy~handle“, aber anstatt nur ein Promise zurückzugeben, das in Response aufgelöst wird. wird ein Tupel von [response, done]-Versprechen zurückgegeben, wobei (response) entspricht der Rückgabe von handle(). Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zu event.waitUntil() wurde im Rahmen der Umsetzung der Strategie abgeschlossen.

    Sie können auf das done-Versprechen abwarten, um alle zusätzlichen Arbeiten durch die die Strategie (normalerweise Caching-Antworten) erfolgreich abgeschlossen wird.

    Die Funktion handleAll sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      [Promise<Response>, Promise<void>]

      Ein Tupel von [response, erledigt] Versprechungen, mit denen ermittelt werden kann, wann die Antwort als und wenn der Handler seine gesamte Arbeit abgeschlossen hat.

NetworkFirst

Die Implementierung eines Netzwerk zuerst Anfragestrategie.

Standardmäßig speichert diese Strategie Antworten mit dem Statuscode 200 als sowie undurchsichtige Antworten. Undurchsichtige Antworten sind ursprungsübergreifende Anfragen, unterstützen CORS.

Wenn die Netzwerkanfrage fehlschlägt und keine Cache-Übereinstimmung vorliegt, wird eine WorkboxError-Ausnahme.

Attribute

  • Konstruktor

    voidm

    Die Funktion constructor sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

  • cacheName

    String

  • fetchOptions

    RequestInit optional

  • matchOptions

    CacheQueryOptions optional

  • Plug-ins
  • _awaitComplete

    voidm

    Die Funktion _awaitComplete sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • responseDone

      Promise&lt;Response&gt;

    • Handler
    • Anfrage

      Anfrage

    • event

      ExtendableEvent

    • Gibt zurück

      Versprechen<void>

  • _getResponse

    voidm

    Die Funktion _getResponse sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • Handle (der)

    voidm

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

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

    Alternativ kann diese Methode in einem eigenständigen FetchEvent-Element verwendet werden. Listener, indem er an event.respondWith() übergeben wird.

    Die Funktion handle sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • handleAll

    voidm

    Ähnlich wie „workbox-strategies.Strategy~handle“, aber anstatt nur ein Promise zurückzugeben, das in Response aufgelöst wird. wird ein Tupel von [response, done]-Versprechen zurückgegeben, wobei (response) entspricht der Rückgabe von handle(). Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zu event.waitUntil() wurde im Rahmen der Umsetzung der Strategie abgeschlossen.

    Sie können auf das done-Versprechen abwarten, um alle zusätzlichen Arbeiten durch die die Strategie (normalerweise Caching-Antworten) erfolgreich abgeschlossen wird.

    Die Funktion handleAll sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      [Promise<Response>, Promise<void>]

      Ein Tupel von [response, erledigt] Versprechungen, mit denen ermittelt werden kann, wann die Antwort als und wenn der Handler seine gesamte Arbeit abgeschlossen hat.

NetworkFirstOptions

Attribute

  • cacheName

    String optional

  • fetchOptions

    RequestInit optional

  • matchOptions

    CacheQueryOptions optional

  • networkTimeoutSeconds

    Zahl optional

  • Plug-ins

    WorkboxPlugin[] optional

NetworkOnly

Die Implementierung eines nur Netzwerk Anfragestrategie.

Diese Klasse ist nützlich, wenn Sie Workbox-Plug-ins.

Wenn die Netzwerkanfrage fehlschlägt, wird die Ausnahme WorkboxError ausgelöst.

Attribute

  • Konstruktor

    voidm

    Die Funktion constructor sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

  • cacheName

    String

  • fetchOptions

    RequestInit optional

  • matchOptions

    CacheQueryOptions optional

  • Plug-ins
  • _awaitComplete

    voidm

    Die Funktion _awaitComplete sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • responseDone

      Promise&lt;Response&gt;

    • Handler
    • Anfrage

      Anfrage

    • event

      ExtendableEvent

    • Gibt zurück

      Versprechen<void>

  • _getResponse

    voidm

    Die Funktion _getResponse sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • Handle (der)

    voidm

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

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

    Alternativ kann diese Methode in einem eigenständigen FetchEvent-Element verwendet werden. Listener, indem er an event.respondWith() übergeben wird.

    Die Funktion handle sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • handleAll

    voidm

    Ähnlich wie „workbox-strategies.Strategy~handle“, aber anstatt nur ein Promise zurückzugeben, das in Response aufgelöst wird. wird ein Tupel von [response, done]-Versprechen zurückgegeben, wobei (response) entspricht der Rückgabe von handle(). Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zu event.waitUntil() wurde im Rahmen der Umsetzung der Strategie abgeschlossen.

    Sie können auf das done-Versprechen abwarten, um alle zusätzlichen Arbeiten durch die die Strategie (normalerweise Caching-Antworten) erfolgreich abgeschlossen wird.

    Die Funktion handleAll sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      [Promise<Response>, Promise<void>]

      Ein Tupel von [response, erledigt] Versprechungen, mit denen ermittelt werden kann, wann die Antwort als und wenn der Handler seine gesamte Arbeit abgeschlossen hat.

NetworkOnlyOptions

Attribute

  • fetchOptions

    RequestInit optional

  • networkTimeoutSeconds

    Zahl optional

  • Plug-ins

    WorkboxPlugin[] optional

StaleWhileRevalidate

Die Implementierung eines stale-während-Neuvalidierung Anfragestrategie.

Ressourcen werden sowohl vom Cache als auch vom Netzwerk gleichzeitig angefordert. Die Strategie antwortet mit der im Cache gespeicherten Version, falls verfügbar, andernfalls auf die Netzwerkantwort warten. Der Cache wird mit der Netzwerkantwort aktualisiert mit jeder erfolgreichen Anfrage.

Standardmäßig speichert diese Strategie Antworten mit dem Statuscode 200 als sowie undurchsichtige Antworten. Intransparente Antworten sind ursprungsübergreifende Anfragen, bei denen die Antwort unterstützen CORS.

Wenn die Netzwerkanfrage fehlschlägt und keine Cache-Übereinstimmung vorliegt, wird eine WorkboxError-Ausnahme.

Attribute

  • Konstruktor

    voidm

    Die Funktion constructor sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

  • cacheName

    String

  • fetchOptions

    RequestInit optional

  • matchOptions

    CacheQueryOptions optional

  • Plug-ins
  • _awaitComplete

    voidm

    Die Funktion _awaitComplete sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • responseDone

      Promise&lt;Response&gt;

    • Handler
    • Anfrage

      Anfrage

    • event

      ExtendableEvent

    • Gibt zurück

      Versprechen<void>

  • _getResponse

    voidm

    Die Funktion _getResponse sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • Handle (der)

    voidm

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

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

    Alternativ kann diese Methode in einem eigenständigen FetchEvent-Element verwendet werden. Listener, indem er an event.respondWith() übergeben wird.

    Die Funktion handle sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • handleAll

    voidm

    Ähnlich wie „workbox-strategies.Strategy~handle“, aber anstatt nur ein Promise zurückzugeben, das in Response aufgelöst wird. wird ein Tupel von [response, done]-Versprechen zurückgegeben, wobei (response) entspricht der Rückgabe von handle(). Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zu event.waitUntil() wurde im Rahmen der Umsetzung der Strategie abgeschlossen.

    Sie können auf das done-Versprechen abwarten, um alle zusätzlichen Arbeiten durch die die Strategie (normalerweise Caching-Antworten) erfolgreich abgeschlossen wird.

    Die Funktion handleAll sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      [Promise<Response>, Promise<void>]

      Ein Tupel von [response, erledigt] Versprechungen, mit denen ermittelt werden kann, wann die Antwort als und wenn der Handler seine gesamte Arbeit abgeschlossen hat.

Strategy

Eine abstrakte Basisklasse, von der alle anderen Strategieklassen erweitert werden müssen:

Attribute

  • Konstruktor

    voidm

    Erstellt eine neue Instanz der Strategie und legt alle dokumentierten Optionen fest als öffentliche Instanz-Properties.

    Hinweis: Wenn eine benutzerdefinierte Strategieklasse die Basisklasse für die Strategie erweitert und nicht mehr als diese Eigenschaften benötigt, muss keine eigene -Konstruktor.

    Die Funktion constructor sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

  • cacheName

    String

  • fetchOptions

    RequestInit optional

  • matchOptions

    CacheQueryOptions optional

  • Plug-ins
  • _awaitComplete

    voidm

    Die Funktion _awaitComplete sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • responseDone

      Promise&lt;Response&gt;

    • Handler
    • Anfrage

      Anfrage

    • event

      ExtendableEvent

    • Gibt zurück

      Versprechen<void>

  • _getResponse

    voidm

    Die Funktion _getResponse sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • _handle

    voidm

    Die Funktion _handle sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • Handle (der)

    voidm

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

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

    Alternativ kann diese Methode in einem eigenständigen FetchEvent-Element verwendet werden. Listener, indem er an event.respondWith() übergeben wird.

    Die Funktion handle sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      Promise&lt;Response&gt;

  • handleAll

    voidm

    Ähnlich wie „workbox-strategies.Strategy~handle“, aber anstatt nur ein Promise zurückzugeben, das in Response aufgelöst wird. wird ein Tupel von [response, done]-Versprechen zurückgegeben, wobei (response) entspricht der Rückgabe von handle(). Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zu event.waitUntil() wurde im Rahmen der Umsetzung der Strategie abgeschlossen.

    Sie können auf das done-Versprechen abwarten, um alle zusätzlichen Arbeiten durch die die Strategie (normalerweise Caching-Antworten) erfolgreich abgeschlossen wird.

    Die Funktion handleAll sieht so aus: <ph type="x-smartling-placeholder"></ph>

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

    • Gibt zurück

      [Promise<Response>, Promise<void>]

      Ein Tupel von [response, erledigt] Versprechungen, mit denen ermittelt werden kann, wann die Antwort als und wenn der Handler seine gesamte Arbeit abgeschlossen hat.

StrategyHandler

Eine Klasse, die bei jedem Aufruf einer Strategy-Instanz erstellt wird workbox-strategies.Strategy~handle oder workbox-strategies.Strategy~handleAll, die alle Abruf- und speichert Aktionen im Zusammenhang mit Plug-in-Callbacks im Cache und verfolgt, wann die Strategie ist „erledigt“ (d.h. alle hinzugefügten event.waitUntil()-Zusicherungen wurden gelöst).

Attribute

  • Konstruktor

    voidm

    Erstellt eine neue Instanz, die mit der übergebenen Strategie und dem übergebenen Ereignis verknüpft ist der die Anfrage verarbeitet.

    Der Konstruktor initialisiert außerdem den Status, der an die einzelnen den Plug-ins, die diese Anfrage verarbeiten.

    Die Funktion constructor sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • event

    ExtendableEvent

  • params

    Beliebige optionale

  • Anfrage

    Anfrage

  • URL

    URL optional

  • cacheMatch

    voidm

    Gleicht eine Anfrage aus dem Cache ab (und ruft ein beliebiges entsprechendes Plug-in auf) Callback-Methoden) mit den Methoden cacheName, matchOptions und plugins. für das Strategieobjekt definiert wurde.

    Mit dieser Methode werden die folgenden Plug-in-Lebenszyklusmethoden aufgerufen:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    Die Funktion cacheMatch sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (key: RequestInfo) => {...}

    • Schlüssel

      RequestInfo

      Die Anfrage oder URL, die als Cache-Schlüssel verwendet werden soll.

    • Gibt zurück

      Promise&lt;Response&gt;

      Eine übereinstimmende Antwort, falls gefunden.

  • cachePut

    voidm

    Fügt ein Anfrage/Antwort-Paar in den Cache ein (und ruft alle entsprechenden Plug-in-Callback-Methoden), die unter „cacheName“ und „plugins“ definiert sind. das Strategieobjekt.

    Mit dieser Methode werden die folgenden Plug-in-Lebenszyklusmethoden aufgerufen:

    • cacheKeyWillByUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    Die Funktion cachePut sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (key: RequestInfo, response: Response) => {...}

    • Schlüssel

      RequestInfo

      Die Anfrage oder URL, die als Cache-Schlüssel verwendet werden soll.

    • Antwort

      Antwort

      Die Antwort auf den Cache.

    • Gibt zurück

      Promise&lt;boolean&gt;

      false, wenn die Antwort durch cacheWillUpdate verursacht wurde nicht im Cache gespeichert werden, andernfalls true.

  • löschen

    voidm

    Beendet die Ausführung der Strategie und löst ausstehende Anfragen sofort ab waitUntil() verspricht.

    Die Funktion destroy sieht so aus: <ph type="x-smartling-placeholder"></ph>

    () => {...}

  • doneWaiting

    voidm

    Gibt ein Versprechen zurück, das aufgelöst wird, nachdem alle Versprechen an workbox-strategies.StrategyHandler~waitUntil beglichen haben.

    Hinweis: Alle Arbeiten, die nach der Abrechnung von doneWaiting() erledigt wurden, sollten manuell erfolgen. an die waitUntil()-Methode eines Ereignisses übergeben (nicht die Methode dieses Handlers) waitUntil()), andernfalls wird der Service Worker-Thread beendet bevor Sie mit Ihrer Arbeit beginnen.

    Die Funktion doneWaiting sieht so aus: <ph type="x-smartling-placeholder"></ph>

    () => {...}

    • Gibt zurück

      Versprechen<void>

  • abrufen

    voidm

    Ruft eine bestimmte Anfrage ab (und ruft einen beliebigen Plug-in-Callback auf) Methoden) mithilfe der fetchOptions (für Nicht-Navigationsanfragen) und plugins wurde für das Strategy-Objekt definiert.

    Mit dieser Methode werden die folgenden Plug-in-Lebenszyklusmethoden aufgerufen:

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

    Die Funktion fetch sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (input: RequestInfo) => {...}

    • Eingabe

      RequestInfo

      Die URL oder Anforderung zum Abrufen.

    • Gibt zurück

      Promise&lt;Response&gt;

  • fetchAndCachePut

    voidm

    Ruft this.fetch() auf und führt im Hintergrund this.cachePut() aus Die von this.fetch() generierte Antwort.

    Der Aufruf von this.cachePut() ruft automatisch this.waitUntil() auf, sodass Sie waitUntil() nicht manuell für das Ereignis aufrufen müssen.

    Die Funktion fetchAndCachePut sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (input: RequestInfo) => {...}

    • Eingabe

      RequestInfo

      Die Anfrage oder URL, die abgerufen und im Cache gespeichert werden soll.

    • Gibt zurück

      Promise&lt;Response&gt;

  • getCacheKey

    voidm

    Prüft die Liste der Plug-ins für den cacheKeyWillBeUsed-Callback und einen dieser nacheinander gefundenen Callbacks ausführt. Das letzte Request Objekt, das vom letzten Plug-in zurückgegeben wurde, wird als Cache-Schlüssel für den Cache behandelt Lese- und/oder Schreibvorgänge. Wenn keine cacheKeyWillBeUsed-Plug-in-Callbacks vorhanden sind registriert wurde, wird die übergebene Anfrage unverändert zurückgegeben.

    Die Funktion getCacheKey sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (request: Request, mode: "read" 
     | "write"
    ) => {...}

    • Anfrage

      Anfrage

    • Modus

      "lesen"
       | "write"

    • Gibt zurück

      Promise&lt;Request&gt;

  • hasCallback

    voidm

    Gibt "true" zurück, wenn die Strategie mindestens ein Plug-in mit dem angegebenen Wert Callback des Nutzers an.

    Die Funktion hasCallback sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (name: C) => {...}

    • Name

      C

      Der Name des Callbacks, auf den geprüft werden soll.

    • Gibt zurück

      boolean

  • iterateCallbacks

    voidm

    Akzeptiert einen Callback und gibt eine Iteration übereinstimmender Plug-in-Callbacks zurück. Dabei wird jeder Callback mit dem aktuellen Handler-Status versehen (d.h. rufen Sie jeden Callback auf. Der Objektparameter, den Sie an ihn übergeben, mit dem aktuellen Status des Plug-ins zusammengeführt werden.

    Die Funktion iterateCallbacks sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (name: C) => {...}

    • Name

      C

      Der Name des auszuführenden Callbacks

    • Gibt zurück

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    voidm

    Führt alle Plug-in-Callbacks aus, die dem angegebenen Namen entsprechen und den Parameter param-Objekt (zusammengeführt mit dem aktuellen Plug-in-Status) als einzige .

    Hinweis: Da mit dieser Methode alle Plug-ins ausgeführt werden, ist sie in Fällen, in denen wobei der Rückgabewert eines Callbacks vor dem Aufruf von beim nächsten Callback. Weitere Informationen finden Sie unter workbox-strategies.StrategyHandler#iterateCallbacks weiter unten, um mehr über die Vorgehensweise in diesem Fall zu erfahren.

    Die Funktion runCallbacks sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (name: C, param: Omit<indexedAccess"state" 
    >) => {...}

    • Name

      C

      Der Name des Callbacks, der in jedem Plug-in ausgeführt werden soll.

    • param

      Omit<indexedAccess"state"
      >

      Objekt, das als erster (und einziger) Parameter übergeben werden soll beim Ausführen der einzelnen Callbacks an. Dieses Objekt wird mit dem aktuellen Plug-in-Status vor der Callback-Ausführung.

    • Gibt zurück

      Versprechen<void>

  • waitUntil

    voidm

    Es wird ein Versprechen hinzugefügt, [Lebensversprechen verlängern]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises des Ereignisereignisses, das mit der verarbeiteten Anfrage verknüpft ist (normalerweise ein FetchEvent).

    Hinweis: workbox-strategies.StrategyHandler~doneWaiting um zu erfahren, wann alle Versprechen geschlossen sind.

    Die Funktion waitUntil sieht so aus: <ph type="x-smartling-placeholder"></ph>

    (promise: Promise<T>) => {...}

    • Versprechen

      Versprechen<T>

      Ein Versprechen zur Verlängerung der Lebensdauer des Ereignisses, das die Anfrage ausgelöst hat.

    • Gibt zurück

      Versprechen<T>

StrategyOptions

Attribute

  • cacheName

    String optional

  • fetchOptions

    RequestInit optional

  • matchOptions

    CacheQueryOptions optional

  • Plug-ins

    WorkboxPlugin[] optional