Qu'est-ce que le cache de l'application en HTML5…

Le cache d'application (Application Cache) en HTML5 est un mécanisme permettant à une application web de fonctionner hors ligne, en fournissant un ensemble de ressources (pages HTML, CSS, JavaScript, images) que le navigateur met en cache localement.

Pour utiliser le cache d'application, un fichier manifeste avec l'extension .appcache est requis, lié à la page HTML via l'attribut manifest dans la balise <html>:

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

Le fichier manifeste a la structure suivante:

CACHE MANIFEST
# Version du manifeste (optionnel, pour mettre à jour le cache)
# v1.0

CACHE:
# Ressources explicitement en cache
/css/style.css
/js/script.js
/images/logo.png

FALLBACK:
# Ressources de secours en cas d'absence de connexion
/offline.html /

NETWORK:
# Ressources qui doivent toujours être demandées depuis le réseau
*

Les sections principales du fichier manifeste sont:

CACHE:: Les ressources listées dans cette section seront mises en cache après le chargement de la première page avec le manifeste spécifié.
FALLBACK:: Définit des ressources de secours. Si une requête réseau pour une ressource principale échoue, le navigateur chargera la ressource de secours indiquée. Format: ressource_principale ressource_de_secours.
NETWORK:: Ressources listées dans cette section ne seront jamais mises en cache et seront toujours demandées depuis le réseau. Le symbole * indique que toutes les ressources non listées dans d'autres sections seront toujours demandées depuis le réseau.

La mise à jour du cache d'application se produit lorsque le fichier manifeste change. Le navigateur télécharge le manifeste mis à jour, le compare avec l'actuel et télécharge les ressources nouvelles ou modifiées. Les fichiers nouveaux ne sont disponibles qu'après le rechargement de la page.

Événements liés au cache d'application:

checking: Le navigateur vérifie s'il existe une nouvelle version du manifeste.
downloading: Le navigateur télécharge les ressources indiquées dans la nouvelle version du manifeste.
progress: Progression du téléchargement des ressources.
updateready: La nouvelle version du cache est prête à être utilisée. Il faut recharger la page.
cached: Les ressources ont été mises en cache avec succès lors du premier chargement.
noupdate: Le manifeste n'a pas changé.
error: Une erreur s'est produite lors du chargement ou de la mise à jour du cache.

L'API du cache d'application est accessible via window.applicationCache.

// Vérifier le statut du cache
console.log(window.applicationCache.status);

// Gérer l'événement updateready
window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    // Appliquer la nouvelle version du cache et recharger la page
    window.applicationCache.swapCache();
    window.location.reload();
  }
}, false);

Bien que le cache d'application ait fourni des fonctionnalités hors ligne, son utilisation n'est pas recommandée dans les nouveaux projets en raison de la complexité de gestion, des problèmes de mise à jour et du manque de flexibilité. En tant qu'approche moderne pour l'accès hors ligne et d'autres fonctionnalités des applications web progressives (PWA), on utilise les Service Workers.

Qu'est-ce que le cache de l'application en HTML5?