zone de travail-prémise en cache

Les service workers permettent d'enregistrer un ensemble de fichiers lors de l'installation du service worker. Ceci est souvent appelé car vous mettez en cache le contenu avant que le service worker utilisé.

Cela permet principalement aux développeurs de contrôler ce qui signifie qu'ils peuvent déterminer quand et pendant combien de temps un fichier est mis en cache au navigateur sans passer par le réseau, ce qui signifie qu'il peut être pour créer des applications Web qui fonctionnent hors connexion.

Workbox simplifie le préchargement en simplifiant l'API et en veillant à ce que les éléments soient téléchargés de manière efficace.

Fonctionnement de workbox-precaching

Lorsqu'une application Web est chargée pour la première fois, workbox-precaching examine tous les composants que vous souhaitez télécharger, supprime les doublons et connecte les événements de service worker pertinents pour télécharger et stocker les composants. Les URL qui incluent déjà des informations de gestion des versions (comme un hachage de contenu) sont utilisées comme clés de cache sans autre modification. Les URL qui n'incluent pas d'informations de gestion des versions Paramètre de requête d'URL ajouté à la clé de cache et représentant un hachage de son contenu généré par Workbox au moment de la compilation.

workbox-precaching effectue tout cela lors de l'événement install du service worker.

Lorsqu'un utilisateur revient ultérieurement sur votre application Web et que vous avez un nouveau service worker avec éléments en pré-cache, workbox-precaching examinera la nouvelle liste et identifiez ceux qui sont nouveaux et existants. doivent être mises à jour, en fonction de leurs révisions. De nouveaux éléments ou la mise à jour de révisions, sont ajoutées au cache lors de l'événement install du nouveau service worker.

Ce nouveau service worker ne sera utilisé pour répondre aux requêtes qu'une fois son événement activate déclenché. C'est dans l'événement activate que workbox-precaching recherche les éléments mis en cache qui ne figurent plus dans la liste des URL actuelles, et les supprime du cache.

workbox-precaching effectuera ces étapes à chaque installation de votre service worker et activée, ce qui garantit que l'utilisateur dispose des derniers éléments et ne télécharge que les les fichiers qui ont été modifiés.

Diffuser des réponses en pré-cache

L'appel de precacheAndRoute() ou de addRoute() crée une route correspondant aux requêtes d'URL préchargées.

La stratégie de réponse utilisée dans ce chemin est cache-first: la réponse mise en pré-cache est utilisée, sauf si la réponse mise en cache n'est pas présente (en raison de une erreur inattendue), auquel cas une réponse du réseau sera utilisée à la place.

L'ordre dans lequel vous appelez precacheAndRoute() ou addRoute() est important. Normalement, il est préférable de l'appeler au début du fichier de service worker, avant l'enregistrement de tout itinéraire supplémentaire avec registerRoute() Si vous avez d'abord appelé registerRoute() et que cet itinéraire correspond à un quelle que soit la stratégie définie dans ce chemin supplémentaire, elle sera utilisée pour au lieu de la stratégie "cache-first" utilisée par workbox-precaching.

Explication de la liste de mise en cache préalable

workbox-precaching attend un tableau d'objets avec une propriété url et revision. Ce tableau est parfois appelé "fichier manifeste de préchargement" :

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

Cette liste fait référence à un ensemble d'URL, chacune ayant son propre élément de "révision" des informations.

Pour les deuxième et troisième objets de l'exemple ci-dessus, la propriété revision est définie sur null. En effet, les informations de gestion des révisions se trouvent dans l'URL elle-même, ce qui est généralement une bonne pratique pour les composants statiques.

Le premier objet (/index.html) définit explicitement une propriété de révision, qui est un hachage généré automatiquement du contenu du fichier. Contrairement aux ressources JavaScript et CSS, les fichiers HTML ne peuvent généralement pas inclure d'informations de révision dans leurs URL. Sinon, les liens vers ces fichiers sur le Web seraient interrompus chaque fois que le contenu de la page changerait.

En transmettant une propriété de révision à precacheAndRoute(), Workbox peut savoir quand le fichier a changé et le mettre à jour en conséquence.

Workbox est fourni avec des outils permettant de générer cette liste:

  • workbox-build: package de nœuds qui peut être utilisé dans une tâche gulp ou en tant que un script d'exécution npm.
  • workbox-webpack-plugin: les utilisateurs de webpack peuvent utiliser ce plug-in.
  • workbox-cli: notre CLI permet également de générer la liste des éléments et d'ajouter à votre service worker.

Demandes entrantes pour les fichiers en pré-cache

workbox-precaching manipule les requêtes réseau entrantes pour essayer de faire correspondre les fichiers pré-mis en cache. Cela tient compte des pratiques courantes sur le Web.

Par exemple, une requête pour / peut généralement être satisfaite par le fichier situé à l'adresse /index.html

Vous trouverez ci-dessous la liste des manipulations effectuées par workbox-precaching par défaut, et comment modifier ce comportement.

Ignorer les paramètres d'URL

Les requêtes avec des paramètres de recherche peuvent être modifiées pour supprimer des valeurs spécifiques ou toutes les valeurs.

Par défaut, les paramètres de recherche commençant par utm_ ou correspondant exactement à fbclid sont supprimés. Cela signifie qu'une requête pour /about.html?utm_campaign=abcd sera satisfaite par une entrée préchargée pour /about.html.

Vous pouvez ignorer un autre ensemble de paramètres de recherche à l'aide de ignoreURLParametersMatching :

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

Index de l'annuaire

Par défaut, les requêtes se terminant par un / sont mises en correspondance avec les entrées auxquelles un index.html est ajouté à la fin. Cela signifie qu'une requête entrante pour / peut être automatiquement traitée avec la mise en cache pré-cache l'entrée /index.html.

Vous pouvez modifier ce paramètre ou le désactiver complètement en définissant directoryIndex:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

URL propres

Si une requête ne correspond pas au précache, nous ajoutons .html à la fin pour que "propre" URL (c'est-à-dire des URL "jolies"). Cela signifie qu'une requête comme /about sera gérée par l'entrée préchargée pour /about.html.

Vous pouvez désactiver ce comportement en définissant cleanUrls:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

Manipulations personnalisées

Si vous voulez définir des correspondances personnalisées entre les requêtes entrantes et les éléments mis en pré-cache, Pour ce faire, utilisez l'option urlManipulation. Il doit s'agir d'un rappel qui renvoie un tableau de correspondances possibles.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

Utilisation avancée

Utiliser directement PrecacheController

Par défaut, workbox-precaching configure les écouteurs install et activate pour vous. Pour les développeurs qui connaissent bien les service workers, cette approche n'est pas toujours souhaitable si vous avez besoin de davantage de contrôle.

Au lieu d'utiliser l'exportation par défaut, vous pouvez utiliser PrecacheController pour ajouter des éléments au précache, déterminer quand ils sont installés et quand le nettoyage doit avoir lieu.

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

Lire directement des éléments préchargés

Il peut arriver que vous deviez lire directement un composant pré-mis en cache, en dehors du contexte du routage que workbox-precaching peut effectuer automatiquement. Par exemple, vous pouvez pré-cacher des modèles HTML partiels qui doivent ensuite être récupérés et utilisés lors de la création d'une réponse complète.

En règle générale, vous pouvez utiliser l'API Cache Storage pour obtenir les objets Response pré-mis en cache, mais il existe un problème : la clé de cache d'URL à utiliser lors de l'appel de cache.match() peut contenir un paramètre de gestion des versions que workbox-precaching crée et gère automatiquement.

Pour obtenir la clé de cache appropriée, vous pouvez appeler getCacheKeyForURL(), en transmettant l'URL d'origine, puis d'utiliser le résultat cache.match() sur le cache approprié.

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

Si vous n'avez besoin que de l'objet Response en pré-cache, vous pouvez appeler matchPrecache() qui utilise automatiquement la bonne clé de cache et recherche dans la bonne cache:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

Nettoyer les anciens précaches

La plupart des versions de Workbox conservent le même format pour stocker les données préchargées, et les précaches créés par les anciennes versions de Workbox peuvent normalement être utilisés tels quels par les versions plus récentes. Toutefois, il y a rarement une modification destructive de la mise en cache préalable du stockage qui oblige les utilisateurs existants à tout télécharger à nouveau données précédemment mises en cache en pré-cache sont obsolètes. (Un tel changement s'est produit entre Workbox v3 et v4.)

Ces données obsolètes ne devraient pas interférer avec les opérations normales, mais elles contribuent à l'utilisation de votre quota de stockage global. Il peut être plus pratique pour vos utilisateurs de les supprimer explicitement. Pour ce faire, vous pouvez ajouter cleanupOutdatedCaches() à votre service worker, ou en définissant cleanupOutdatedCaches: true si vous utilisez l'un des outils de compilation de Workbox pour générer votre service worker.

Utiliser l'intégrité des sous-ressources

Certains développeurs voudront peut-être bénéficier des garanties supplémentaires offertes par intégrité des sous-ressources lors de la récupération d'URL en pré-cache sur le réseau.

Une propriété facultative supplémentaire appelée integrity peut être ajoutée à toute entrée de le fichier manifeste de mise en cache préalable. S'il est fourni, il sera utilisé comme Valeur de integrity lors de la construction du Request utilisé pour remplir le cache. S'il y a un le processus de mise en cache préalable échouera.

Déterminer quelles entrées du fichier manifeste de mise en cache doivent avoir des propriétés integrity et la détermination des valeurs appropriées à utiliser, est en dehors du cadre Outils de compilation de Workbox Les développeurs qui souhaitent l'activer doit modifier le fichier manifeste de mise en cache préalable généré par Workbox pour ajouter dans les informations appropriées. L'option manifestTransform dans la boîte de dialogue la configuration d'outils de compilation peut vous aider à:

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

Types

CleanupResult

Propriétés

  • deletedCacheRequests

    chaîne[]

InstallResult

Propriétés

  • notUpdatedURLs

    chaîne[]

  • updatedURLs

    chaîne[]

PrecacheController

Effectue un préchargement efficace des composants.

Propriétés

  • constructor

    vide

    Créez un PrecacheController.

    La fonction constructor se présente comme suit: 

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

    • options

      PrecacheControllerOptions facultatif

  • stratégie

    Stratégie

  • activer

    vide

    Supprime les éléments qui ne figurent plus dans le fichier manifeste de préchargement actuel. Appelez cette méthode à partir de l'événement d'activation du service worker.

    Remarque : cette méthode appelle event.waitUntil() à votre place. Vous n'avez donc pas besoin de l'appeler vous-même dans vos gestionnaires d'événements.

    La fonction activate se présente comme suit: 

    (event: ExtendableEvent) => {...}

    • événement

      ExtendableEvent

  • addToCacheList

    vide

    Cette méthode permet d'ajouter des éléments à la liste en pré-cache, en supprimant les doublons et de s'assurer que les informations sont valides.

    La fonction addToCacheList se présente comme suit: 

    (entries: (string | PrecacheEntry)[]) => {...}

    • entries

      (chaîne | PrecacheEntry)[]

      Tableau d'entrées à mettre en pré-cache.

  • createHandlerBoundToURL

    vide

    Renvoie une fonction qui recherche url dans le précache (en tenant compte les informations de révision du compte), puis renvoie le Response correspondant.

    La fonction createHandlerBoundToURL se présente comme suit: 

    (url: string) => {...}

    • url

      chaîne

      URL préchargée qui sera utilisée pour rechercher le Response.

  • getCacheKeyForURL

    vide

    Renvoie la clé de cache utilisée pour stocker une URL donnée. Si cette URL est sans version, comme `/index.html', la clé de cache sera la clé d'origine URL avec un paramètre de recherche ajouté.

    La fonction getCacheKeyForURL se présente comme suit: 

    (url: string) => {...}

    • url

      chaîne

      URL dont vous souhaitez rechercher la clé de cache.

    • retours

      chaîne

      URL avec gestion des versions qui correspond à une clé de cache pour l'URL d'origine, ou n'est pas défini si cette URL n'est pas mise en pré-cache.

  • getCachedURLs

    vide

    Renvoie une liste de toutes les URL qui ont été mises en pré-cache par la un service worker.

    La fonction getCachedURLs se présente comme suit : 

    () => {...}

    • retours

      chaîne[]

      URL mises en pré-cache

  • getIntegrityForCacheKey

    vide

    La fonction getIntegrityForCacheKey se présente comme suit: 

    (cacheKey: string) => {...}

    • cacheKey

      chaîne

    • retours

      chaîne

      Intégrité de la sous-ressource associée à la clé de cache, ou valeur non définie si elle n'est pas définie.

  • getURLsToCacheKeys

    vide

    Renvoie un mappage d'une URL prémise en cache à la clé de cache correspondante, en tenant compte des informations de révision de l'URL.

    La fonction getURLsToCacheKeys se présente comme suit: 

    () => {...}

    • retours

      Map<stringstring>

      URL permettant de mettre en cache le mappage des clés.

  • installer

    vide

    Précharge les éléments nouveaux et mis à jour. Appelez cette méthode à partir de l'événement d'installation du service worker.

    Remarque : cette méthode appelle event.waitUntil() à votre place. Vous n'avez donc pas besoin de l'appeler vous-même dans vos gestionnaires d'événements.

    La fonction install se présente comme suit: 

    (event: ExtendableEvent) => {...}

    • événement

      ExtendableEvent

  • matchPrecache

    vide

    Il s'agit d'un remplacement direct de cache.match(), avec les différences suivantes :

    • Il connaît le nom du précache et vérifie uniquement dans ce cache.
    • Il vous permet de transmettre une URL "originale" sans paramètres de gestion des versions. Il recherche automatiquement la clé de cache appropriée pour la version actuellement active de cette URL.

    Exemple : matchPrecache('index.html') trouvera le bon fichier en pré-cache pour le service worker actuellement actif, même si le cache est '/index.html?__WB_REVISION__=1234abcd'.

    La fonction matchPrecache se présente comme suit: 

    (request: string | Request) => {...}

    • request

      chaîne | Requête

      Clé (sans paramètres de révision) à rechercher dans le précache.

    • retours

      Promise<Response>

  • mise en cache préalable

    vide

    Ajoute des éléments à la liste de préchargement, supprime les doublons et stocke les fichiers dans le cache lorsque le worker de service s'installe.

    Cette méthode peut être appelée plusieurs fois.

    La fonction precache se présente comme suit: 

    (entries: (string | PrecacheEntry)[]) => {...}

PrecacheEntry

Propriétés

  • intégrité

    chaîne facultatif

  • Révision

    chaîne facultatif

  • url

    chaîne

PrecacheFallbackPlugin

PrecacheFallbackPlugin vous permet de spécifier une réponse de "recours hors connexion" à utiliser lorsqu'une stratégie donnée ne parvient pas à générer de réponse.

Pour ce faire, il intercepte le rappel du plug-in handlerDidError. et en renvoyant une réponse mise en pré-cache avec le paramètre de révision attendu. automatiquement en compte.

Sauf si vous transmettez explicitement une instance PrecacheController à la , l'instance par défaut sera utilisée. De manière générale, la plupart les développeurs utiliseront la valeur par défaut.

Propriétés

  • constructor

    vide

    Construit un nouveau PrecacheFallbackPlugin avec l'URL de remplacement associée.

    La fonction constructor se présente comme suit : 

    (config: object) => {...}

    • config

      objet

      • URL de remplacement

        chaîne

        URL pré-mise en cache à utiliser comme solution de secours si la stratégie associée ne peut pas générer de réponse.

      • precacheController

        PrecacheController facultatif

PrecacheRoute

Une sous-classe de workbox-routing.Route qui accepte un workbox-precaching.PrecacheController et l'utilise pour identifier les requêtes entrantes et gérer la récupération des réponses de la pré-cache.

Propriétés

PrecacheRouteOptions

Propriétés

  • cleanURLs

    Booléen facultatif

  • directoryIndex

    chaîne facultatif

  • ignoreURLParametersMatching

    RegExp[] facultatif

  • urlManipulation

    urlManipulation facultatif

PrecacheStrategy

Une implémentation de workbox-strategies.Strategy spécialement conçu pour fonctionner workbox-precaching.PrecacheController pour mettre en cache et récupérer les éléments mis en pré-cache.

Remarque: Une instance de cette classe est créée automatiquement lors de la création d'un PrecacheController; il n'est généralement pas nécessaire de la créer vous-même.

Propriétés

  • constructor

    vide

    La fonction constructor se présente comme suit: 

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

    • options

      PrecacheStrategyOptions facultatif

  • cacheName

    chaîne

  • fetchOptions

    RequestInit facultatif

  • matchOptions

    CacheQueryOptions facultatif

  • plugins

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    WorkboxPlugin

  • _awaitComplete

    vide

    La fonction _awaitComplete se présente comme suit : 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • request

      Requête

    • événement

      ExtendableEvent

    • retours

      Promesse<void>

  • _getResponse

    vide

    La fonction _getResponse se présente comme suit : 

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

    • retours

      Promise<Response>

  • _handleFetch

    vide

    La fonction _handleFetch se présente comme suit : 

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

    • retours

      Promise<Response>

  • _handleInstall

    vide

    La fonction _handleInstall se présente comme suit: 

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

    • retours

      Promise<Response>

  • handle

    vide

    Effectue une stratégie de requête et renvoie un Promise qui se résout avec un Response, en appelant tous les rappels de plug-in pertinents.

    Lorsqu'une instance de stratégie est enregistrée avec un workbox-routing.Route Workbox, cette méthode est automatiquement appelée lorsque le parcours correspond.

    Vous pouvez également utiliser cette méthode dans un FetchEvent autonome. en le transmettant à event.respondWith().

    La fonction handle se présente comme suit: 

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

    • options

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • retours

      Promise<Réponse>

  • handleAll

    vide

    Semblable à workbox-strategies.Strategy~handle, mais Au lieu de simplement renvoyer un Promise qui se résout en Response, il renvoie un tuple de promesses [response, done], où l'ancienne (response) équivaut à ce que renvoie handle(). Cette valeur est une Une promesse qui se résoudra une fois les promesses ajoutées à event.waitUntil() dans le cadre de l'exécution de la stratégie sont terminés.

    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) se termine correctement.

    La fonction handleAll se présente comme suit : 

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

    • options

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent ou un objet avec les propriétés listées ci-dessous.

    • retours

      [Promise<Response>, Promise<void>]

      Un tuple de promesses [response, done] qui peut être utilisé pour déterminer quand la réponse se résout et quand le gestionnaire a terminé tout son travail.

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

Type

fonction

Paramètres

  • { url }

    objet

    • url

      URL

Renvoie

  • URL[]

Méthodes

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

Ajoute des plug-ins à la stratégie de mise en cache préalable.

Paramètres

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

Ajoutez un écouteur fetch au service worker qui exécutera répondre à [requêtes réseau]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests avec les éléments en pré-cache.

Les requêtes d'éléments qui ne sont pas pré-mis en cache ne seront pas traitées par FetchEvent, ce qui permet à l'événement de passer à d'autres écouteurs d'événements fetch.

Paramètres

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Ajoute un écouteur d'événements activate qui nettoiera les précaches incompatibles créés par les anciennes versions de Workbox.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Fonction d'assistance qui appelle PrecacheController#createHandlerBoundToURL sur l'instance PrecacheController par défaut.

Si vous créez votre propre PrecacheController, appelez PrecacheController#createHandlerBoundToURL sur cette instance plutôt que d'utiliser cette fonction.

Paramètres

  • url

    chaîne

    L'URL en pré-cache qui sera utilisée pour rechercher Response

Renvoie

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

Prend une URL et renvoie l'URL correspondante qui pourrait être utilisée pour rechercher l'entrée dans le précache.

Si une URL relative est fournie, l'emplacement du fichier de service worker est servir de base.

Pour les entrées mises en pré-cache sans informations de révision, la clé de cache est la clé identique à l'URL d'origine.

Pour les entrées pré-cachées contenant des informations de révision, la clé de cache correspond à l'URL d'origine, avec l'ajout d'un paramètre de requête utilisé pour suivre les informations de révision.

Paramètres

  • url

    chaîne

    URL dont vous souhaitez rechercher la clé de cache.

Renvoie

  • chaîne | undefined

    Clé de cache correspondant à cette URL.

matchPrecache()

workbox-precaching.matchPrecache(
  request: string | Request,
)

Fonction d'assistance qui appelle PrecacheController#matchPrecache sur l'instance PrecacheController par défaut.

Si vous créez votre propre PrecacheController, appelez PrecacheController#matchPrecache sur cette instance plutôt que d'utiliser cette fonction.

Paramètres

  • request

    chaîne | Requête

    La clé (sans les paramètres de révision) à rechercher dans le précache.

Renvoie

  • Promise<Réponse | indéfini>

precache()

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

Ajoute des éléments à la liste de préchargement, supprime les doublons et stocke les fichiers dans le cache "lorsque le worker de service s'installe.

Cette méthode peut être appelée plusieurs fois.

Remarque : Cette méthode ne sert pas les fichiers mis en cache. Il ne précache que les fichiers. Pour répondre à une requête réseau, vous appelez workbox-precaching.addRoute

Si vous avez un seul tableau de fichiers à pré-cacher, vous pouvez simplement appeler workbox-precaching.precacheAndRoute.

Paramètres

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

Cette méthode ajoutera des entrées à la liste de pré-cache et un itinéraire vers pour répondre aux événements d'extraction.

Il s'agit d'une méthode pratique qui appelle workbox-precaching.precache et workbox-precaching.addRoute dans un même appel.

Paramètres