Sobes.tech
Назад к вопросам
Middle
84
questionbank

Что такое кэш приложения в HTML5?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech 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.