Sobes.tech
Nápověda k rozhovoru
Zdroje
Příprava na pohovor
Zdroje
Hledání práce
Zdroje
Právní
Zpět k otázkám
Middle

Co je to cache aplikace v HTML5?

sobes.tech AI

Odpověď od AI

Mezipaměť aplikace (Application Cache) v HTML5 je mechanismus, který umožňuje webové aplikaci pracovat offline tím, že ukládá sadu zdrojů (HTML stránky, CSS, JavaScript, obrázky), které prohlížeč ukládá lokálně.

Pro použití mezipaměti aplikace je potřeba soubor manifestu s příponou .appcache, který je propojen s HTML stránkou přes atribut manifest v tagu <html>:

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

Struktura souboru manifestu je následující:

CACHE MANIFEST
# Verze manifestu (volitelné, pro aktualizaci cache)
# v1.0

CACHE:
# Explicitně cacheované zdroje
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Záložní zdroje v případě absence připojení
/offline.html /

NETWORK:
# Zdroje, které se vždy načítají ze sítě
*

Hlavní sekce souboru manifestu:

  • CACHE:: Zdroje uvedené v této sekci budou cacheovány po načtení první stránky s daným manifestem.
  • FALLBACK:: Určuje záložní zdroje. Pokud požadavek na síť selže, prohlížeč načte uvedený záložní zdroj. Formát: hlavní_zdroj záložní_zdroj.
  • NETWORK:: Zdroje uvedené v této sekci nebudou nikdy cacheovány a vždy budou načítány ze sítě. Symbol * znamená, že všechny zdroje, které nejsou uvedeny v jiných sekcích, budou vždy načítány ze sítě.

Aktualizace cache probíhá, když se změní soubor manifestu. Prohlížeč stáhne aktualizovaný manifest, porovná jej s aktuálním a načte nové nebo změněné zdroje. Nové soubory jsou dostupné až po reloadu stránky.

Události související s cache aplikace:

  • checking: Prohlížeč kontroluje novou verzi manifestu.
  • downloading: Prohlížeč stahuje zdroje uvedené v nové verzi manifestu.
  • progress: Pokrok stahování zdrojů.
  • updateready: Nová verze cache je připravena k použití. Vyžaduje reload stránky.
  • cached: Zdroje byly úspěšně cacheovány poprvé.
  • noupdate: Manifest se nezměnil.
  • error: Došlo k chybě při načítání nebo aktualizaci cache.

API cache aplikace je dostupné přes window.applicationCache.

// Kontrola stavu cache
console.log(window.applicationCache.status);

// Zpracování události updateready
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Použít novou verzi cache a reloadovat stránku
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Ačkoliv Application Cache poskytoval offline funkce, jeho používání se nedoporučuje v nových projektech kvůli složitosti správy, problémům s aktualizací a nedostatku flexibility. Moderní přístup k offline přístupu a dalším funkcím progresivních webových aplikací (PWA) je prostřednictvím Service Workers.

PředchozíDalší