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

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)

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)

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

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

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.

• workbox-background-sync
• workbox-broadcast-update
• workbox-cacheable-response
• workbox-expiration
• workbox-range-requests

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.

Hinweis: Weitere Informationen findest du in der Quelle. Implementierung von StrategyHandler, um alle Parameter zu sehen, die von jede Aktion

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) => {...}

  • Optionen

    StrategyOptions – optional

  • Gibt zurück

    CacheFirst

• cacheName

  String

• fetchOptions

  RequestInit optional

• matchOptions

  CacheQueryOptions optional

• Plug-ins

  WorkboxPlugin[]

• _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

    StrategyHandler

  • 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) => {...}

  • Handler

    StrategyHandler

  • Anfrage

    Anfrage

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    StrategyOptions – optional

  • Gibt zurück

    CacheOnly

• cacheName

  String

• fetchOptions

  RequestInit optional

• matchOptions

  CacheQueryOptions optional

• Plug-ins

  WorkboxPlugin[]

• _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

    StrategyHandler

  • 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) => {...}

  • Handler

    StrategyHandler

  • Anfrage

    Anfrage

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    NetworkFirstOptions optional

  • Gibt zurück

    NetworkFirst

• cacheName

  String

• fetchOptions

  RequestInit optional

• matchOptions

  CacheQueryOptions optional

• Plug-ins

  WorkboxPlugin[]

• _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

    StrategyHandler

  • 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) => {...}

  • Handler

    StrategyHandler

  • Anfrage

    Anfrage

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    NetworkOnlyOptions ist optional

  • Gibt zurück

    NetworkOnly

• cacheName

  String

• fetchOptions

  RequestInit optional

• matchOptions

  CacheQueryOptions optional

• Plug-ins

  WorkboxPlugin[]

• _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

    StrategyHandler

  • 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) => {...}

  • Handler

    StrategyHandler

  • Anfrage

    Anfrage

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    StrategyOptions – optional

  • Gibt zurück

    StaleWhileRevalidate

• cacheName

  String

• fetchOptions

  RequestInit optional

• matchOptions

  CacheQueryOptions optional

• Plug-ins

  WorkboxPlugin[]

• _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

    StrategyHandler

  • 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) => {...}

  • Handler

    StrategyHandler

  • Anfrage

    Anfrage

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    StrategyOptions – optional

  • Gibt zurück

    Strategie

• cacheName

  String

• fetchOptions

  RequestInit optional

• matchOptions

  CacheQueryOptions optional

• Plug-ins

  WorkboxPlugin[]

• _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

    StrategyHandler

  • 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) => {...}

  • Handler

    StrategyHandler

  • Anfrage

    Anfrage

  • 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) => {...}

  • Anfrage

    Anfrage

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Optionen

    FetchEvent | HandlerCallbackOptions

    Ein FetchEvent oder ein Objekt mit dem Eigenschaften.

  • 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) => {...}

  • Strategie

    Strategie

  • Optionen

    HandlerCallbackOptions

  • Gibt zurück

    StrategyHandler

• 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