Это случилось со всеми нами в какой-то момент. Вы ищете что-то в Интернете, попадаете на веб-сайт, находите интересный контент, нажимаете на что-то, а затем ждете… ждете… ждете и ждете. А потом вы разочарованно закрываете вкладку браузера и пытаетесь найти что-то, что загружается быстрее.
Это, вероятно, худшее, что может случиться с хорошо сделанным веб-сайтом. Это факт, что объем внимания людей уменьшается с каждым днем, и они не собираются ждать, пока ваш сайт заработает.
Производительность веб-сайта является важным фактором, на который следует обратить внимание при разработке веб-сайта. Важно сохранить трафик, который попадает на вашу страницу. Есть несколько способов сделать это, и один простой способ оптимизировать ваш сайт для более быстрой работы — использовать 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); }); } }); }); } };