Sobes.tech
Pomoc s pohovorom
Zdroje
Príprava na pohovor
Zdroje
Hľadanie práce
Zdroje
Právne
Späť k otázkam
Middle

Čo je to cache aplikácie v HTML5?

sobes.tech AI

Odpoveď od AI

Cache aplikácie (Application Cache) v HTML5 je mechanizmus, ktorý umožňuje webovej aplikácii pracovať offline tým, že poskytuje súbor zdrojov (HTML stránky, CSS, JavaScript, obrázky), ktoré prehliadač cache-uje lokálne.

Na používanie cache aplikácie je potrebný súbor manifestu s príponou .appcache, ktorý je spojený s HTML stránkou cez atribút manifest v tagu <html>:

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

Struktúra súboru manifest je nasledovná:

CACHE MANIFEST
# Verzia manifestu (voliteľné, na aktualizáciu cache)
# v1.0

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

FALLBACK:
# Záložné zdroje v prípade nedostupnosti siete
/offline.html /

NETWORK:
# Zdroje, ktoré sa vždy načítajú zo siete
*

Hlavné sekcie súboru manifest:

  • CACHE:: Zdroje uvedené v tejto sekcii budú cache-ované po načítaní prvej stránky s týmto manifestom.
  • FALLBACK:: Určuje záložné zdroje. Ak požiadavka na sieť pre hlavný zdroj zlyhá, prehliadač načíta uvedený záložný zdroj. Formát: hlavný_zdroj záložný_zdroj.
  • NETWORK:: Zdroje uvedené v tejto sekcii nebudú nikdy cache-ované a vždy budú načítané zo siete. Symbol * znamená, že všetky zdroje, ktoré nie sú uvedené v iných sekciách, budú vždy načítané zo siete.

Aktualizácia cache prebieha, keď sa zmení súbor manifestu. Prehliadač stiahne aktualizovaný manifest, porovná ho s aktuálnym a stiahne nové alebo zmenené zdroje. Nové súbory sú dostupné až po reloadu stránky.

Udalosti spojené s cache aplikácie:

  • checking: Prehliadač kontroluje, či je dostupná nová verzia manifestu.
  • downloading: Prehliadač sťahuje zdroje uvedené v novej verzii manifestu.
  • progress: Pokrok sťahovania zdrojov.
  • updateready: Nová verzia cache je pripravená na použitie. Vyžaduje sa reload stránky.
  • cached: Zdroje boli úspešne cache-ované prvýkrát.
  • noupdate: Manifest sa nezmenil.
  • error: Došlo k chybe pri sťahovaní alebo aktualizácii cache.

API cache aplikácie je dostupné cez window.applicationCache.

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

// Spracovanie udalosti updateready
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Použiť novú verziu cache a reloadnúť stránku
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Hoci Application Cache poskytoval offline možnosti, jeho používanie sa neodporúča v nových projektoch kvôli zložitosti správy, problémom s aktualizáciou a nedostatku flexibility. Moderný prístup k offline prístupu a ďalším funkciám progresívnych webových aplikácií (PWA) je cez Service Workers.

PredchádzajúceĎalej