Arrivano le opzioni CacheQueryOptions in Chrome 54

Jeff Posnick

Se utilizzi l'API Cache Storage, all'interno di un worker di servizio o direttamente dalle app web tramite window.caches, ci sono buone notizie: a partire da Chrome 54, è supportato l'intero insieme di CacheQueryOptions, il che semplifica la ricerca delle risposte memorizzate nella cache che stai cercando.

Quali opzioni sono disponibili?

Le seguenti opzioni possono essere impostate in qualsiasi chiamata a CacheStorage.match() o Cache.match(). Se non sono impostati, per impostazione predefinita sono tutti false (o undefined per cacheName) e puoi utilizzare più opzioni in una singola chiamata a match().

ignoreSearch

In questo modo, l'algoritmo di corrispondenza ignora la parte di ricerca di un URL, nota anche come parametri di query dell'URL. Questa opzione può essere utile quando hai un URL di origine che contiene parametri di query utilizzati, ad esempio, per il monitoraggio di Analytics, ma che non sono significativi in termini di identificazione univoca di una risorsa nella cache. Ad esempio, molti utenti sono caduti nella seguente "trappola" relativa ai worker di servizio:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => cache.add('index.html'))
  );
});

self.addEventListener('fetch', event => {
  // Make sure this is a navigation request before responding.
  if (event.request.mode === 'navigation') {
    event.respondWith(
      caches.match(event.request) || fetch(event.request)
    );
  }
});

Questo tipo di codice funziona come previsto quando un utente accede direttamente a index.html, ma cosa succede se la tua app web utilizza un provider di analisi per tenere traccia dei link in entrata e l'utente accede a index.html?utm_source=some-referral? Per impostazione predefinita, se passi index.html?utm_source=some-referral a caches.match() non viene restituita la voce per index.html. Tuttavia, se ignoreSearch è impostato su true, puoi recuperare la risposta memorizzata nella cache che ti aspetti indipendentemente dai parametri di query impostati:

caches.match(event.request, {ignoreSearch: true})

cacheName

cacheName è utile quando disponi di più cache e vuoi una risposta archiviata in una cache specifica. L'utilizzo può rendere le query più efficienti (poiché il browser deve controllare solo una cache anziché tutte) e consente di recuperare una risposta specifica per un determinato URL quando più cache potrebbero avere quell'URL come chiave. cacheName ha effetto solo se utilizzato con CacheStorage.match(), non con Cache.match(), perché Cache.match() opera già su una singola cache denominata.

// The following are functionally equivalent:
caches.open('my-cache')
  .then(cache => cache.match('index.html'));

// or...
caches.match('index.html', {cacheName: 'my-cache'});

ignoreMethod e ignoreVary

ignoreMethod e ignoreVary sono leggermente più di nicchia rispetto a ignoreSearch e cacheName, ma hanno scopi specifici.

ignoreMethod ti consente di passare un oggetto Request che contenga qualsiasi method (POST, PUT e così via) come primo parametro a match(). In genere, sono consentite solo richieste GET o HEAD.

// In a more realistic scenario, postRequest might come from
// the request property of a FetchEvent.
const postRequest = new Request('index.html', {method: 'post'});

// This will never match anything.
caches.match(postRequest);

// This will match index.html in any cache.
caches.match(postRequest, {ignoreMethod: true});

Se il criterio viene impostato su true, ignoreVary significa che le ricerche nella cache verranno eseguite senza tenere conto delle intestazioni Vary impostate nelle risposte memorizzate nella cache. Se sai che non hai a che fare con risposte memorizzate nella cache che utilizzano l'intestazione Vary, non devi preoccuparti di impostare questa opzione.

Supporto browser

CacheQueryOptions è pertinente solo nei browser che supportano l'API Cache Storage. Oltre ai browser basati su Chrome e Chromium, al momento è limitato a Firefox, che supporta già CacheQueryOptions in modo nativo.

Gli sviluppatori che vogliono utilizzare CacheQueryOptions nelle versioni di Chrome precedenti alla 54 possono utilizzare un polyfill, per gentile concessione di Arthur Stolyar.