Arrivano le opzioni CacheQueryOptions in Chrome 54

Jacopo Posnick

Se utilizzi l'API Cache Storage, all'interno di un service worker o direttamente dalle app web tramite window.caches, abbiamo una buona notizia: a partire da Chrome 54, è supportato il set completo 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

Questo indica all'algoritmo di corrispondenza di ignorare la parte relativa alla ricerca di un URL, noti anche come parametri di query dell'URL. Questo può essere utile quando hai un URL di origine che contiene parametri di query che vengono utilizzati, ad esempio, per il monitoraggio delle analisi, ma non sono significativi in termini di identificazione univoca di una risorsa nella cache. Ad esempio, molte persone sono cadute preda del seguente service worker "gotcha":

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. 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, il passaggio di index.html?utm_source=some-referral a caches.match() non restituisce la voce per index.html. Tuttavia, se ignoreSearch è impostato su true, puoi recuperare la risposta memorizzata nella cache prevista indipendentemente dai parametri di query impostati:

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

cacheName

cacheName è utile quando hai più cache e desideri che una risposta sia archiviata in una cache specifica. Utilizzalo può rendere più efficienti le tue query (dal momento che il browser deve controllare solo all'interno di una cache, invece che in 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 quando viene utilizzato con CacheStorage.match(), non con Cache.match(), perché Cache.match() opera già su un singolo nome memorizzato nella cache.

// 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 un po' più di nicchia rispetto a ignoreSearch e cacheName, ma hanno scopi specifici.

ignoreMethod ti consente di passare a match() un oggetto Request che ha method (POST, PUT e così via) come primo parametro. Normalmente 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 impostato su true, ignoreVary significa che le ricerche nella cache verranno effettuate indipendentemente dalle 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 del browser

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

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