Это случилось со всеми нами в какой-то момент. Вы ищете что-то в Интернете, попадаете на веб-сайт, находите интересный контент, нажимаете на что-то, а затем ждете… ждете… ждете и ждете. А потом вы разочарованно закрываете вкладку браузера и пытаетесь найти что-то, что загружается быстрее.

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

Производительность веб-сайта является важным фактором, на который следует обратить внимание при разработке веб-сайта. Важно сохранить трафик, который попадает на вашу страницу. Есть несколько способов сделать это, и один простой способ оптимизировать ваш сайт для более быстрой работы — использовать Cache API.

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

Кэш API Поддержка браузера

Поддерживается: Chrome, Edge, Firefox, Opera, Safari, веб-просмотр Android, Chrome для Android, Firefox для Android, Opera для Android, Интернет Samsung.

Не поддерживается: Internet Explorer, Edge Mobile, Safari на iOS.

Использование API кеша

Проверка, поддерживает ли браузер кеш API

if (‘caches’ in window) {
    //retrieve from cache
} else {
   // retrieve the data
}

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

Если кеш отсутствует, он создаст кеш с указанным именем. У нас может быть несколько кешей с разными именами. API кеша использует промисы.

window.caches.open(‘my-sample-cache’).then((cache) => {
});

Проверка данных в кеше

cache.match('cache_key').then((result) => {
// if result is undefined retrieve the data and add it to cache.
//else return data from cache
});

Добавить данные в кеш

cache.put(‘key’, ‘data’);

Очистить содержимое кеша

caches.delete(‘my-sample-cache’).then((res) => {
  console.log(res ? 'cache successfully deleted' : 'some error');
});

Кэширование и получение результата для http-запроса.

function getData(url) {
     //check cache to see if we already have the data
   if('caches' in window){
     window.caches.open('my-sample-cache').then((cache) => {
        cache.match(url).then((result) => {
           if(result === undefined) {
               console.log("not found in cache:", url);
               fetch(url).then(function (result) {
                  let clonedRes = result.clone();
                  //Add the result to cache
                  cache.put(url, result);
                  clonedRes.text().then(function(data){
                      console.log(data);
                  });
               });
         } else {
             result.text().then((text) => {
             console.log("from cache:", url, text);
             });
          }
    });
  });
 }
};