Руководство по Cache API

Cache API является частью спецификации Service Worker и представляет собой отличный способ повысить эффективность кэширования ресурсов.

Вступление

Cache API является частью спецификации Service Worker и представляет собой отличный способ повысить эффективность кэширования ресурсов.

Это позволяет вамкешировать ресурсы с URL-адресом, что означает ресурсы, веб-страницы, ответы HTTP API.

Этонетпредназначен для кэширования отдельных фрагментов данных, что является задачейIndexedDB API.

В настоящее время он доступен в Chrome> = 40, Firefox> = 39 и Opera> = 27.

Safari и Edge недавно представили его поддержку.

Internet Explorer его не поддерживает.

Мобильная поддержка хороша на Android, поддерживается в Android Webview и в Chrome для Android, тогда как в iOS она доступна только пользователям Opera Mobile и Firefox Mobile.

Определить, доступен ли Cache API

Cache API предоставляется черезcachesобъект. Чтобы определить, реализован ли API в браузере, просто проверьте его наличие, используя:

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

Инициализировать кеш

Использоватьcaches.openAPI, который возвращаетобещатьсобъект кешаготовы к использованию:

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

mycacheэто имя, которое я использую для идентификации кеша, который я хочу инициализировать. Это похоже на имя переменной, вы можете использовать любое имя, какое захотите.

Если кеша еще нет,caches.openсоздает это.

Добавить элементы в кеш

Вcacheобъект предоставляет два метода для добавления элементов в кеш:addиaddAll.

cache.add()

addпринимает один URL-адрес, а при вызове извлекает ресурс и кэширует его.

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

Чтобы обеспечить больший контроль над выборкой, вместо строки вы можете передатьЗапрособъект, частьПолучить APIТехнические характеристики:

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

cache.addAll()

addAllпринимает массив и возвращаетобещатькогда все ресурсы кэшированы.

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

Получить и добавить вручную

cache.add()автоматически извлекает ресурс и кэширует его.

Cache API предлагает более детальный контроль над этим с помощьюcache.put(). Вы несете ответственность за выборку ресурса и последующее указание Cache API сохранить ответ:

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

Получить элемент из кеша

cache.match()возвращаетОтветобъект, который содержит всю информацию о запросе и ответе на сетевой запрос

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

Получить все предметы в тайнике

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

cachedItemsэто массивЗапрособъекты, которые содержат URL-адрес ресурса вurlсвойство.

Получить все доступные кеши

Вcaches.keys()Метод перечисляет ключи каждого доступного кеша.

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

Удалить элемент из кеша

Учитываяcacheобъект, егоdelete()удаляет из него кэшированный ресурс.

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

Удалить кеш

Вcaches.delete()принимает идентификатор кеша и при выполнении стирает кеш и его кэшированные элементы из системы.

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

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру: