Cache API

Úžasné API ServiceWorker má vývojářům poskytnout trochu větší kontrolu nad tím, co je a co není v mezipaměti a jak. Jistě, můžeme hrát hry s ETags a podobně, ale dělat to programově s JavaScriptem je prostě lepší a lépe ovladatelné. Stejně jako u každého rozhraní API však přidávání věcí do mezipaměti není jen zábava a hry – čištění musíte také provést sami a „prací na čištění“ myslím nutnost vymazat mezipaměť.

Pojďme se podívat na to, jak můžete získávat mezipaměti, přidávat a mazat požadavky z mezipaměti a jak pak můžete smazat celou mezipaměť!

Detekce cache API

Chcete-li zjistit, zda prohlížeč podporuje rozhraní Cache API...

if('caches' in window) {
  // Has support!
}

...zkontrolujte přítomnost caches objekt v rámci window .

Vytvoření mezipaměti

Vytvoření mezipaměti vyžaduje caches.open volání s názvem mezipaměti:

caches.open('test-cache').then(function(cache) {
  // Cache is created and accessible
});

caches.open volání vrátí Promise a cache objekt, který byl vytvořen nebo existoval před open zavolejte.

Přidávání do mezipaměti

Mezipaměť si můžete představit jako pole Request objekty, které fungují jako klíče k jejich odpovědím, které ukládá prohlížeč. Jednoduché přidání do mezipaměti se děje dvěma hlavními metodami:add a addAll . Těmto metodám můžete zadat řetězec pro adresu URL, která se má načíst a uložit do mezipaměti, nebo Request objekt. Můžete se dozvědět více o Request objekty přečtením mého příspěvku k načtení API.

Pro hromadné přidávání adres URL do mezipaměti můžete použít addAll metoda:

caches.open('test-cache').then(function(cache) { 
  cache.addAll(['/', '/images/logo.png'])
    .then(function() { 
      // Cached!
    });
});

addAll metoda přijímá pole adres URL, jejichž adresy URL a odpovědi by měly být uloženy do mezipaměti. addAll vrátí slib. Chcete-li přidat jednu adresu URL, použijte add metoda:

caches.open('test-cache').then(function(cache) {
  cache.add('/page/1');  // "/page/1" URL will be fetched and cached!
});

add může také přijmout vlastní Request :

caches.open('test-cache').then(function(cache) {
  cache.add(new Request('/page/1', { /* request options */ }));
});

Podobné jako add je put přičemž můžete přidat adresu URL a její Response objekt:

fetch('/page/1').then(function(response) {
  return caches.open('test-cache').then(function(cache) {
    return cache.put('/page/1', response);
  });
});

Prozkoumávání mezipaměti

Chcete-li zobrazit požadavky, které již byly uloženy do mezipaměti, můžete použít keys jednotlivé mezipaměti metoda k načtení pole mezipaměti Request objekty:

caches.open('test-cache').then(function(cache) { 
  cache.keys().then(function(cachedRequests) { 
    console.log(cachedRequests); // [Request, Request]
  });
});

/*
Request {
  bodyUsed: false
  credentials: "omit"
  headers: Headers
  integrity: ""
  method: "GET"
  mode: "no-cors"
  redirect: "follow"
  referrer: ""
  url: "https://fullhost.tld/images/logo.png"
}
*/

Pokud si přejete zobrazit odpověď z mezipaměti Request , můžete tak učinit pomocí cache.match nebo cache.matchAll :

caches.open('test-cache').then(function(cache) {
  cache.match('/page/1').then(function(matchedResponse) {
    console.log(matchedResponse);
  });
});

/*
Response {
  body: (...),
  bodyUsed: false,
  headers: Headers,
  ok: true,
  status: 200,
  statusText: "OK",
  type: "basic",
  url: "https://davidwalsh.name/page/1"
}
*/

Můžete se dozvědět více o Response objekty přečtením mého příspěvku k načtení API.

Odebrání požadavku uloženého v mezipaměti

Chcete-li odstranit požadavek z mezipaměti, použijte delete mezipaměti metoda:

caches.open('test-cache').then(function(cache) {
  cache.delete('/page/1');
});

Mezipaměť již nebude obsahovat /page/1 !

Získání existujících názvů mezipaměti

Chcete-li získat názvy existujících mezipamětí, použijte caches.keys :

caches.keys().then(function(cacheKeys) { 
  console.log(cacheKeys); // ex: ["test-cache"]
});

window.caches.keys() znovu vrátí slib.

Smazání mezipaměti

Smazání mezipaměti je jednoduché, jakmile máte název klíče mezipaměti:

caches.delete('test-cache').then(function() { 
  console.log('Cache successfully deleted!'); 
});

Mezipaměť často smažete, když ji nahrazujete novou (pro spuštění opětovné instalace nového servisního pracovníka):

// Assuming `CACHE_NAME` is the newest name
// Time to clean up the old!
var CACHE_NAME = 'version-8';

// ...

caches.keys().then(function(cacheNames) {
  return Promise.all(
    cacheNames.map(function(cacheName) {
      if(cacheName != CACHE_NAME) {
        return caches.delete(cacheName);
      }
    })
  );
});

Tyto úryvky si budete chtít ponechat v sadě nástrojů, abyste se mohli stát expertem na servisní pracovníky. Chrome a Firefox nyní mají podporu servisních pracovníků, takže uvidíte mnohem více webů/aplikací dostupných (spolehlivě) offline a načítají se mnohem rychleji. Užijte si to!