Cache API

Cache API - это система для хранения и получения сетевых запросов и соответствующих ответов. Это могут быть обычные запросы и ответы, созданные в ходе работы вашего приложения, или они могут быть созданы исключительно с целью хранения некоторых данных в кеше.

Cache API был создан, чтобы позволить Service Workers кэшировать сетевые запросы, чтобы они могли предоставлять соответствующие ответы даже в автономном режиме. Однако API также можно использовать в качестве общего механизма хранения.

Где это доступно?

В настоящее время API доступен в Chrome, Opera и Firefox. И Edge, и Safari пометили API как «В разработке».

API предоставляется через глобальное свойство caches, поэтому вы можете проверить наличие API с помощью простого определения функции:

const cacheAvailable = 'caches' in self;

Доступ к API можно получить из окна, iframe, worker или service worker.

Что можно хранить

В кэше хранятся только пары объектов Request и Response, представляющие HTTP-запросы и ответы соответственно. Однако запросы и ответы могут содержать любые данные, которые можно передавать по HTTP.

Создайте объект Request, используя URL-адрес сохраняемой вещи:

const request = new Request('/images/sample1.jpg');

Конструктор объекта Response принимает множество типов данных, включая объекты Blobs, ArrayBuffers, FormData и строки.

const imageBlob = new Blob([data], {type: 'image/jpeg'});
const imageResponse = new Response(imageBlob);
const stringResponse = new Response('Hello world');

Вы можете установить тип MIME для Response, установив соответствующий заголовок.

const options = {
  headers: {
    'Content-Type': 'application/json'
  }
}
const jsonResponse = new Response('{}', options);

Работа с объектами ответа

Если вы получили Response и хотите получить доступ к его телу, вы можете использовать несколько вспомогательных методов. Каждый возвращает Promise, который разрешается со значением другого типа.

MethodDescriptionarrayBuffer Возвращает ArrayBuffer, содержащий тело, сериализованное в байты .blob Возвращает Blob. Если Response был создан с Blob, тогда этот новый Blob имеет тот же тип. В противном случае используется Content-Type из Response .textИнтерпретирует байты тела как строку в кодировке UTF-8 .jsonИнтерпретирует байты тела как строку в кодировке UTF-8, а затем пытается проанализировать ее как JSON. Возвращает результирующий объект или выдает TypeError, если строка не может быть проанализирована как JSON .formDataИнтерпретирует байты тела как HTML-форму, закодированную как 'multipart / form-data' или 'application / x-www-form-urlencoded '. Возвращает объект FormData или выдает TypeError, если данные не могут быть проанализированы .body Возвращает ReadableStream для данных тела.

Например

const response = new Response('Hello world');
response.arrayBuffer().then((buffer) => {
  console.log(new Uint8Array(buffer));
  // Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
});

Создание и открытие кеша

Чтобы открыть кеш, используйте caches.open(name) метод, передав имя кеша в качестве единственного параметра. Если именованный кеш не существует, он создается. Этот метод возвращает Promise, который разрешается с помощью объекта Cache.

caches.open('my-cache').then((cache) => {
  // do something with cache...
});

Получение из кеша

Чтобы найти элемент в кэше, вы можете использовать метод match.

cache.match(request).then((response) => console.log(request, response));

Если request - строка, она сначала должна быть преобразована в Request путем вызова new Request(request). Функция возвращает Promise, которое преобразуется в Response, если соответствующая запись найдена, или undefined в противном случае.

Чтобы определить, совпадают ли два Requests, используется не только URL-адрес. Два запроса считаются разными, если у них разные строки запроса, Vary заголовки и / или методы (GET, POST, PUT и т. Д.).

Вы можете игнорировать некоторые или все эти вещи, передав объект параметров в качестве второго параметра.

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};
cache.match(request, options).then(...);

Если совпадает более одного кешированного запроса, возвращается тот, который был создан первым.

Если вы хотите получить все совпадающие ответы, вы можете использовать cache.matchAll.

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};
cache.matchAll(request, options).then((responses) => {
  console.log(`There are ${responses.length} matching responses.`);
});

В качестве ярлыка вы можете выполнять поиск по всем кешам одновременно, используя caches.match() вместо вызова cache.match() для каждого кеша.

Searching

Cache API не предоставляет способа поиска запросов или ответов, за исключением сопоставления записей с объектом Response. Однако вы можете реализовать собственный поиск, используя фильтрацию или создав индекс.

Фильтрация

Один из способов реализовать собственный поиск - перебрать все записи и отфильтровать те, которые вам нужны. Допустим, вы хотите найти все элементы, URL-адреса которых заканчиваются на «.png».

async function findImages() {
  // Get a list of all of the caches for this origin
  const cacheNames = await caches.keys();
  const result = [];
  for (const name of cacheNames) {
    // Open the cache
    const cache = await caches.open(name);
    // Get a list of entries. Each item is a Request object
    for (const request of await cache.keys()) {
      // If the request URL matches, add the response to the result
      if (request.url.endsWith('.png')) {
        result.push(await cache.match(request));
      }
    }
  }
  return result;
}

Таким образом, вы можете использовать любое свойство объектов Request и Response для фильтрации записей. Обратите внимание, что это медленно, если вы выполняете поиск по большим наборам данных.

Создание индекса

Другой способ реализовать собственный поиск - поддерживать отдельный указатель записей, по которым можно выполнять поиск, который хранится в IndexedDB. Так как это операция, для которой была разработана IndexedDB, она имеет гораздо лучшую производительность при большом количестве записей.

Если вы сохраните URL-адрес Request вместе с доступными для поиска свойствами, вы сможете легко получить правильную запись в кэше после выполнения поиска.

Добавление в кеш

Есть три способа добавить элемент в кеш - put, add и addAll. Все три метода возвращают Promise.

cache.put

Первый - использовать cache.put(request, response). request - это либо объект Request, либо строка - если это строка, то вместо нее используется new Request(request). response должен быть Response. Эта пара хранится в кеше.

cache.put('/test.json', new Response('{"foo": "bar"}'));

cache.add

Второй - использовать cache.add(request). request обрабатывается так же, как put, но Response, который хранится в кэше, является результатом получения запроса из сети. Если выборка не удалась или код состояния ответа не находится в диапазоне 200, то ничего не сохраняется, и Promise отклоняет. Обратите внимание, что запросы между источниками, не находящиеся в режиме CORS, имеют статус 0, и поэтому такие запросы могут храниться только с put.

cache.addAll

В-третьих, есть cache.addAll(requests), где requests - это массив Request или строк URL. Это работает аналогично вызову cache.add для каждого отдельного запроса, за исключением того, что Promise отклоняет, если какой-либо отдельный запрос не кэшируется.

В каждом из этих случаев новая запись перезаписывает любую совпадающую существующую запись. При этом используются те же правила сопоставления, которые описаны в разделе о получении.

Удаление предмета

Чтобы удалить элемент из кеша:

cache.delete(request);

Где запрос может быть Request или строкой URL. Этот метод также принимает тот же объект параметров, что и cache.match, что позволяет вам удалить несколько пар _93 _ / _ 94_ для одного и того же URL-адреса.

cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});

Удаление кеша

Чтобы удалить кеш, вызовите caches.delete(name). Эта функция возвращает Promise, который разрешается в true, если кеш существовал и был удален, или false в противном случае.

Подробнее о Chache API:

Посмотрите пример Live веб-приложения, в котором используется Cache API

Оставайтесь на связи, приложение Ionic Firebase, чтобы быть в курсе последних новостей.