La guía de la API de caché

La API de caché es parte de la especificación Service Worker y es una excelente manera de tener más poder en el almacenamiento en caché de recursos.

Introducción

La API de caché es parte de la especificación Service Worker y es una excelente manera de tener más poder en el almacenamiento en caché de recursos.

Te permitecaché de recursos direccionables mediante URL, lo que significa activos, páginas web, respuestas de API HTTP.

Esnodestinado a almacenar en caché fragmentos de datos individuales, que es la tarea delAPI IndexedDB.

Actualmente está disponible en Chrome> = 40, Firefox> = 39 y Opera> = 27.

Safari y Edge introdujeron recientemente soporte para él.

Internet Explorer no lo admite.

El soporte móvil es bueno en Android, compatible con Android Webview y en Chrome para Android, mientras que en iOS solo está disponible para usuarios de Opera Mobile y Firefox Mobile.

Detectar si la API de caché está disponible

La API de caché se expone a través decachesobjeto. Para detectar si la API está implementada en el navegador, simplemente verifique su existencia usando:

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

Inicializar una caché

Utilizar elcaches.openAPI, que devuelve unpromesacon unobjeto de cachélisto para ser utilizado:

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

mycachees un nombre que utilizo para identificar la caché que quiero inicializar. Es como un nombre de variable, puede usar el nombre que desee.

Si la caché aún no existe,caches.openlo crea.

Agregar elementos a la caché

loscacheobject expone dos métodos para agregar elementos a la caché:addyaddAll.

cache.add()

addacepta una única URL y, cuando se llama, recupera el recurso y lo almacena en caché.

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

Para permitir más control sobre la recuperación, en lugar de una cadena, puede pasar unaPeticiónobjeto, parte delObtener APIespecificación:

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

cache.addAll()

addAllacepta una matriz y devuelve unpromesacuando todos los recursos se hayan almacenado en caché.

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

Buscar y agregar manualmente

cache.add()obtiene automáticamente un recurso y lo almacena en caché.

La API de caché ofrece un control más granular sobre esto a través decache.put(). Usted es responsable de buscar el recurso y luego decirle a la API de caché que almacene una respuesta:

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

Recuperar un elemento del caché

cache.match()devuelve unRespuestaobjeto que contiene toda la información sobre la solicitud y la respuesta a la solicitud de la red

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

Obtenga todos los elementos en un caché

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

cachedItemses una matriz dePeticiónobjetos, que contienen la URL del recurso en elurlpropiedad.

Obtén todos los cachés disponibles

loscaches.keys()El método enumera las claves de cada caché disponible.

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

Eliminar un elemento de la caché

Dado uncacheobjeto, sudelete()El método elimina un recurso almacenado en caché.

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

Eliminar un caché

loscaches.delete()El método acepta un identificador de caché y, cuando se ejecuta, borra el caché y sus elementos almacenados en caché del sistema.

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

Más tutoriales de navegador: