logo oujood
🔍

HTML5 AppCache : cache d'application web hors ligne

AppCache est déprécié depuis 2019, mais comprendre son fonctionnement reste utile pour aborder les Service Workers. Ce guide couvre le fichier manifest, les trois sections, la mise à jour du cache et l'alternative moderne.

OUJOOD.COM

Qu'est-ce que l'AppCache HTML5 ?

HTML5 cours tutorial – mise à jour 2026

Le cache d'application HTML5 (AppCache) est un mécanisme qui permet de stocker localement les ressources d'une application web — pages HTML, CSS, JavaScript, images — pour qu'elle reste utilisable sans connexion. Le navigateur lit un fichier manifest qui liste les ressources à conserver.

⚠️ Note 2026 : L'AppCache est officiellement déprécié par le W3C et retiré de Chrome 70+ et Firefox 84+. La solution actuelle est l'API Service Workers combinée à l'API Cache Storage. Ce tutoriel garde une valeur pédagogique pour les environnements legacy ou embarqués, et pour comprendre les bases du cache applicatif avant d'aborder les Service Workers.

Le cache d'application apporte trois bénéfices concrets :

  • Navigation hors connexion : l'application reste accessible même sans réseau, utile sur mobile ou en zone de faible couverture.
  • Chargement accéléré : les ressources en cache se chargent depuis le stockage local, sans requête réseau.
  • Moins de charge serveur : seules les ressources modifiées sont re-téléchargées.

Compatibilité et statut

L'AppCache a été supporté par Chrome, Firefox, Safari et Opera entre 2012 et 2019. Internet Explorer ne l'a jamais implémenté. Depuis 2019-2021, les navigateurs modernes ont abandonné AppCache au profit des Service Workers. Safari maintient un support partiel pour certaines PWA legacy. Pour toute nouvelle application offline en 2026, utilisez les Service Workers avec l'API Cache.

Exemple de base : référencer un manifest dans le HTML

L'attribut manifest sur la balise <html> est le point d'entrée de toute la mécanique AppCache. Sans lui, le navigateur ignore le fichier manifest.

  📋 Copier le code

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<!-- manifest indique au navigateur le chemin vers le fichier .appcache -->
<head>
  <title>HTML5 AppCache Demo</title>
  <meta charset="UTF-8" />
</head>
<body>
  <div>Contenu de votre application web hors ligne</div>
</body>
</html>

Toute page portant l'attribut manifest est mise en cache dès la première visite. Une page sans cet attribut n'est mise en cache que si elle est explicitement listée dans le fichier manifest.

Structure du fichier manifest

Le fichier manifest est un fichier texte brut qui doit commencer par CACHE MANIFEST sur la première ligne, sans espace ni caractère précédent. Il contient trois sections :

CACHE MANIFEST — obligatoire. Les ressources listées ici sont téléchargées une fois puis stockées définitivement en local. Elles restent disponibles hors connexion.

NETWORK — facultative. Les fichiers ici ne sont jamais mis en cache : ils exigent une connexion active. Typiquement les pages de login, les APIs dynamiques ou les données temps réel.

FALLBACK — facultative. Définit une ressource de substitution à afficher quand la ressource principale est inaccessible. Utile pour proposer une expérience dégradée mais fonctionnelle en mode hors ligne.

Section CACHE : ressources statiques

Les ressources listées sous CACHE MANIFEST sont stockées localement et servies depuis le cache lors des visites suivantes :

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Section NETWORK : ressources toujours en ligne

Les ressources listées sous NETWORK ne sont jamais mises en cache. L'astérisque * est une bonne pratique : il indique que tout ce qui n'est pas dans CACHE doit passer par le réseau, évitant de mettre en cache des données sensibles par inadvertance.

NETWORK:
login.php
*

Section FALLBACK : pages de secours

La syntaxe est ressource_principale ressource_secours. Si la ressource principale est inaccessible hors ligne, le navigateur affiche la ressource de secours. La page de secours doit elle-même figurer dans la section CACHE MANIFEST.

FALLBACK:
/html/ /offline.html

L'extension recommandée est .appcache. Le fichier doit être servi avec le type MIME text/cache-manifest — sans quoi le navigateur l'ignore. Sur Apache, une ligne dans .htaccess suffit :

  📋 Copier le code

# Sans ce type MIME, le navigateur refusera de traiter le manifest
AddType text/cache-manifest appcache

Sur Nginx : types { text/cache-manifest appcache; } dans le bloc http ou server.

Mise à jour et invalidation du cache

Une fois en cache, les ressources sont utilisées telles quelles jusqu'à ce que l'une de ces conditions soit remplie :

  • L'utilisateur vide manuellement le cache du navigateur.
  • Le fichier manifest est modifié — même d'un seul caractère.
  • Le cache est mis à jour via l'API JavaScript window.applicationCache.

Fichier manifest complet avec commentaires

Le numéro de version en commentaire est la technique standard pour forcer la mise à jour du cache sans modifier les ressources elles-mêmes. Si vous modifiez main.js sur le serveur sans toucher au manifest, le navigateur continuera d'utiliser l'ancienne version.

  📋 Copier le code

CACHE MANIFEST
# Modifier la version force le navigateur à re-télécharger le cache
# 2026-01-15 v2.1.0

/theme.css
/logo.gif
/main.js
/offline.html    # doit être ici pour fonctionner dans FALLBACK

NETWORK:
login.php
/api/
*

FALLBACK:
/html/ /offline.html
/ /offline.html

Mise à jour programmatique via JavaScript

L'API window.applicationCache permet de détecter et d'appliquer une mise à jour disponible sans attendre le rechargement naturel de la page :

  📋 Copier le code

var appCache = window.applicationCache;
// Déclenché quand une mise à jour du manifest est détectée
appCache.addEventListener('updateready', function(e) {
  if (appCache.status == appCache.UPDATEREADY) {
    appCache.swapCache(); // Remplacer l'ancien cache par le nouveau
    if (confirm('Une nouvelle version est disponible. Recharger ?')) {
      window.location.reload();
    }
  }
}, false);
appCache.update(); // Vérifier manuellement les mises à jour

Alternative moderne : Service Workers

Les Service Workers offrent le même résultat qu'AppCache, mais avec un contrôle total sur les stratégies de cache, les requêtes réseau et la synchronisation en arrière-plan. Voici l'équivalent du manifest précédent :

  📋 Copier le code

// service-worker.js
const CACHE_NAME = 'mon-app-v2.1.0';
const RESSOURCES_CACHE = ['/', '/theme.css', '/logo.gif', '/main.js', '/offline.html'];
// Installation : pré-cache les ressources statiques
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(RESSOURCES_CACHE))
  );
});
// Fetch : stratégie cache-first
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(reponse => {
      return reponse || fetch(event.request).catch(() => {
        return caches.match('/offline.html'); // Fallback hors ligne
      });
    })
  );
});
// Enregistrement dans la page HTML :
// if ('serviceWorker' in navigator) {
//   navigator.serviceWorker.register('/service-worker.js'); }

Points de vigilance

Une fois mis en cache, un fichier est servi depuis le cache même s'il a été modifié sur le serveur. Modifier le manifest reste le seul moyen fiable de forcer la mise à jour.

Remarque : Les navigateurs imposent généralement une limite de 5 Mo par origine pour le cache applicatif. Au-delà, le navigateur peut refuser ou demander confirmation à l'utilisateur. Sélectionnez soigneusement les ressources à mettre en cache.

Par carabde | Mis à jour le 13 avril 2026

chapitre précédent   sommaire   chapitre suivant