Cache API в JavaScript и как его использовать

Cache API в JavaScript и как его использовать

Комментарии
Содержание
  1. Проверка поддержки Cache API
  2. Открытие кэша
  3. Добавление ресурсов в кэш
    1. Cache.add()
    2. Cache.addAll()
    3. Cache.put()
  4. Извлечение ресурсов из кэша
  5. Удаление ресурсов из кэша
  6. Заключение

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

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

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

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

Проверка поддержки Cache API

Cache API поддерживается в большинстве современных браузеров, включая Chrome, Firefox, Safari и Edge. Перед использованием Cache API необходимо проверить, поддерживает ли его браузер. Чтобы проверить, поддерживает ли браузер Cache API, можно воспользоваться приведенным ниже кодом:

if ('caches' in window) {
	// Cache API is supported
	//You can add your code here
} else {
	// Cache API is not supported
}

Приведенный выше код проверяет, доступен ли объект caches в глобальном объекте окна. Если он есть, то браузер поддерживает Cache API.

Примечание: Cache API не всегда доступен в каждом браузере или среде. Причины, по которым Cache API может быть недоступен, следующие:

  • Настройки браузера
  • Ограничения безопасности
  • Поддержка браузера

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

Открытие кэша

Для открытия кэша мы используем метод caches.open(). Этот метод принимает в качестве параметра строку, представляющую собой имя кэша, который мы хотим открыть. Если кэш не существует, то он будет создан. Приведем пример:

caches
	.open('my-cache')
	.then(function (cache) {
		// Cache opened successfully
	})
	.catch(function (error) {
		// Failed to open cache
	});

Здесь код открывает кэш с именем my-cache и возвращает обещание, которое в случае успеха разрешается с объектом кэша. При возникновении ошибки обещание отклоняется с объектом error.

Добавление ресурсов в кэш

Рассмотрим каждый из этих методов.

Cache.add()

В этом методе Cache.add() в качестве аргумента принимается URL и добавляется в кэш ответ с этого URL. Если ответ уже находится в кэше, то метод ничего не делает. Например:

caches.open('my-cache').then((cache) => {
	cache
		.add('/api/data')
		.then(() => console.log('Data added to cache.'))
		.catch((error) => console.error('Error adding data to cache:', error));
});

В приведенном выше коде вы открываете кэш с именем my-cache, а затем добавляете в него ответ от URL /api/data. При успешном выполнении операции в консоль выводится сообщение. Если произошла ошибка, то в консоль выводится сообщение об ошибке.

Cache.addAll()

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

const urls = ['/api/data1', '/api/data2', '/api/data3'];

caches.open('my-cache').then((cache) => {
	cache
		.addAll(urls)
		.then(() => console.log('Data added to cache.'))
		.catch((error) => console.error('Error adding data to cache:', error));
});

В приведенном выше примере задается массив URL-адресов, а затем открывается кэш с именем my-cache. Теперь можно использовать метод Cache.addALL() для добавления в кэш ответов от URL-адресов из массива. При успешном выполнении операции в консоль выводится сообщение. Если произошла ошибка, то в консоль выводится сообщение об ошибке.

Cache.put()

Метод Cache.put() работает иначе, чем другие методы: он принимает в качестве аргумента объект запроса и добавляет в кэш ответ от этого запроса. Если ответ уже находится в кэше, то метод перезаписывает его. Приведем пример:

const request = new Request('/api/data');

caches.open('my-cache').then((cache) => {
	fetch(request)
		.then((response) => {
			cache
				.put(request, response)
				.then(() => console.log('Data added to cache.'))
				.catch((error) => console.error('Error adding data to cache:', error));
		})
		.catch((error) => console.error('Error fetching data:', error));
});

В приведенном выше коде вы создаете новый объект запроса для URL /api/data, а затем открываете кэш с именем my-cache. Теперь вы получаете запрос с помощью метода fetch() и добавляете ответ в кэш с помощью метода Cache.put().

Извлечение ресурсов из кэша

Cache API предоставляет два основных метода для извлечения ресурсов из кэша: match() и matchAll(). Метод match() используется для извлечения из кэша одного ресурса, а метод matchAll() - для извлечения всех ресурсов, соответствующих заданному запросу. Приведем пример использования метода match() для получения одного ресурса из кэша:

caches.open("my-cache").then(function (cache) {
  cache.match("/path/to/resource").then(function (response) {
    if (response) {
      // Resource found in cache
      console.log(response);
    } else {
      // Resource not found in cache
    }
  });

Здесь сначала открывается кэш с помощью метода caches.open()который возвращает обещание, разрешающее объект кэша. Затем используется метод match() объекта кэша для получения ресурса по указанному пути. Если ресурс найден в кэше, метод match() возвращает объект response, который может быть использован для доступа к ресурсу. Если ресурс не найден в кэше, метод match() возвращает null.

Ниже приведен пример использования метода matchAll() для получения всех ресурсов, соответствующих заданному запросу:

caches.open("my-cache").then(function (cache) {
  cache.matchAll("/path/to/*").then(function (responses) {
    if (responses.length > 0) {
      // Resources found in cache
      console.log(responses);
    } else {
      // No resources found in cache
    }
  });

В данном примере с помощью метода matchAll() из кэша извлекаются все ресурсы, соответствующие шаблону /path/to/*. Метод возвращает массив объектов ответа, которые могут быть использованы для доступа к ресурсам. Если в кэше не найдено ни одного ресурса, то метод matchAll() возвращает пустой массив.

Удаление ресурсов из кэша

При удалении ресурсов из кэша используется метод cache.delete(). Этот метод принимает в качестве параметра объект запроса, который представляет собой URL-адрес ресурса, который мы хотим удалить. Если ресурс найден в кэше, то он удаляется, а метод возвращает обещание, которое разрешается в true. Если ресурс не найден в кэше, то метод возвращает обещание, которое разрешается в false. Приведем пример:

caches
  .open("my-cache")
  .then(function (cache) {
    cache.delete("/path/to/resource").then(function (isDeleted) {
      if (isDeleted) {
        // Resource deleted successfully
      } else {
        // Resource not found in cache
      }
  .catch(function (error) {
    // Failed to delete resource from cache
  });

Данный код удаляет ресурс по URL /path/to/resource из кэша my-cache. Если ресурс найден в кэше, то он удаляется, а параметр isDeleted принимает значение true.

Заключение

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