Sobes.tech
Interjú segítség
Források
Interjú előkészítése
Források
Álláskeresés
Források
Jogi
Vissza a kérdésekhez
Middle

Mi az alkalmazáskészlet HTML5-ben?

sobes.tech MI

Válasz az MI-től

Az alkalmazás cache (Application Cache) az HTML5-ben egy olyan mechanizmus, amely lehetővé teszi a webalkalmazás számára, hogy offline módban működjön, és erőforrásokat (HTML-oldalak, CSS, JavaScript, képek) tároljon a böngésző helyi cache-ében.

Az alkalmazás cache használatához szükség van egy .appcache kiterjesztésű manifest fájlra, amelyet a <html> tag manifest attribútumán keresztül kötünk össze az HTML oldallal:

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

A manifest fájl a következő szerkezetű:

CACHE MANIFEST
# A manifest verziója (opcionális, a cache frissítéséhez)
# v1.0

CACHE:
# Kézzel cache-elt erőforrások
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Tartalék erőforrások hálózati kapcsolat hiányában
/offline.html /

NETWORK:
# Erőforrások, amelyeket mindig a hálózatról kérünk
*

A manifest fő szekciói:

  • CACHE:: Ebben a szekcióban felsorolt erőforrások cache-elve lesznek az első oldalbetöltés után.
  • FALLBACK:: Tartalék erőforrásokat határoz meg. Ha a hálózati kérés nem sikerül, a böngésző a megadott tartalék erőforrást tölti be. Formátum: fő_erőforrás tartalék_erőforrás.
  • NETWORK:: Ezek az erőforrások soha nem lesznek cache-elve, mindig a hálózatról kérjük őket. A * szimbólum azt jelenti, hogy minden, más szekciókban nem felsorolt erőforrás kérésre kerül a hálózatról.

A cache frissítése akkor történik, amikor a manifest fájl módosul. A böngésző letölti az új manifestet, összehasonlítja a meglévővel, és letölti az új vagy módosított erőforrásokat. Az új fájlok csak az oldal újratöltése után válnak elérhetővé.

Az alkalmazás cache-hez kapcsolódó események:

  • checking: A böngésző ellenőrzi az új verziót.
  • downloading: A böngésző tölti az új verzió erőforrásait.
  • progress: Az erőforrások letöltésének előrehaladása.
  • updateready: Az új cache-verzió készen áll a használatra. Szükséges az oldal újratöltése.
  • cached: Az erőforrások sikeresen cache-elve lettek.
  • noupdate: A manifest nem változott.
  • error: Hiba történt a cache betöltése vagy frissítése során.

Az alkalmazás cache API elérhető a window.applicationCache-en keresztül.

// A cache állapotának ellenőrzése
console.log(window.applicationCache.status);

// Az updateready esemény kezelése
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Az új cache-verzió alkalmazása és az oldal újratöltése
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Bár az Application Cache offline lehetőségeket biztosított, használata nem ajánlott új projektekben a kezelési nehézségek, a frissítési problémák és a rugalmasság hiánya miatt. Modern megközelítésként a progresszív webalkalmazások (PWA) offline hozzáféréséhez Service Workers használatos.

KorábbiKövetkező