Lorsque les service workers ont été introduits pour la première fois, un ensemble de stratégies de mise en cache courantes est apparu. Une stratégie de mise en cache est un modèle qui détermine la manière dont un service worker génère une réponse après avoir reçu un événement de récupération.
workbox-strategies
fournit les stratégies de mise en cache les plus courantes afin que vous puissiez facilement les appliquer dans votre service worker.
Nous n'entrerons pas dans les détails en dehors des stratégies compatibles avec Workbox, mais vous pouvez en savoir plus dans le livre de recettes hors connexion.
Utilisation des stratégies
Dans les exemples suivants, nous allons vous montrer comment utiliser les stratégies de mise en cache de la boîte de travail avec workbox-routing
. Vous pouvez définir certaines options pour chaque stratégie. Ces options sont présentées dans la section Configurer des stratégies de cette documentation.
Dans la section Utilisation avancée, nous verrons comment utiliser les stratégies de mise en cache directement sans workbox-routing
.
Obsolète lors de la revalidation
Le modèle stale-while-revalidate vous permet de répondre à la requête le plus rapidement possible avec une réponse mise en cache, le cas échéant, en revenant à la requête réseau si elle n'est pas mise en cache. La requête réseau est ensuite utilisée pour mettre à jour le cache. Contrairement à certaines implémentations de la méthode "stale-while-revalidate", cette stratégie envoie toujours une requête de revalidation, quel que soit l'âge de la réponse mise en cache.
Il s'agit d'une stratégie assez courante dans laquelle disposer des ressources les plus à jour n'est pas essentiel à l'application.
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/images/avatars/'),
new StaleWhileRevalidate()
);
Mise en cache d'abord (reprise du cache sur le réseau)
Les applications Web hors connexion s'appuient fortement sur le cache. Toutefois, pour les éléments non critiques qui peuvent être mis en cache progressivement, un cache en premier est la meilleure option.
S'il existe une réponse dans le cache, la requête sera traitée à l'aide de la réponse mise en cache et le réseau n'est pas utilisé du tout. En l'absence de réponse mise en cache, la requête est satisfaite par une requête réseau et la réponse est mise en cache pour que la requête suivante soit diffusée directement à partir du cache.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(({request}) => request.destination === 'style', new CacheFirst());
Réseau en premier (réseau de retour au cache)
Pour les requêtes qui sont fréquemment mises à jour, la stratégie idéale est la priorité au réseau. Par défaut, il essaie de récupérer la dernière réponse du réseau. Si la requête aboutit, la réponse est mise en cache. Si le réseau ne parvient pas à renvoyer de réponse, la réponse mise en cache est utilisée.
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/social-timeline/'),
new NetworkFirst()
);
Réseau uniquement
Si vous souhaitez que des requêtes spécifiques soient traitées à partir du réseau, la stratégie à utiliser est réseau uniquement.
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());
Cache uniquement
La stratégie cache uniquement garantit que les réponses sont obtenues à partir d'un cache. Cette méthode est moins courante dans la boîte de travail, mais elle peut être utile si vous disposez de votre propre étape de mise en cache.
import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());
Configuration des stratégies
Toutes les stratégies vous permettent de configurer les éléments suivants:
- Nom du cache à utiliser dans la stratégie.
- Restrictions d'expiration du cache à utiliser dans la stratégie.
- Tableau de plug-ins dont les méthodes de cycle de vie sont appelées lors de la récupération et de la mise en cache d'une requête.
Modification du cache utilisé par une stratégie
Vous pouvez modifier la stratégie de cache utilisée en fournissant un nom de cache. Cela est utile si vous souhaitez séparer vos éléments pour faciliter le débogage.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
})
);
Utiliser des plug-ins
Workbox est fourni avec un ensemble de plug-ins que vous pouvez utiliser avec ces stratégies.
- synchronisation-en-arrière-plan de la boîte de travail
- mise-à-jour-diffusion-boîte-de-travail
- workbox-cacheable-response
- expiration_boîte-de-travail
- requêtes-plage-boîte-de-travail
Pour utiliser l'un de ces plug-ins (ou un plug-in personnalisé), il vous suffit de transmettre les instances à l'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,
}),
],
})
);
Stratégies personnalisées
En plus de configurer des stratégies, Workbox vous permet de créer vos propres stratégies personnalisées.
Pour ce faire, importez et étendez la classe de base Strategy
à partir de workbox-strategies
:
import {Strategy} from 'workbox-strategies';
class NewStrategy extends Strategy {
_handle(request, handler) {
// Define handling logic here
}
}
Dans cet exemple, handle()
est utilisé comme stratégie de requête pour définir une logique de traitement spécifique. Vous pouvez utiliser deux stratégies de requête:
handle()
: exécute une stratégie de requête et renvoie unPromise
qui se résout avec unResponse
, en appelant tous les rappels de plug-in pertinents.handleAll()
: semblable àhandle()
, mais renvoie deux objetsPromise
. La première correspond à ce que renvoiehandle()
, et la seconde est résolue lorsque les promesses ajoutées àevent.waitUntil()
dans la stratégie sont terminées.
Les deux stratégies de requête sont appelées avec deux paramètres:
request
:Request
pour lequel la stratégie renvoie une réponse.handler
: instanceStrategyHandler
créée automatiquement pour la stratégie actuelle.
Création d'une stratégie
Voici un exemple de nouvelle stratégie qui réimplémente le comportement de NetworkOnly
:
class NewNetworkOnlyStrategy extends Strategy {
_handle(request, handler) {
return handler.fetch(request);
}
}
Notez que handler.fetch()
est appelé au lieu de la méthode fetch
native. La classe StrategyHandler
fournit un certain nombre d'actions de récupération et de mise en cache qui peuvent être utilisées chaque fois que handle()
ou handleAll()
est utilisé:
fetch
: récupère une requête donnée et appelle les méthodes de cycle de vie des plug-insrequestWillFetch()
,fetchDidSucceed()
etfetchDidFail()
.cacheMatch
: établit une correspondance avec une requête à partir du cache et appelle les méthodes de cycle de vie des plug-inscacheKeyWillBeUsed()
etcachedResponseWillBeUsed()
.cachePut
: place une paire requête/réponse dans le cache et appelle les méthodes de cycle de vie des plug-inscacheKeyWillBeUsed()
,cacheWillUpdate()
etcacheDidUpdate()
.fetchAndCachePut
: appellefetch()
et exécutecachePut()
en arrière-plan sur la réponse générée parfetch()
.hasCallback
: prend un rappel en entrée et renvoie la valeur "true" si la stratégie comporte au moins un plug-in avec le rappel donné.runCallbacks
: exécute tous les rappels de plug-in correspondant à un nom donné, dans l'ordre, en transmettant un objet de paramètre donné (fusionné avec l'état actuel du plug-in) comme seul argument.iterateCallbacks
: accepte un rappel et renvoie un itérable de rappels de plug-in correspondants, où chaque rappel est encapsulé avec l'état actuel du gestionnaire (par exemple, lorsque vous appelez chaque rappel, le paramètre d'objet que vous transmettez est fusionné avec l'état actuel du plug-in).waitUntil
: ajoute une promesse aux promesses de durée de vie de l'événement associé à la requête traitée (généralement unFetchEvent
).doneWaiting
: renvoie une promesse qui se résout une fois que toutes les promesses transmises àwaitUntil()
ont été réglées.destroy
: arrête d'exécuter la stratégie et résout immédiatement toutes les promesseswaitUntil()
en attente.
Stratégie de concurrence réseau pour le cache personnalisé
L'exemple suivant est basé sur cache-network-race du livre de recettes hors connexion (que Workbox ne fournit pas), mais va plus loin et met toujours à jour le cache après une requête réseau réussie. Il s'agit d'un exemple de stratégie plus complexe utilisant plusieurs actions.
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);
}
}
);
});
}
}
Utilisation avancée
Si vous souhaitez utiliser les stratégies dans votre propre logique d'événement d'extraction, vous pouvez utiliser les classes de stratégie pour exécuter une requête via une stratégie spécifique.
Par exemple, pour utiliser la stratégie "stale-while-revalidate", vous pouvez procéder comme suit:
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}));
}
});
Vous trouverez la liste des classes disponibles dans la documentation de référence sur les stratégies de boîte de travail.
Types
CacheFirst
Mise en œuvre d'une stratégie de requête mise en cache.
Une stratégie axée sur la mise en cache est utile pour les éléments qui ont été révisés, tels que les URL telles que /styles/example.a8f5f1.css
, car ils peuvent être mis en cache pendant de longues périodes.
Si la requête réseau échoue et qu'il n'y a pas de correspondance avec le cache, une exception WorkboxError
est générée.
Propriétés
-
constructor
void
Crée une instance de la stratégie et définit toutes les propriétés d'option documentées en tant que propriétés d'instance publiques.
Remarque: Si une classe de stratégie personnalisée étend la classe Strategy de base et n'a pas besoin de plus de ces propriétés, elle n'a pas besoin de définir son propre constructeur.
La fonction
constructor
se présente comme suit :(options?: StrategyOptions) => {...}
-
options
StrategyOptions facultatif
-
retours
-
-
cacheName
chaîne
-
fetchOptions
RequestInit facultatif
-
matchOptions
CacheQueryOptions facultatif
-
plugins
-
_awaitComplete
void
La fonction
_awaitComplete
se présente comme suit :(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promesse<Réponse>
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promise<void>
-
-
Réponse
void
La fonction
_getResponse
se présente comme suit :(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promesse<Réponse>
-
-
handle
void
Exécutez une stratégie de requête et renvoie un
Promise
qui se résout avec unResponse
, en appelant tous les rappels de plug-in pertinents.Lorsqu'une instance de stratégie est enregistrée avec une boîte de travail
workbox-routing.Route
, cette méthode est automatiquement appelée lorsque la route correspond.Vous pouvez également utiliser cette méthode dans un écouteur
FetchEvent
autonome en la transmettant àevent.respondWith()
.La fonction
handle
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
Promesse<Réponse>
-
-
handleAll
void
Semblable à
workbox-strategies.Strategy~handle
, mais au lieu de simplement renvoyer unPromise
qui se résout enResponse
, il renvoie un tuple de promesses[response, done]
, où le premier (response
) est équivalent à ce quehandle()
renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées àevent.waitUntil()
dans le cadre de l'exécution de la stratégie sont terminées.Vous pouvez attendre la promesse
done
pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) aboutit.La fonction
handleAll
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
[Promise<Response>, Promise<void>]
Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.
-
CacheOnly
Une mise en œuvre d'une stratégie de requête de cache uniquement.
Cette classe est utile si vous souhaitez bénéficier des plug-ins Workbox.
En l'absence de correspondance avec le cache, une exception WorkboxError
est générée.
Propriétés
-
constructor
void
Crée une instance de la stratégie et définit toutes les propriétés d'option documentées en tant que propriétés d'instance publiques.
Remarque: Si une classe de stratégie personnalisée étend la classe Strategy de base et n'a pas besoin de plus de ces propriétés, elle n'a pas besoin de définir son propre constructeur.
La fonction
constructor
se présente comme suit :(options?: StrategyOptions) => {...}
-
options
StrategyOptions facultatif
-
retours
-
-
cacheName
chaîne
-
fetchOptions
RequestInit facultatif
-
matchOptions
CacheQueryOptions facultatif
-
plugins
-
_awaitComplete
void
La fonction
_awaitComplete
se présente comme suit :(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promesse<Réponse>
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promise<void>
-
-
Réponse
void
La fonction
_getResponse
se présente comme suit :(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promesse<Réponse>
-
-
handle
void
Exécutez une stratégie de requête et renvoie un
Promise
qui se résout avec unResponse
, en appelant tous les rappels de plug-in pertinents.Lorsqu'une instance de stratégie est enregistrée avec une boîte de travail
workbox-routing.Route
, cette méthode est automatiquement appelée lorsque la route correspond.Vous pouvez également utiliser cette méthode dans un écouteur
FetchEvent
autonome en la transmettant àevent.respondWith()
.La fonction
handle
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
Promesse<Réponse>
-
-
handleAll
void
Semblable à
workbox-strategies.Strategy~handle
, mais au lieu de simplement renvoyer unPromise
qui se résout enResponse
, il renvoie un tuple de promesses[response, done]
, où le premier (response
) est équivalent à ce quehandle()
renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées àevent.waitUntil()
dans le cadre de l'exécution de la stratégie sont terminées.Vous pouvez attendre la promesse
done
pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) aboutit.La fonction
handleAll
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
[Promise<Response>, Promise<void>]
Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.
-
NetworkFirst
Mise en œuvre d'une stratégie de requête privilégiant le réseau.
Par défaut, cette stratégie met en cache les réponses avec un code d'état 200 ainsi que des réponses opaques. Les réponses opaques sont des requêtes multi-origines pour lesquelles la réponse n'est pas compatible avec CORS.
Si la requête réseau échoue et qu'il n'y a pas de correspondance avec le cache, une exception WorkboxError
est générée.
Propriétés
-
constructor
void
La fonction
constructor
se présente comme suit :(options?: NetworkFirstOptions) => {...}
-
options
NetworkFirstOptions facultatif
-
retours
-
-
cacheName
chaîne
-
fetchOptions
RequestInit facultatif
-
matchOptions
CacheQueryOptions facultatif
-
plugins
-
_awaitComplete
void
La fonction
_awaitComplete
se présente comme suit :(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promesse<Réponse>
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promise<void>
-
-
Réponse
void
La fonction
_getResponse
se présente comme suit :(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promesse<Réponse>
-
-
handle
void
Exécutez une stratégie de requête et renvoie un
Promise
qui se résout avec unResponse
, en appelant tous les rappels de plug-in pertinents.Lorsqu'une instance de stratégie est enregistrée avec une boîte de travail
workbox-routing.Route
, cette méthode est automatiquement appelée lorsque la route correspond.Vous pouvez également utiliser cette méthode dans un écouteur
FetchEvent
autonome en la transmettant àevent.respondWith()
.La fonction
handle
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
Promesse<Réponse>
-
-
handleAll
void
Semblable à
workbox-strategies.Strategy~handle
, mais au lieu de simplement renvoyer unPromise
qui se résout enResponse
, il renvoie un tuple de promesses[response, done]
, où le premier (response
) est équivalent à ce quehandle()
renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées àevent.waitUntil()
dans le cadre de l'exécution de la stratégie sont terminées.Vous pouvez attendre la promesse
done
pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) aboutit.La fonction
handleAll
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
[Promise<Response>, Promise<void>]
Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.
-
NetworkFirstOptions
Propriétés
-
cacheName
string facultatif
-
fetchOptions
RequestInit facultatif
-
matchOptions
CacheQueryOptions facultatif
-
networkTimeoutSeconds
numéro facultatif
-
plugins
WorkboxPlugin[] facultatif
NetworkOnly
Mise en œuvre d'une stratégie de requête réseau uniquement.
Cette classe est utile si vous souhaitez bénéficier des plug-ins Workbox.
Si la requête réseau échoue, une exception WorkboxError
est générée.
Propriétés
-
constructor
void
La fonction
constructor
se présente comme suit :(options?: NetworkOnlyOptions) => {...}
-
options
NetworkOnlyOptions facultatif
-
retours
-
-
cacheName
chaîne
-
fetchOptions
RequestInit facultatif
-
matchOptions
CacheQueryOptions facultatif
-
plugins
-
_awaitComplete
void
La fonction
_awaitComplete
se présente comme suit :(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promesse<Réponse>
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promise<void>
-
-
Réponse
void
La fonction
_getResponse
se présente comme suit :(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promesse<Réponse>
-
-
handle
void
Exécutez une stratégie de requête et renvoie un
Promise
qui se résout avec unResponse
, en appelant tous les rappels de plug-in pertinents.Lorsqu'une instance de stratégie est enregistrée avec une boîte de travail
workbox-routing.Route
, cette méthode est automatiquement appelée lorsque la route correspond.Vous pouvez également utiliser cette méthode dans un écouteur
FetchEvent
autonome en la transmettant àevent.respondWith()
.La fonction
handle
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
Promesse<Réponse>
-
-
handleAll
void
Semblable à
workbox-strategies.Strategy~handle
, mais au lieu de simplement renvoyer unPromise
qui se résout enResponse
, il renvoie un tuple de promesses[response, done]
, où le premier (response
) est équivalent à ce quehandle()
renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées àevent.waitUntil()
dans le cadre de l'exécution de la stratégie sont terminées.Vous pouvez attendre la promesse
done
pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) aboutit.La fonction
handleAll
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
[Promise<Response>, Promise<void>]
Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.
-
NetworkOnlyOptions
Propriétés
-
fetchOptions
RequestInit facultatif
-
networkTimeoutSeconds
numéro facultatif
-
plugins
WorkboxPlugin[] facultatif
StaleWhileRevalidate
Une mise en œuvre d'une stratégie de requête stale-while-revalidate.
Les ressources sont demandées à la fois à partir du cache et du réseau en parallèle. La stratégie renvoie la version mise en cache si elle est disponible. Sinon, elle attend la réponse du réseau. Le cache est mis à jour avec la réponse du réseau à chaque requête réussie.
Par défaut, cette stratégie met en cache les réponses avec un code d'état 200 ainsi que des réponses opaques. Les réponses opaques sont des requêtes multi-origines pour lesquelles la réponse n'est pas compatible avec CORS.
Si la requête réseau échoue et qu'il n'y a pas de correspondance avec le cache, une exception WorkboxError
est générée.
Propriétés
-
constructor
void
La fonction
constructor
se présente comme suit :(options?: StrategyOptions) => {...}
-
options
StrategyOptions facultatif
-
retours
-
-
cacheName
chaîne
-
fetchOptions
RequestInit facultatif
-
matchOptions
CacheQueryOptions facultatif
-
plugins
-
_awaitComplete
void
La fonction
_awaitComplete
se présente comme suit :(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promesse<Réponse>
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promise<void>
-
-
Réponse
void
La fonction
_getResponse
se présente comme suit :(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promesse<Réponse>
-
-
handle
void
Exécutez une stratégie de requête et renvoie un
Promise
qui se résout avec unResponse
, en appelant tous les rappels de plug-in pertinents.Lorsqu'une instance de stratégie est enregistrée avec une boîte de travail
workbox-routing.Route
, cette méthode est automatiquement appelée lorsque la route correspond.Vous pouvez également utiliser cette méthode dans un écouteur
FetchEvent
autonome en la transmettant àevent.respondWith()
.La fonction
handle
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
Promesse<Réponse>
-
-
handleAll
void
Semblable à
workbox-strategies.Strategy~handle
, mais au lieu de simplement renvoyer unPromise
qui se résout enResponse
, il renvoie un tuple de promesses[response, done]
, où le premier (response
) est équivalent à ce quehandle()
renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées àevent.waitUntil()
dans le cadre de l'exécution de la stratégie sont terminées.Vous pouvez attendre la promesse
done
pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) aboutit.La fonction
handleAll
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
[Promise<Response>, Promise<void>]
Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.
-
Strategy
Une classe de base abstraite à partir de laquelle toutes les autres classes de stratégie doivent s'étendre:
Propriétés
-
constructor
void
Crée une instance de la stratégie et définit toutes les propriétés d'option documentées en tant que propriétés d'instance publiques.
Remarque: Si une classe de stratégie personnalisée étend la classe Strategy de base et n'a pas besoin de plus de ces propriétés, elle n'a pas besoin de définir son propre constructeur.
La fonction
constructor
se présente comme suit :(options?: StrategyOptions) => {...}
-
options
StrategyOptions facultatif
-
retours
-
-
cacheName
chaîne
-
fetchOptions
RequestInit facultatif
-
matchOptions
CacheQueryOptions facultatif
-
plugins
-
_awaitComplete
void
La fonction
_awaitComplete
se présente comme suit :(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Promesse<Réponse>
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promise<void>
-
-
Réponse
void
La fonction
_getResponse
se présente comme suit :(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
handler
-
request
Requête
-
event
ExtendableEvent
-
retours
Promesse<Réponse>
-
-
_poignée
void
La fonction
_handle
se présente comme suit :(request: Request, handler: StrategyHandler) => {...}
-
request
Requête
-
handler
-
retours
Promesse<Réponse>
-
-
handle
void
Exécutez une stratégie de requête et renvoie un
Promise
qui se résout avec unResponse
, en appelant tous les rappels de plug-in pertinents.Lorsqu'une instance de stratégie est enregistrée avec une boîte de travail
workbox-routing.Route
, cette méthode est automatiquement appelée lorsque la route correspond.Vous pouvez également utiliser cette méthode dans un écouteur
FetchEvent
autonome en la transmettant àevent.respondWith()
.La fonction
handle
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
Promesse<Réponse>
-
-
handleAll
void
Semblable à
workbox-strategies.Strategy~handle
, mais au lieu de simplement renvoyer unPromise
qui se résout enResponse
, il renvoie un tuple de promesses[response, done]
, où le premier (response
) est équivalent à ce quehandle()
renvoie, et le second est une promesse qui se résout une fois que toutes les promesses ajoutées àevent.waitUntil()
dans le cadre de l'exécution de la stratégie sont terminées.Vous pouvez attendre la promesse
done
pour vous assurer que tout travail supplémentaire effectué par la stratégie (généralement la mise en cache des réponses) aboutit.La fonction
handleAll
se présente comme suit :(options: FetchEvent | HandlerCallbackOptions) => {...}
-
options
FetchEvent | HandlerCallbackOptions
Un
FetchEvent
ou un objet possédant les propriétés répertoriées ci-dessous.
-
retours
[Promise<Response>, Promise<void>]
Un tuple de [réponse, terminé] promet qui peut être utilisé pour déterminer le moment où la réponse est résolue, ainsi que le moment où le gestionnaire a terminé tout son travail.
-
StrategyHandler
Une classe créée chaque fois qu'une instance Strategy appelle workbox-strategies.Strategy~handle
ou workbox-strategies.Strategy~handleAll
, qui encapsule toutes les actions de récupération et de mise en cache autour des rappels de plug-in, et effectue le suivi du moment où la stratégie est "terminée" (c'est-à-dire que toutes les promesses event.waitUntil()
ajoutées sont résolues).
Propriétés
-
constructor
void
Crée une instance associée à la stratégie transmise et à l'événement qui traite la requête.
Le constructeur initialise également l'état qui sera transmis à chacun des plug-ins qui gèrent cette requête.
La fonction
constructor
se présente comme suit :(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
de stratégie
-
options
-
retours
-
-
event
ExtendableEvent
-
params
Toute valeur facultatif
-
request
Requête
-
url
URL facultatif
-
cacheMatch
void
Met en correspondance une requête à partir du cache (et appelle toutes les méthodes de rappel de plug-in applicables) à l'aide des
cacheName
,matchOptions
etplugins
définis sur l'objet de stratégie.Lorsque vous utilisez cette méthode, les méthodes de cycle de vie des plug-ins suivantes sont appelées:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
La fonction
cacheMatch
se présente comme suit :(key: RequestInfo) => {...}
-
clé
RequestInfo
Requête ou URL à utiliser comme clé de cache.
-
retours
Promesse<Réponse>
Une réponse correspondante, le cas échéant.
-
cachePut
void
Met une paire requête/réponse dans le cache (et appelle les méthodes de rappel de plug-in applicables) à l'aide des
cacheName
etplugins
définis dans l'objet de stratégie.Lorsque vous utilisez cette méthode, les méthodes de cycle de vie des plug-ins suivantes sont appelées:
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
La fonction
cachePut
se présente comme suit :(key: RequestInfo, response: Response) => {...}
-
clé
RequestInfo
Requête ou URL à utiliser comme clé de cache.
-
réponse
Réponse
Réponse au cache.
-
retours
Promise<boolean>
false
si une mise à jour de cacheWillUpdate a entraîné la non-mise en cache de la réponse, ettrue
dans le cas contraire.
-
destroy
void
Arrête l'exécution de la stratégie et résout immédiatement toutes les promesses
waitUntil()
en attente.La fonction
destroy
se présente comme suit :() => {...}
-
doneWaiting
void
Renvoie une promesse qui se résout une fois que toutes les promesses transmises à
workbox-strategies.StrategyHandler~waitUntil
ont été réglées.Remarque: Tout travail effectué après le réglage de
doneWaiting()
doit être transmis manuellement à la méthodewaitUntil()
d'un événement (et non à la méthodewaitUntil()
de ce gestionnaire), sinon le thread de service worker sera arrêté avant la fin de votre tâche.La fonction
doneWaiting
se présente comme suit :() => {...}
-
retours
Promise<void>
-
-
fetch
void
Récupère une requête donnée (et appelle toutes les méthodes de rappel de plug-in applicables) à l'aide des
fetchOptions
(pour les requêtes hors navigation) et desplugins
définis sur l'objetStrategy
.Lorsque vous utilisez cette méthode, les méthodes de cycle de vie des plug-ins suivantes sont appelées:
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
La fonction
fetch
se présente comme suit :(input: RequestInfo) => {...}
-
entrée
RequestInfo
URL ou requête à récupérer.
-
retours
Promesse<Réponse>
-
fetchAndCachePut
void
Appelle
this.fetch()
et, en arrière-plan, exécutethis.cachePut()
sur la réponse générée parthis.fetch()
.L'appel de
this.cachePut()
appelle automatiquementthis.waitUntil()
. Vous n'avez donc pas besoin d'appeler manuellementwaitUntil()
sur l'événement.La fonction
fetchAndCachePut
se présente comme suit :(input: RequestInfo) => {...}
-
entrée
RequestInfo
Requête ou URL à récupérer et à mettre en cache.
-
retours
Promesse<Réponse>
-
-
getCacheKey
void
Il vérifie la liste des plug-ins pour rechercher le rappel
cacheKeyWillBeUsed
et exécute l'un des rappels trouvés dans l'ordre. L'objetRequest
final renvoyé par le dernier plug-in est traité comme clé de cache pour les lectures et/ou les écritures dans le cache. Si aucun rappel de plug-incacheKeyWillBeUsed
n'a été enregistré, la requête transmise est renvoyée sans modification.La fonction
getCacheKey
se présente comme suit :(request: Request, mode: "read"
| "write"
) => {...}-
request
Requête
-
Standard
"read"
| "write"
-
retours
Promesse<Demande>
-
-
hasCallback
void
Renvoie la valeur "true" si la stratégie comporte au moins un plug-in avec le rappel donné.
La fonction
hasCallback
se présente comme suit :(name: C) => {...}
-
name
C
Nom du rappel à vérifier.
-
retours
boolean
-
-
iterateCallbacks
void
Accepte un rappel et renvoie un itérable de rappels de plug-in correspondants, où chaque rappel est encapsulé avec l'état actuel du gestionnaire (par exemple, lorsque vous appelez chaque rappel, le paramètre d'objet que vous transmettez est fusionné avec l'état actuel du plug-in).
La fonction
iterateCallbacks
se présente comme suit :(name: C) => {...}
-
name
C
Nom du rappel à exécuter
-
retours
Generator<NonNullable<indexedAccess>inconnu>
-
-
runCallbacks
void
Exécute tous les rappels de plug-in correspondant au nom donné, dans l'ordre, en transmettant l'objet de paramètre donné (fusionné avec l'état actuel du plug-in) comme seul argument.
Remarque: Comme cette méthode exécute tous les plug-ins, elle n'est pas adaptée aux cas où la valeur de retour d'un rappel doit être appliquée avant l'appel du rappel suivant. Consultez
workbox-strategies.StrategyHandler#iterateCallbacks
ci-dessous pour savoir comment gérer cette demande.La fonction
runCallbacks
se présente comme suit :(name: C, param: Omit<indexedAccess"state"
>) => {...}-
name
C
Nom du rappel à exécuter dans chaque plug-in.
-
param
Omit<indexedAccess"state"
>Objet à transmettre en tant que premier (et seul) paramètre lors de l'exécution de chaque rappel. Cet objet sera fusionné avec l'état actuel du plug-in avant l'exécution du rappel.
-
retours
Promise<void>
-
-
waitUntil
void
Ajoute une promesse à l'[extension de durée de vie promesses]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
de l'événement associé à la requête traitée (généralement unFetchEvent
).Remarque: vous pouvez attendre
workbox-strategies.StrategyHandler~doneWaiting
pour savoir quand toutes les promesses ajoutées sont terminées.La fonction
waitUntil
se présente comme suit :(promise: Promise<T>) => {...}
-
promesse
Promise<T>
Une promesse à ajouter aux promesses d'extension de la durée de vie de l'événement qui a déclenché la requête.
-
retours
Promise<T>
-
StrategyOptions
Propriétés
-
cacheName
string facultatif
-
fetchOptions
RequestInit facultatif
-
matchOptions
CacheQueryOptions facultatif
-
plugins
WorkboxPlugin[] facultatif