Wat is de applicatiecache in HTML5?
sobes.tech AI
Antwoord van AI
De Application Cache (Applicatiecache) in HTML5 is een mechanisme waarmee webapplicaties offline kunnen werken door een set bronnen (HTML-pagina's, CSS, JavaScript, afbeeldingen) lokaal in de browser te cachen.
Om de application cache te gebruiken, is een manifestbestand met de extensie .appcache nodig, dat via het manifest-attribuut in de <html>-tag met de HTML-pagina is verbonden:
<html manifest="manifest.appcache">
...
</html>
Het manifestbestand heeft de volgende structuur:
CACHE MANIFEST
# Versie van het manifest (optioneel, voor cache-updates)
# v1.0
CACHE:
# Expliciet in cache te zetten bronnen
/css/style.css
/js/script.js
/images/logo.png
FALLBACK:
# Reservebronnen voor het geval er geen verbinding is
/offline.html /
NETWORK:
# Bronnen die altijd via het netwerk moeten worden opgevraagd
*
De belangrijkste secties van het manifestbestand:
CACHE:: De bronnen die in deze sectie worden vermeld, worden na de eerste pagina-lading met het opgegeven manifest in de cache opgeslagen.FALLBACK:: Definieert reservebronnen. Als een netwerkverzoek voor een hoofdbron faalt, laadt de browser de aangegeven reservebron. Formaat:hoofdbron reservebron.NETWORK:: Bronnen die in deze sectie worden vermeld, worden nooit in de cache opgeslagen en altijd via het netwerk opgevraagd. Het symbool*betekent dat alle bronnen die niet in andere secties worden vermeld, altijd via het netwerk worden opgevraagd.
De cache van de applicatie wordt bijgewerkt wanneer het manifestbestand wordt gewijzigd. De browser downloadt het bijgewerkte manifest, vergelijkt het met het huidige en downloadt nieuwe of gewijzigde bronnen. Nieuwe bestanden zijn pas na het herladen van de pagina beschikbaar.
Gebeurtenissen gerelateerd aan de application cache:
checking: De browser controleert of er een nieuwe versie van het manifest beschikbaar is.downloading: De browser downloadt de bronnen die in de nieuwe versie van het manifest worden vermeld.progress: Voortgang van het downloaden van bronnen.updateready: De nieuwe versie van de cache is klaar voor gebruik. Het herladen van de pagina is vereist.cached: De bronnen zijn voor het eerst succesvol in de cache opgeslagen.noupdate: Het manifest is niet gewijzigd.error: Er is een fout opgetreden bij het laden of bijwerken van de cache.
De API van de application cache is toegankelijk via window.applicationCache.
// Controleer de status van de cache
console.log(window.applicationCache.status);
// Afhandeling van het event updateready
window.applicationCache.addEventListener('updateready', function() {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Nieuwe versie van de cache toepassen en de pagina herladen
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
Hoewel de Application Cache offline-mogelijkheden bood, wordt het gebruik ervan niet aanbevolen in nieuwe projecten vanwege de complexiteit van beheer, problemen met updates en gebrek aan flexibiliteit. Moderne benaderingen voor offline toegang en andere functies van progressive web apps (PWA) maken gebruik van Service Workers.