Sobes.tech
Middle

Какво е кешът на приложението в HTML5?

sobes.tech AI

Отговор от AI

Кешът на приложението (Application Cache) в HTML5 е механизъм, който позволява на уеб приложението да работи офлайн, като предоставя набор от ресурси (HTML страници, CSS, JavaScript, изображения), които браузърът кешира локално.

За използване на кеша на приложението е необходим файл манифест с разширение .appcache, който се свързва с HTML страницата чрез атрибута manifest в таг <html>:

<html manifest="manifest.appcache">
...
</html>

Структурата на файла манифест е следната:

CACHE MANIFEST
# Версия на манифеста (по желание, за обновяване на кеша)
# v1.0

CACHE:
# Явно кеширани ресурси
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Резервни ресурси при липса на връзка
/offline.html /

NETWORK:
# Ресурси, които винаги трябва да се зареждат от мрежата
*

Основните секции на файла манифест:

  • CACHE:: Ресурсите, изброени в тази секция, ще бъдат кеширани след първото зареждане на страницата с този манифест.
  • FALLBACK:: Определя резервни ресурси. Ако заявката към мрежата за основния ресурс не успее, браузърът ще зареди посочения резервен ресурс. Формат: основен_ресурс резервен_ресурс.
  • NETWORK:: Ресурси, изброени в тази секция, никога няма да бъдат кеширани и винаги ще се зареждат от мрежата. Символът * означава, че всички ресурси, които не са изброени в други секции, винаги ще се зареждат от мрежата.

Обновяването на кеша става, когато файлът манифест се промени. Браузърът изтегля обновения манифест, сравнява го с текущия и изтегля новите или променените ресурси. Новите файлове стават достъпни само след презареждане на страницата.

Събития, свързани с кеша на приложението:

  • checking: Браузърът проверява за нова версия на манифеста.
  • downloading: Браузърът изтегля ресурсите, посочени в новата версия на манифеста.
  • progress: Напредък на изтеглянето на ресурсите.
  • updateready: Новата версия на кеша е готова за използване. Изисква се презареждане на страницата.
  • cached: Ресурсите са успешно кеширани за първи път.
  • noupdate: Манифестът не се е променил.
  • error: Възникна грешка при изтеглянето или обновяването на кеша.

API-то за кеш на приложението е достъпно чрез window.applicationCache.

// Проверка на статуса на кеша
console.log(window.applicationCache.status);

// Обработка на събитието updateready
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Приложи новата версия на кеша и презареди страницата
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Въпреки че Application Cache предоставяше офлайн възможности, неговото използване не се препоръчва в нови проекти поради сложността при управление, проблеми с актуализацията и липса на гъвкавост. За съвременен подход към офлайн достъп и други функции на прогресивните уеб приложения (PWA) се използват Service Workers.