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 einPromise
zurückgeben, das mit einemResponse
aufgelöst wird Durch Aufrufen aller relevanten Plug-in-CallbackshandleAll()
: Ähnlich wiehandle()
, gibt aber zweiPromise
-Objekte zurück. Die erste ist der Rückgabe vonhandle()
entspricht, und die zweite wird aufgelöst, wenn Versprechungen innerhalb der Strategie zuevent.waitUntil()
hinzugefügt wurden.
Beide Anfragestrategien werden mit zwei Parametern aufgerufen:
request
: DasRequest
, für das die Strategie eine Antwort zurückgibt.handler
: EineStrategyHandler
-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 ruftrequestWillFetch()
,fetchDidSucceed()
undfetchDidFail()
Plug-in-LebenszyklusmethodencacheMatch
: Gleicht eine Anfrage aus dem Cache ab und ruft diecacheKeyWillBeUsed()
undcachedResponseWillBeUsed()
Plug-in-LebenszyklusmethodencachePut
: Fügt ein Anfrage/Antwort-Paar in den Cache ein und ruft dencacheKeyWillBeUsed()
auf.cacheWillUpdate()
undcacheDidUpdate()
Plug-in-LebenszyklusmethodenfetchAndCachePut
: Ruftfetch()
auf und führtcachePut()
im Hintergrund für die Antwort aus generiert vonfetch()
.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 (normalerweiseFetchEvent
).doneWaiting
: Gibt ein Versprechen zurück, das aufgelöst wird, sobald alle anwaitUntil()
weitergegebenen Versprechen beglichen.destroy
: Beendet die Ausführung der Strategie und löst alle ausstehendenwaitUntil()
-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) => {...}
-
Optionen
StrategyOptions – optional
-
Gibt zurück
-
-
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<Response>
-
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) => {...}
-
Handler
-
Anfrage
Anfrage
-
event
ExtendableEvent
-
Gibt zurück
Promise<Response>
-
-
Handle (der)
voidm
Führe eine Anfragestrategie aus und gibt ein
Promise
zurück, das aufgelöst wird mit EineResponse
, 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 anevent.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<Response>
-
-
handleAll
voidm
Ähnlich wie „
workbox-strategies.Strategy~handle
“, aber anstatt nur einPromise
zurückzugeben, das inResponse
aufgelöst wird. wird ein Tupel von[response, done]
-Versprechen zurückgegeben, wobei (response
) entspricht der Rückgabe vonhandle()
. Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zuevent.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
-
-
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<Response>
-
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) => {...}
-
Handler
-
Anfrage
Anfrage
-
event
ExtendableEvent
-
Gibt zurück
Promise<Response>
-
-
Handle (der)
voidm
Führe eine Anfragestrategie aus und gibt ein
Promise
zurück, das aufgelöst wird mit EineResponse
, 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 anevent.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<Response>
-
-
handleAll
voidm
Ähnlich wie „
workbox-strategies.Strategy~handle
“, aber anstatt nur einPromise
zurückzugeben, das inResponse
aufgelöst wird. wird ein Tupel von[response, done]
-Versprechen zurückgegeben, wobei (response
) entspricht der Rückgabe vonhandle()
. Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zuevent.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
-
-
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<Response>
-
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) => {...}
-
Handler
-
Anfrage
Anfrage
-
event
ExtendableEvent
-
Gibt zurück
Promise<Response>
-
-
Handle (der)
voidm
Führe eine Anfragestrategie aus und gibt ein
Promise
zurück, das aufgelöst wird mit EineResponse
, 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 anevent.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<Response>
-
-
handleAll
voidm
Ähnlich wie „
workbox-strategies.Strategy~handle
“, aber anstatt nur einPromise
zurückzugeben, das inResponse
aufgelöst wird. wird ein Tupel von[response, done]
-Versprechen zurückgegeben, wobei (response
) entspricht der Rückgabe vonhandle()
. Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zuevent.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
-
-
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<Response>
-
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) => {...}
-
Handler
-
Anfrage
Anfrage
-
event
ExtendableEvent
-
Gibt zurück
Promise<Response>
-
-
Handle (der)
voidm
Führe eine Anfragestrategie aus und gibt ein
Promise
zurück, das aufgelöst wird mit EineResponse
, 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 anevent.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<Response>
-
-
handleAll
voidm
Ähnlich wie „
workbox-strategies.Strategy~handle
“, aber anstatt nur einPromise
zurückzugeben, das inResponse
aufgelöst wird. wird ein Tupel von[response, done]
-Versprechen zurückgegeben, wobei (response
) entspricht der Rückgabe vonhandle()
. Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zuevent.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
-
-
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<Response>
-
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) => {...}
-
Handler
-
Anfrage
Anfrage
-
event
ExtendableEvent
-
Gibt zurück
Promise<Response>
-
-
Handle (der)
voidm
Führe eine Anfragestrategie aus und gibt ein
Promise
zurück, das aufgelöst wird mit EineResponse
, 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 anevent.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<Response>
-
-
handleAll
voidm
Ähnlich wie „
workbox-strategies.Strategy~handle
“, aber anstatt nur einPromise
zurückzugeben, das inResponse
aufgelöst wird. wird ein Tupel von[response, done]
-Versprechen zurückgegeben, wobei (response
) entspricht der Rückgabe vonhandle()
. Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zuevent.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
-
-
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<Response>
-
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) => {...}
-
Handler
-
Anfrage
Anfrage
-
event
ExtendableEvent
-
Gibt zurück
Promise<Response>
-
-
_handle
voidm
Die Funktion
_handle
sieht so aus: <ph type="x-smartling-placeholder"></ph>(request: Request, handler: StrategyHandler) => {...}
-
Anfrage
Anfrage
-
Handler
-
Gibt zurück
Promise<Response>
-
-
Handle (der)
voidm
Führe eine Anfragestrategie aus und gibt ein
Promise
zurück, das aufgelöst wird mit EineResponse
, 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 anevent.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<Response>
-
-
handleAll
voidm
Ähnlich wie „
workbox-strategies.Strategy~handle
“, aber anstatt nur einPromise
zurückzugeben, das inResponse
aufgelöst wird. wird ein Tupel von[response, done]
-Versprechen zurückgegeben, wobei (response
) entspricht der Rückgabe vonhandle()
. Letzteres ist ein Versprechen, das aufgehoben wird, sobald alle Versprechungen, die zuevent.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
-
Optionen
-
Gibt zurück
-
-
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
undplugins
. 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<Response>
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<boolean>
false
, wenn die Antwort durch cacheWillUpdate verursacht wurde nicht im Cache gespeichert werden, andernfallstrue
.
-
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 diewaitUntil()
-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) undplugins
wurde für dasStrategy
-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<Response>
-
fetchAndCachePut
voidm
Ruft
this.fetch()
auf und führt im Hintergrundthis.cachePut()
aus Die vonthis.fetch()
generierte Antwort.Der Aufruf von
this.cachePut()
ruft automatischthis.waitUntil()
auf, sodass SiewaitUntil()
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<Response>
-
-
getCacheKey
voidm
Prüft die Liste der Plug-ins für den
cacheKeyWillBeUsed
-Callback und einen dieser nacheinander gefundenen Callbacks ausführt. Das letzteRequest
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 keinecacheKeyWillBeUsed
-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<Request>
-
-
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 einFetchEvent
).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