pre-memorizzazione nella cache della casella di lavoro

Una funzionalità dei worker di servizio è la possibilità di salvare un insieme di file nella cache durante l'installazione del worker di servizio. Questo viene spesso definito "precaching", poiché memorizzi nella cache i contenuti prima dell'utilizzo del service worker.

Il motivo principale per farlo è che offre agli sviluppatori il controllo sulla cache, il che significa che possono determinare quando e per quanto tempo un file viene memorizzato nella cache, nonché servirlo al browser senza accedere alla rete. Ciò significa che può essere utilizzato per creare app web che funzionano offline.

Workbox semplifica il precaricamento semplificando l'API e garantendo che gli asset vengano scaricati in modo efficiente.

Come funziona workbox-precaching

Quando un'app web viene caricata per la prima volta, workbox-precaching esamina tutti gli asset che vuoi scaricare, rimuove eventuali duplicati e collega gli eventi di service worker pertinenti per scaricare e archiviare gli asset. Gli URL che includono già informazioni sul controllo delle versioni (ad esempio un hash dei contenuti) vengono utilizzati come chiavi della cache senza alcuna ulteriore modifica. Gli URL che non includono informazioni sul controllo delle versioni hanno un parametro di query URL aggiuntivo aggiunto alla chiave della cache che rappresenta un hash dei contenuti che Workbox genera in fase di compilazione.

workbox-precaching esegue tutto questo durante l'evento install del servizio worker.

Quando un utente torna a visitare la tua app web e hai un nuovo worker di servizio con diversi asset pre-cache, workbox-precaching esaminerà il nuovo elenco e determinerà quali asset sono completamente nuovi e quali asset esistenti devono essere aggiornati, in base alla revisione. Eventuali nuovi asset o revisioni di aggiornamento vengono aggiunti alla cache durante l'evento install del nuovo worker di servizio.

Questo nuovo worker di servizio non verrà utilizzato per rispondere alle richieste finché non verrà attivato il relativo evento activate. È nell'evento activate che workbox-precaching verificherà la presenza di asset memorizzati nella cache che non sono più presenti nell'elenco degli URL attuali e li rimuoverà dalla cache.

workbox-precaching eseguirà questi passaggi ogni volta che il tuo worker di servizio viene installato e attivato, assicurando all'utente gli asset più recenti e scaricando solo i file che sono stati modificati.

Pubblicazione di risposte memorizzate nella cache

La chiamata a precacheAndRoute() o addRoute() creerà un percorso che corrisponde alle richieste per gli URL pre-memorizzati nella cache.

La strategia di risposta utilizzata in questo percorso è cache-first: verrà utilizzata la risposta memorizzata nella cache, a meno che questa risposta non sia presente (a causa di un errore imprevisto), nel qual caso verrà utilizzata una risposta di rete.

L'ordine in cui chiami precacheAndRoute() o addRoute() è importante. In genere, è consigliabile chiamarlo all'inizio del file del servizio worker, prima di registrare eventuali percorsi aggiuntivi con registerRoute(). Se hai chiamato prima registerRoute() e questo percorso corrispondeva a una richiesta in entrata, per rispondere verrà utilizzata la strategia che hai definito in quel percorso aggiuntivo anziché la strategia cache-first utilizzata da workbox-precaching.

Spiegazione dell'elenco di precache

workbox-precaching prevede un array di oggetti con proprietà url e revision. A volte questo array è definito manifest di precache:

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 ...
]);

Questo elenco fa riferimento a un insieme di URL, ciascuno con le proprie informazioni sulla "revisione".

Per il secondo e il terzo oggetto nell'esempio precedente, la proprietà revision è impostata su null. Questo perché le informazioni sulla revisione sono nell'URL stesso, che in genere è una best practice per gli asset statici.

Il primo oggetto (/index.html) imposta esplicitamente una proprietà di revisione, che è un hash generato automaticamente dei contenuti del file. A differenza delle risorse JavaScript e CSS, in genere i file HTML non possono includere informazioni sulle revisioni nei relativi URL, altrimenti i link a questi file sul web si interromperebbero ogni volta che i contenuti della pagina cambiano.

Se passi una proprietà di revisione a precacheAndRoute(), Workbox può sapere quando il file è stato modificato e aggiornarlo di conseguenza.

Workbox include strumenti utili per generare questo elenco:

  • workbox-build: si tratta di un pacchetto Node che può essere utilizzato in un'attività gulp o come script di esecuzione npm.
  • workbox-webpack-plugin: gli utenti di webpack possono utilizzare questo plug-in.
  • workbox-cli: la nostra CLI può essere utilizzata anche per generare l'elenco delle risorse e aggiungerle al tuo service worker.

Richieste in entrata per file pre-cache

Una cosa che workbox-precaching fa immediatamente è manipolare le richieste di rete in arrivo per cercare di trovare corrispondenze con i file pre-memorizzati nella cache. Ciò consente di gestire le pratiche comuni sul web.

Ad esempio, una richiesta di / in genere può essere soddisfatta dal file in /index.html.

Di seguito è riportato l'elenco delle manipolazioni eseguite da workbox-precaching per impostazione predefinita e come puoi modificarne il comportamento.

Ignora i parametri URL

Le richieste con parametri di ricerca possono essere modificate per rimuovere valori specifici o tutti i valori.

Per impostazione predefinita, i parametri di ricerca che iniziano con utm_ o corrispondono esattamente a fbclid vengono rimossi, il che significa che una richiesta di /about.html?utm_campaign=abcd verrà soddisfatta con una voce memorizzata nella cache per /about.html.

Puoi ignorare un altro insieme di parametri di ricerca utilizzando 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: [/.*/],
  }
);

Indice della directory

Per impostazione predefinita, le richieste che terminano con / verranno associate alle voci con un index.html aggiunto alla fine. Ciò significa che una richiesta in arrivo per / può essere gestita automaticamente con la voce pre-memorizzata /index.html.

Puoi modificarlo in un'altra opzione o disattivarlo completamente impostando 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 puliti

Se una richiesta non corrisponde alla precache, aggiungeremo .html alla fine per supportare gli URL "puliti" (noti anche come URL "belli"). Ciò significa che una richiesta come /about verrà gestita dalla voce memorizzata nella cache per /about.html.

Puoi disattivare questo comportamento impostando cleanUrls:

import {precacheAndRoute} from 'workbox-precaching';

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

Manipolazioni personalizzate

Se vuoi definire corrispondenze personalizzate dalle richieste in arrivo agli asset pre-cache, puoi farlo con l'opzione urlManipulation. Deve essere un callback che restituisce un array di possibili corrispondenze.

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];
    },
  }
);

Utilizzo avanzato

Utilizzo diretto di PrecacheController

Per impostazione predefinita, workbox-precaching configurerà gli ascoltatori install e activate per te. Per gli sviluppatori che hanno dimestichezza con i service worker, questa opzione potrebbe non essere auspicabile se hai bisogno di un maggiore controllo.

Anziché utilizzare l'esportazione predefinita, puoi utilizzare direttamente PrecacheController per aggiungere elementi alla precache, determinare quando vengono installati questi asset e quando deve avvenire la pulizia.

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(...));
});

Leggere direttamente gli asset pre-caricati

A volte potrebbe essere necessario leggere direttamente un asset pre-memorizzato, al di fuori del contesto del routing che workbox-precaching può eseguire automaticamente. Ad esempio, potresti voler eseguire la precache di modelli HTML parziali che devono poi essere recuperati e utilizzati per la costruzione di una risposta completa.

In generale, puoi utilizzare l'API Cache Storage per ottenere gli oggetti Response pre-memorizzati nella cache, ma c'è un problema: la chiave della cache dell'URL da utilizzare quando chiami cache.match() potrebbe contenere un parametro di controllo delle versioni che workbox-precaching crea e gestisce automaticamente.

Per ottenere la chiave della cache corretta, puoi chiamare getCacheKeyForURL(), passando l'URL originale, quindi utilizzare il risultato per eseguire un cache.match() sulla cache appropriata.

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'));

In alternativa, se ti serve solo l'oggetto Response precompilato, puoi chiamare matchPrecache(), che utilizzerà automaticamente la chiave della cache corretta e cercherà nella cache corretta:

import {matchPrecache} from 'workbox-precaching';

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

Eliminare le precache obsolete

La maggior parte delle release di Workbox mantiene lo stesso formato per l'archiviazione dei dati pre-cache e le precache create da versioni precedenti di Workbox possono essere utilizzate così come sono dalle release più recenti. Tuttavia, raramente si verifica una modifica che comporta la rottura dello spazio di archiviazione precaching che richiede agli utenti esistenti di scaricare di nuovo tutto e rende obsoleti i dati precaching precedenti. Questa modifica è avvenuta tra le release Workbox 3 e 4.

Questi dati obsoleti non dovrebbero interferire con le normali operazioni, ma contribuiscono all'utilizzo complessivo della quota di archiviazione e possono essere più facili da gestire per gli utenti se vengono eliminati esplicitamente. A tale scopo, puoi aggiungere cleanupOutdatedCaches() al tuo service worker o impostare cleanupOutdatedCaches: true se utilizzi uno degli strumenti di compilazione di Workbox per generare il tuo service worker.

Utilizzo di Integrità dei sottomatrici

Alcuni sviluppatori potrebbero volere le garanzie aggiuntive offerte dall'applicazione dell'integrità delle risorse secondarie quando recuperano gli URL precaricati dalla rete.

A qualsiasi voce del manifest di precache è possibile aggiungere un'ulteriore proprietà facoltativa denominata integrity. Se specificato, verrà utilizzato come valore integrity durante la creazione di Request utilizzato per compilare la cache. In caso di mancata corrispondenza, il processo di precaching non andrà a buon fine.

Determinare quali voci del manifest precache devono avere proprietà integrity e capire i valori appropriati da utilizzare non rientra nell'ambito degli strumenti di compilazione di Workbox. Gli sviluppatori che vogliono attivare questa funzionalità devono invece modificare il manifest precache generato da Workbox per aggiungere autonomamente le informazioni appropriate. L'opzione manifestTransform nella configurazione degli strumenti di compilazione di Workbox può essere utile per:

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.

Tipi

CleanupResult

Proprietà

  • deletedCacheRequests

    stringa[]

InstallResult

Proprietà

  • notUpdatedURLs

    stringa[]

  • updatedURLs

    stringa[]

PrecacheController

Esegue il pre-caching efficiente delle risorse.

Proprietà

  • costruttore

    nullo

    Crea un nuovo PrecacheController.

    La funzione constructor ha il seguente aspetto: 

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

    • opzioni

      PrecacheControllerOptions facoltativo

  • strategia

    Strategia

  • attiva

    nullo

    Consente di eliminare gli asset non più presenti nel manifest di precache corrente. Chiama questo metodo dall'evento di attivazione del worker di servizio.

    Nota: questo metodo chiama event.waitUntil() per te, quindi non devi chiamarlo autonomamente nei gestori degli eventi.

    La funzione activate ha il seguente aspetto: 

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

    • evento

      ExtendableEvent

  • addToCacheList

    nullo

    Questo metodo aggiunge elementi all'elenco di precache, rimuovendo i duplicati e garantendo la validità delle informazioni.

    La funzione addToCacheList ha il seguente aspetto: 

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

    • entries

      (stringa | PrecacheEntry)[]

      Array di voci da pre-memorizzare nella cache.

  • createHandlerBoundToURL

    nullo

    Restituisce una funzione che cerca url nella precache (tenendo conto delle informazioni sulla revisione) e restituisce il Response corrispondente.

    La funzione createHandlerBoundToURL ha il seguente aspetto: 

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

    • url

      stringa

      L'URL memorizzato nella cache che verrà utilizzato per cercareResponse.

  • getCacheKeyForURL

    nullo

    Restituisce la chiave della cache utilizzata per memorizzare un determinato URL. Se l'URL non è sottoposto a controllo della versione, ad esempio "/index.html", la chiave della cache sarà l'URL originale con un parametro di ricerca aggiunto.

    La funzione getCacheKeyForURL ha il seguente aspetto: 

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

    • url

      stringa

      Un URL di cui vuoi cercare la chiave della cache.

    • returns

      stringa

      L'URL con versione che corrisponde a una chiave della cache per l'URL originale o non definito se l'URL non è memorizzato nella cache.

  • getCachedURLs

    nullo

    Restituisce un elenco di tutti gli URL che sono stati pre-memorizzati nella cache dall'attuale servizio worker.

    La funzione getCachedURLs ha il seguente aspetto: 

    () => {...}

    • returns

      stringa[]

      Gli URL memorizzati nella cache.

  • getIntegrityForCacheKey

    nullo

    La funzione getIntegrityForCacheKey ha il seguente aspetto: 

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

    • cacheKey

      stringa

    • returns

      stringa

      L'integrità della risorsa secondaria associata alla chiave della cache o un valore non definito se non è impostata.

  • getURLsToCacheKeys

    nullo

    Restituisce una mappatura di un URL precompilato alla chiave della cache corrispondente, tenendo conto delle informazioni sulla revisione dell'URL.

    La funzione getURLsToCacheKeys ha il seguente aspetto: 

    () => {...}

    • returns

      Map<stringstring>

      Un URL alla mappatura delle chiavi della cache.

  • installa

    nullo

    Esegue la memorizzazione nella cache di asset nuovi e aggiornati. Chiama questo metodo dall'evento di installazione del servizio worker.

    Nota: questo metodo chiama event.waitUntil() per te, quindi non devi chiamarlo autonomamente nei gestori degli eventi.

    La funzione install ha il seguente aspetto: 

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

    • evento

      ExtendableEvent

  • matchPrecache

    nullo

    Questa operazione sostituisce direttamente cache.match() con le seguenti differenze:

    • Sa qual è il nome della precache e la controlla solo in quella cache.
    • Ti consente di passare un URL "originale" senza parametri di versione e cercherà automaticamente la chiave della cache corretta per la revisione attualmente attiva dell'URL.

    Ad es. matchPrecache('index.html') troverà la risposta pre-memorizzata corretta per il servizio worker attualmente attivo, anche se la chiave della cache effettiva è '/index.html?__WB_REVISION__=1234abcd'.

    La funzione matchPrecache ha il seguente aspetto: 

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

    • richiesta

      stringa | Richiesta

      La chiave (senza i parametri di revisione) da cercare nella cache.

    • returns

      Promise<Response>

  • precache

    nullo

    Aggiunge elementi all'elenco della cache precompilata, rimuove eventuali duplicati e archivia i file nella cache" quando viene installato il servizio worker.

    Questo metodo può essere chiamato più volte.

    La funzione precache ha il seguente aspetto: 

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

PrecacheEntry

Proprietà

  • integrità

    stringa facoltativa

  • revisione

    stringa facoltativa

  • url

    stringa

PrecacheFallbackPlugin

PrecacheFallbackPlugin consente di specificare una risposta di "ripristino offline" da utilizzare quando una determinata strategia non è in grado di generare una risposta.

A tale scopo, intercetta il callback del plug-in handlerDidError e restituisce una risposta memorizzata nella cache, tenendo conto automaticamente del parametro di revisione previsto.

A meno che non passi esplicitamente un'istanza PrecacheController al costruttore, verrà utilizzata l'istanza predefinita. In genere, la maggior parte degli sviluppatori finirà per utilizzare il valore predefinito.

Proprietà

  • costruttore

    nullo

    Costruisce un nuovo PrecacheFallbackPlugin con il fallbackURL associato.

    La funzione constructor ha il seguente aspetto: 

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

    • config

      oggetto

      • fallbackURL

        stringa

        Un URL precompilato da utilizzare come opzione di riserva se la strategia associata non è in grado di generare una risposta.

      • precacheController

        PrecacheController facoltativo

PrecacheRoute

Una sottoclasse di workbox-routing.Route che prende un'istanza di workbox-precaching.PrecacheController e la utilizza per associare le richieste in arrivo e gestire il recupero delle risposte dal precache.

Proprietà

PrecacheRouteOptions

Proprietà

  • cleanURLs

    booleano facoltativo

  • directoryIndex

    stringa facoltativa

  • ignoreURLParametersMatching

    RegExp[] facoltativo

  • urlManipulation

    urlManipulation facoltativo

PrecacheStrategy

Un'implementazione di workbox-strategies.Strategy appositamente progettata per funzionare con workbox-precaching.PrecacheController sia per memorizzare nella cache che per recuperare gli asset pre-memorizzati nella cache.

Nota: un'istanza di questa classe viene creata automaticamente quando viene creato un PrecacheController; in genere non è necessario crearla manualmente.

Proprietà

  • costruttore

    nullo

    La funzione constructor ha il seguente aspetto: 

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

    • opzioni

      PrecacheStrategyOptions facoltativo

  • cacheName

    stringa

  • fetchOptions

    RequestInit facoltativo

  • matchOptions

    CacheQueryOptions facoltativo

  • plugins

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    WorkboxPlugin

  • _awaitComplete

    nullo

    La funzione _awaitComplete ha il seguente aspetto: 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • richiesta

      Richiesta

    • evento

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    nullo

    La funzione _getResponse ha il seguente aspetto: 

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

    • returns

      Promise<Response>

  • _handleFetch

    nullo

    La funzione _handleFetch ha il seguente aspetto: 

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

    • returns

      Promise<Response>

  • _handleInstall

    nullo

    La funzione _handleInstall ha il seguente aspetto: 

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

    • returns

      Promise<Response>

  • handle

    nullo

    Esegui una strategia di richiesta e restituisce un Promise che verrà risolto con un Response, richiamando tutti i callback dei plug-in pertinenti.

    Quando un'istanza di strategia è registrata in Workbox workbox-routing.Route, questo metodo viene chiamato automaticamente quando il percorso corrisponde.

    In alternativa, questo metodo può essere utilizzato in un ascoltatore FetchEvent autonomo passandolo a event.respondWith().

    La funzione handle ha il seguente aspetto: 

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

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      Promise<Response>

  • handleAll

    nullo

    È simile a workbox-strategies.Strategy~handle, ma invece di restituire solo un Promise che si risolve in un Response, restituirà un'tupla di promesse [response, done], dove la prima (response) è equivalente a ciò che restituisce handle() e la seconda è una promessa che verrà risolta al termine dell'esecuzione di tutte le promesse aggiunte a event.waitUntil() nell'ambito dell'esecuzione della strategia.

    Puoi attendere la promessa done per assicurarti che qualsiasi lavoro aggiuntivo eseguito dalla strategia (di solito la memorizzazione nella cache delle risposte) venga completato correttamente.

    La funzione handleAll ha il seguente aspetto: 

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

    • opzioni

      FetchEvent | HandlerCallbackOptions

      Un FetchEvent o un oggetto con le proprietà elencate di seguito.

    • returns

      [Promise<Response>, Promise<void>]

      Una tupla di promesse [risposta, completata] che può essere utilizzata per determinare quando la risposta viene risolta e quando il gestore ha completato tutto il proprio lavoro.

urlManipulation()

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

Tipo

funzione

Parametri

  • { url }

    oggetto

    • url

      URL

Resi

  • URL[]

Metodi

addPlugins()

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

Aggiunge plug-in alla strategia di precaching.

Parametri

addRoute()

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

Aggiungi un ascoltatore fetch al service worker che risponderà alle [richieste di rete]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests con gli asset memorizzati nella cache.

Le richieste di asset non memorizzati nella cache non riceveranno risposta da FetchEvent, pertanto l'evento verrà passato ad altri ascoltatori di eventi fetch.

Parametri

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Aggiunge un gestore di eventi activate che ripulirà le precache incompatibili create da versioni precedenti di Workbox.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Funzione di supporto che chiama PrecacheController#createHandlerBoundToURL sull'istanza predefinita PrecacheController.

Se crei il tuo PrecacheController, chiama PrecacheController#createHandlerBoundToURL su quell'istanza anziché utilizzare questa funzione.

Parametri

  • url

    stringa

    L'URL memorizzato nella cache che verrà utilizzato per cercareResponse.

Resi

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

Riceve un URL e restituisce l'URL corrispondente che può essere utilizzato per eseguire la ricerca della voce nella precache.

Se viene fornito un URL relativo, verrà utilizzata come base la posizione del file del servizio worker.

Per le voci memorizzate nella cache senza informazioni sulla revisione, la chiave della cache sarà uguale all'URL originale.

Per le voci memorizzate nella cache con informazioni sulle revisioni, la chiave della cache sarà l'URL originale con l'aggiunta di un parametro di query utilizzato per tenere traccia delle informazioni sulle revisioni.

Parametri

  • url

    stringa

    L'URL di cui cercare la chiave della cache.

Resi

  • stringa | non definito

    La chiave della cache corrispondente a quell'URL.

matchPrecache()

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

Funzione di supporto che chiama PrecacheController#matchPrecache sull'istanza predefinita PrecacheController.

Se crei il tuo PrecacheController, chiama PrecacheController#matchPrecache su quell'istanza, invece di utilizzare questa funzione.

Parametri

  • richiesta

    stringa | Richiesta

    La chiave (senza parametri di revisione) da cercare nella precache.

Resi

  • Promise<Response | undefined>

precache()

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

Aggiunge elementi all'elenco della cache precompilata, rimuove eventuali duplicati e archivia i file nella cache" quando viene installato il servizio worker.

Questo metodo può essere chiamato più volte.

Tieni presente che questo metodo non pubblicherà i file memorizzati nella cache. Esegue solo la precache dei file. Per rispondere a una richiesta di rete, chiama workbox-precaching.addRoute.

Se hai un singolo array di file da memorizzare nella cache, puoi semplicemente chiamare workbox-precaching.precacheAndRoute.

Parametri

precacheAndRoute()

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

Questo metodo aggiunge voci all'elenco di precache e una route per rispondere agli eventi di recupero.

Si tratta di un metodo di utilità che chiama workbox-precaching.precache e workbox-precaching.addRoute in un'unica chiamata.

Parametri