coeur de la boîte de travail

Workbox a été conçu pour être modulaire, ce qui permet aux développeurs de sélectionner les éléments qu'ils souhaitent utiliser sans les forcer à tout télécharger dans un seul fichier.

Il existe cependant des chevauchements entre les modules. Par exemple, chaque module devra interagir avec la console, générer des erreurs significatives et utiliser le réseau ou le cache. Pour éviter que chaque module implémente la même logique, workbox-core contient ce code commun sur lequel chaque module s'appuie.

Ce module fournit certaines fonctionnalités aux développeurs, mais au-delà des niveaux de journalisation et de la mise en cache, workbox-core offre une logique interne à chaque module, plutôt qu'au développeur final.

Afficher et modifier les noms de cache par défaut

Workbox définit ses caches via cacheNames:

import {cacheNames} from 'workbox-core';

console.log(cacheNames.precache);
console.log(cacheNames.runtime);
console.log(cacheNames.googleAnalytics);

Ces noms de cache sont construits au format d'un préfixe, d'un nom et d'un suffixe, où le nom change en fonction de l'utilisation du cache.

<prefix>-<cache-id>-<suffix>

Vous pouvez modifier ces noms par défaut en modifiant la totalité ou une partie des valeurs transmises à setCacheNameDetails().

import {cacheNames, setCacheNameDetails} from 'workbox-core';

setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
  precache: 'install-time',
  runtime: 'run-time',
  googleAnalytics: 'ga',
});

// Will print 'my-app-install-time-v1'
console.log(cacheNames.precache);

// Will print 'my-app-run-time-v1'
console.log(cacheNames.runtime);

// Will print 'my-app-ga-v1'
console.log(cacheNames.googleAnalytics);

Le principal cas d'utilisation du préfixe et du suffixe est que si vous utilisez Workbox pour plusieurs projets et que vous utilisez le même port localhost pour chaque projet, définir un préfixe personnalisé pour chaque module empêchera les caches de se chevaucher.

Revendication des clients

Certains développeurs souhaitent pouvoir publier un nouveau service worker et le faire contrôler les pages Web déjà ouvertes dès qu'il s'active, ce qui ne se produit pas par défaut.

Si vous souhaitez obtenir ce comportement, workbox-core fournit une méthode d'assistance:

import {clientsClaim} from 'workbox-core';

// This clientsClaim() should be at the top level
// of your service worker, not inside of, e.g.,
// an event handler.
clientsClaim();

La méthode clientsClaim() dans workbox-core ajoute automatiquement un écouteur d'événement activate à votre service worker et, à l'intérieur, appelle self.clients.claim(). Appeler self.clients.claim() avant l'activation du nœud de calcul de service actuel entraîne une exception d'exécution. Le wrapper de workbox-core vous permet de l'appeler au bon moment.

Le wrapper skipWaiting est obsolète

Avant la version 6 de Workbox, les développeurs étaient également encouragés à utiliser la méthode skipWaiting() à partir de workbox-core. Toutefois, cette méthode n'offrait que peu d'avantages par rapport à ce que les développeurs obtiendraient s'ils appelaient self.skipWaiting() explicitement.

Étant donné que l'ancien wrapper workbox-core enregistrait également un gestionnaire d'événements install dans lequel self.skipWaiting() était appelé, le wrapper ne se comportait pas comme prévu s'il était appelé dans un autre gestionnaire d'événements, comme message, une fois l'installation terminée.

C'est pourquoi skipWaiting() de workbox-core est obsolète, et les développeurs doivent passer à l'appel direct de self.skipWaiting(). Contrairement à self.clients.claim(), self.skipWaiting() ne génère pas d'exception s'il est appelé au "mauvais" moment. Il n'est donc pas nécessaire de l'encapsuler dans un gestionnaire d'événements.

Types

CacheDidUpdateCallback()

workbox-core.CacheDidUpdateCallback(
  param: CacheDidUpdateCallbackParam,
)

Paramètres

Renvoie

  • Promise<void>

CacheDidUpdateCallbackParam

Propriétés

  • cacheName

    chaîne

  • événement

    ExtendableEvent

  • newResponse

    Réponse

  • oldResponse

    Réponse facultatif

  • request

    Requête

  • state

    MapLikeObject facultatif

CachedResponseWillBeUsedCallback()

workbox-core.CachedResponseWillBeUsedCallback(
  param: CachedResponseWillBeUsedCallbackParam,
)

Paramètres

Renvoie

  • Promise<void | Response>

CachedResponseWillBeUsedCallbackParam

Propriétés

  • cacheName

    chaîne

  • cachedResponse

    Réponse facultatif

  • événement

    ExtendableEvent

  • matchOptions

    CacheQueryOptions facultatif

  • request

    Requête

  • state

    MapLikeObject facultatif

CacheKeyWillBeUsedCallback()

workbox-core.CacheKeyWillBeUsedCallback(
  param: CacheKeyWillBeUsedCallbackParam,
)

Paramètres

Renvoie

  • Promise<string | Request>

CacheKeyWillBeUsedCallbackParam

Propriétés

  • événement

    ExtendableEvent

  • mode

    chaîne

  • params

    tout facultatif

  • request

    Requête

  • state

    MapLikeObject facultatif

CacheWillUpdateCallback()

workbox-core.CacheWillUpdateCallback(
  param: CacheWillUpdateCallbackParam,
)

Paramètres

Renvoie

  • Promise<void | Response>

CacheWillUpdateCallbackParam

Propriétés

  • événement

    ExtendableEvent

  • request

    Requête

  • réponse

    Réponse

  • state

    MapLikeObject facultatif

FetchDidFailCallback()

workbox-core.FetchDidFailCallback(
  param: FetchDidFailCallbackParam,
)

Paramètres

Renvoie

  • Promise<void>

FetchDidFailCallbackParam

Propriétés

  • erreur

    Erreur

  • événement

    ExtendableEvent

  • originalRequest

    Requête

  • request

    Requête

  • state

    MapLikeObject facultatif

FetchDidSucceedCallback()

workbox-core.FetchDidSucceedCallback(
  param: FetchDidSucceedCallbackParam,
)

Paramètres

Renvoie

  • Promise<Response>

FetchDidSucceedCallbackParam

Propriétés

  • événement

    ExtendableEvent

  • request

    Requête

  • réponse

    Réponse

  • state

    MapLikeObject facultatif

HandlerCallbackOptions

Énumération

RouteHandlerCallbackOptions

ManualHandlerCallbackOptions

HandlerDidCompleteCallback()

workbox-core.HandlerDidCompleteCallback(
  param: HandlerDidCompleteCallbackParam,
)

Paramètres

Renvoie

  • Promise<void>

HandlerDidCompleteCallbackParam

Propriétés

  • erreur

    Erreur facultatif

  • événement

    ExtendableEvent

  • request

    Requête

  • réponse

    Réponse facultatif

  • state

    MapLikeObject facultatif

HandlerDidErrorCallback()

workbox-core.HandlerDidErrorCallback(
  param: HandlerDidErrorCallbackParam,
)

Paramètres

Renvoie

  • Promise<Response>

HandlerDidErrorCallbackParam

Propriétés

  • erreur

    Erreur

  • événement

    ExtendableEvent

  • request

    Requête

  • state

    MapLikeObject facultatif

HandlerDidRespondCallback()

workbox-core.HandlerDidRespondCallback(
  param: HandlerDidRespondCallbackParam,
)

Paramètres

Renvoie

  • Promise<void>

HandlerDidRespondCallbackParam

Propriétés

  • événement

    ExtendableEvent

  • request

    Requête

  • réponse

    Réponse facultatif

  • state

    MapLikeObject facultatif

HandlerWillRespondCallback()

workbox-core.HandlerWillRespondCallback(
  param: HandlerWillRespondCallbackParam,
)

Paramètres

Renvoie

  • Promise<Response>

HandlerWillRespondCallbackParam

Propriétés

  • événement

    ExtendableEvent

  • request

    Requête

  • réponse

    Réponse

  • state

    MapLikeObject facultatif

HandlerWillStartCallback()

workbox-core.HandlerWillStartCallback(
  param: HandlerWillStartCallbackParam,
)

Paramètres

Renvoie

  • Promise<void>

HandlerWillStartCallbackParam

Propriétés

  • événement

    ExtendableEvent

  • request

    Requête

  • state

    MapLikeObject facultatif

ManualHandlerCallback()

workbox-core.ManualHandlerCallback(
  options: ManualHandlerCallbackOptions,
)

Le rappel "handler" est appelé chaque fois qu'un Router fait correspondre une URL/requête à un Route via son RouteMatchCallback. Ce rappel de gestionnaire doit renvoyer un Promise qui se résout avec un Response.

Si un tableau ou un objet non vide est renvoyé par RouteMatchCallback, il sera transmis en tant qu'argument options.params de ce gestionnaire.

Paramètres

Renvoie

  • Promise<Response>

ManualHandlerCallbackOptions

Options transmises à une fonction ManualHandlerCallback.

Propriétés

  • événement

    ExtendableEvent

  • request

    chaîne | Requête

MapLikeObject

PluginState

Utilisation d'un MapLikeObject simple pour le moment, mais possibilité de l'étendre/de le restreindre à l'avenir.

Type

MapLikeObject

RequestWillFetchCallback()

workbox-core.RequestWillFetchCallback(
  param: RequestWillFetchCallbackParam,
)

Paramètres

Renvoie

  • Promise<Request>

RequestWillFetchCallbackParam

Propriétés

  • événement

    ExtendableEvent

  • request

    Requête

  • state

    MapLikeObject facultatif

RouteHandler

RouteHandlerCallback ou RouteHandlerObject. La plupart des API de workbox-routing qui acceptent des gestionnaires de parcours en prennent un ou l'autre.

Énumération

RouteHandlerCallback

RouteHandlerObject

RouteHandlerCallback()

workbox-core.RouteHandlerCallback(
  options: RouteHandlerCallbackOptions,
)

Le rappel "handler" est appelé chaque fois qu'un Router fait correspondre une URL/requête à un Route via son RouteMatchCallback. Ce rappel de gestionnaire doit renvoyer un Promise qui se résout avec un Response.

Si un tableau ou un objet non vide est renvoyé par RouteMatchCallback, il sera transmis en tant qu'argument options.params de ce gestionnaire.

Paramètres

Renvoie

  • Promise<Response>

RouteHandlerCallbackOptions

Options transmises à une fonction RouteHandlerCallback.

Propriétés

  • événement

    ExtendableEvent

  • params

    string[] | MapLikeObject facultatif

  • request

    Requête

  • url

    URL

RouteHandlerObject

Objet avec une méthode handle de type RouteHandlerCallback.

Un objet Route peut être créé avec une fonction RouteHandlerCallback ou cet objet RouteHandler. L'avantage de RouteHandler est qu'il peut être étendu (comme le fait le package workbox-strategies).

Propriétés

RouteMatchCallback()

workbox-core.RouteMatchCallback(
  options: RouteMatchCallbackOptions,
)

Le rappel "match" permet de déterminer si un Route doit s'appliquer à une URL et à une requête spécifiques. Lorsqu'une mise en correspondance se produit en réponse à un événement de récupération du client, l'objet event est également fourni. Toutefois, comme le rappel de correspondance peut être appelé en dehors d'un événement de récupération, la logique de correspondance ne doit pas supposer que l'objet event sera toujours disponible. Si le rappel de correspondance renvoie une valeur vraie, l'RouteHandlerCallback du parcours correspondant est appelé immédiatement. Si la valeur renvoyée est un tableau ou un objet non vide, cette valeur sera définie sur l'argument options.params du gestionnaire.

Paramètres

Renvoie

  • tous

RouteMatchCallbackOptions

Options transmises à une fonction RouteMatchCallback.

Propriétés

  • événement

    ExtendableEvent

  • request

    Requête

  • sameOrigin

    booléen

  • url

    URL

WorkboxPlugin

Objet avec des propriétés de rappel de cycle de vie facultatives pour les opérations de récupération et de mise en cache.

Propriétés

WorkboxPluginCallbackParam

Propriétés

Propriétés

cacheNames

Obtenez les noms de cache actuels et le préfixe/suffixe utilisés par Workbox.

cacheNames.precache est utilisé pour les éléments pré-mis en cache, cacheNames.googleAnalytics est utilisé par workbox-google-analytics pour stocker analytics.js, et cacheNames.runtime est utilisé pour tout le reste.

cacheNames.prefix permet de ne récupérer que la valeur du préfixe actuel. cacheNames.suffix permet de ne récupérer que la valeur du suffixe actuel.

Type

objet

Propriétés

  • googleAnalytics

    chaîne

  • précacher

    chaîne

  • préfixe

    chaîne

  • runtime

    chaîne

  • suffixe

    chaîne

Méthodes

clientsClaim()

workbox-core.clientsClaim()

Réclamez tous les clients actuellement disponibles une fois que le service worker est actif. Cette valeur est généralement utilisée avec skipWaiting().

copyResponse()

workbox-core.copyResponse(
  response: Response,
  modifier?: function,
)

Permet aux développeurs de copier une réponse et de modifier ses valeurs headers, status ou statusText (les valeurs pouvant être définies via un objet [ResponseInit]https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#Syntax dans le constructeur). Pour modifier ces valeurs, transmettez une fonction en tant que deuxième argument. Cette fonction sera appelée avec un seul objet avec les propriétés de réponse {headers, status, statusText}. La valeur renvoyée par cette fonction sera utilisée comme ResponseInit pour le nouveau Response. Pour modifier les valeurs, modifiez le ou les paramètres transmis et renvoyez-les, ou renvoyez un objet totalement nouveau.

Cette méthode est intentionnellement limitée aux réponses de même origine, que le CORS ait été utilisé ou non.

Paramètres

  • réponse

    Réponse

  • modificateur

    fonction facultatif

    Le paramètre modifier se présente comme suit : 

    (responseInit: ResponseInit) => ResponseInit

    • responseInit

      ResponseInit

    • retours

      ResponseInit

Renvoie

  • Promise<Response>

registerQuotaErrorCallback()

workbox-core.registerQuotaErrorCallback(
  callback: Function,
)

Ajoute une fonction à l'ensemble de quotaErrorCallbacks qui sera exécutée en cas d'erreur de quota.

Paramètres

  • rappel

    Fonction

setCacheNameDetails()

workbox-core.setCacheNameDetails(
  details: PartialCacheNameDetails,
)

Modifie les noms de cache par défaut utilisés par les packages Workbox. Les noms de cache sont générés au format <prefix>-<Cache Name>-<suffix>.

Paramètres

  • détails

    PartialCacheNameDetails

skipWaiting()

workbox-core.skipWaiting()

Cette méthode est obsolète et sera supprimée dans la version 7 de Workbox.

Appeler self.skipWaiting() est équivalent et doit être utilisé à la place.