Le guide de l'API Cache

L'API Cache fait partie de la spécification Service Worker et constitue un excellent moyen d'avoir plus de puissance sur la mise en cache des ressources.

introduction

L'API Cache fait partie de la spécification Service Worker et constitue un excellent moyen d'avoir plus de puissance sur la mise en cache des ressources.

Cela vous permet demettre en cache les ressources adressables par URL, ce qui signifie des actifs, des pages Web, des réponses API HTTP.

C'estne pasdestiné à mettre en cache des morceaux de données individuels, ce qui est la tâche duAPI IndexedDB.

Il est actuellement disponible dans Chrome> = 40, Firefox> = 39 et Opera> = 27.

Safari et Edge ont récemment introduit une prise en charge.

Internet Explorer ne le prend pas en charge.

La prise en charge mobile est bonne sur Android, prise en charge sur Android Webview et dans Chrome pour Android, tandis que sur iOS, elle n'est disponible que pour les utilisateurs d'Opera Mobile et de Firefox Mobile.

Détecter si l'API Cache est disponible

L'API Cache est exposée via lecachesobjet. Pour détecter si l'API est implémentée dans le navigateur, vérifiez simplement son existence en utilisant:

if ('caches' in window) {
  //ok
}

Initialiser un cache

Utilisez lecaches.openAPI, qui renvoie unpromesseavec unobjet de cacheprêt à être utilisé:

caches.open('mycache').then(cache => {
  // you can start using the cache
})

mycacheest un nom que j'utilise pour identifier le cache que je souhaite initialiser. C'est comme un nom de variable, vous pouvez utiliser n'importe quel nom que vous voulez.

Si le cache n'existe pas encore,caches.openle crée.

Ajouter des éléments au cache

Lecacheobject expose deux méthodes pour ajouter des éléments au cache:addetaddAll.

cache.add()

addaccepte une seule URL et, lorsqu'elle est appelée, elle récupère la ressource et la met en cache.

caches.open('mycache').then(cache => {
  cache.add('/api/todos')
})

Pour permettre plus de contrôle sur la récupération, au lieu d'une chaîne, vous pouvez passer unDemanderobjet, partie de laRécupérer l'APIspécification:

caches.open('mycache').then(cache => {
  const options = {
    // the options
  }
  cache.add(new Request('/api/todos', options))
})

cache.addAll()

addAllaccepte un tableau et renvoie unpromesselorsque toutes les ressources ont été mises en cache.

caches.open('mycache').then(cache => {
  cache.addAll(['/api/todos', '/api/todos/today']).then(() => {
    //all requests were cached
  })
})

Récupérer et ajouter manuellement

cache.add()récupère automatiquement une ressource et la met en cache.

L'API Cache offre un contrôle plus granulaire à ce sujet viacache.put(). Vous êtes responsable de récupérer la ressource, puis de dire à l'API Cache de stocker une réponse:

const url = '/api/todos'
fetch(url).then(res => {
  return caches.open('mycache').then(cache => {
    return cache.put(url, res)
  })
})

Récupérer un élément du cache

cache.match()renvoie unRéponseobjet qui contient toutes les informations sur la requête et la réponse de la requête réseau

caches.open('mycache').then(cache => {
  cache.match('/api/todos').then(res => {
    //res is the Response Object
  })
})

Obtenez tous les éléments dans une cache

caches.open('mycache').then(cache => {
  cache.keys().then(cachedItems => {
    //
  })
})

cachedItemsest un tableau deDemanderobjets, qui contiennent l'URL de la ressource dans leurlbiens.

Obtenez tous les caches disponibles

Lecaches.keys()La méthode répertorie les clés de chaque cache disponible.

caches.keys().then(keys => {
  // keys is an array with the list of keys
})

Supprimer un élément du cache

Donné uncacheobjet, c'estdelete()La méthode en supprime une ressource mise en cache.

caches.open('mycache').then(cache => {
  cache.delete('/api/todos')
})

Supprimer un cache

Lecaches.delete()La méthode accepte un identificateur de cache et lorsqu'elle est exécutée, elle efface le cache et ses éléments en cache du système.

caches.delete('mycache').then(() => {
  // deleted successfully
})

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur:


Tech Wiki en ligne!