manifest : Démo HTML5
Mise à jour : 2017-01-22
Permet de stocker des données à l'initialisation de la page,
en vue d'être utilisées en mode déconnecté.
manifest
- Attribut de la balise <html>.
- Prend comme valeur une URI décrivant des valeurs en cache.
text/cache-manifest
- Type MIME à ajouter dans .htaccess (AddType text/cache-manifest .appcache).
Têtes de sections
- CACHE : Section des éléments du cache.
- FALLBACK : Section des alternatives.
- NETWORK : Section des éléments en liste blanche (accessible sur le réseau).
applicationCache
Ci-dessous les évènements envoyés lors des phases d'utilisation du cache :
- cached : fin du téléchargement pour la première fois.
- checking : premier évènement à intervenir.
- downloading : début du téléchargement des ressources.
- error : indique une erreur.
- noupdate : le manifest n'a pas changé.
- obsolete : le manifest n'est pas trouvé et le cache détruit.
- progress : envoyé au téléchargement de chaque ressource.
- updateready : téléchargement terminé.
Notes sur le tuto
- À utiliser avec la capacité de détection de déconnexion (cf. onLine).
- Cet attribut n'est pas accessible par le DOM, car cela n'a pas de sens.
- Valider son manifest avec le Cache Manifest Validator.
- Dossier complet disponible en anglais sur Dive Into HTML5.
- Explication et démo sur w3school.
- Une étude exhaustive sur la taille des stockages par HTML5 Rocks.
- Limitations :
- L'évènement "obsolete" semble remplacé par "error".
- Firefox ne restitue pas le cache hors connexion.
- Opera est le seul qui interprète la section FALLBACK.
- Coupez votre connexion et rechargez la page, seules les images déclarées dans le manifest sont accessibles hors connexion (logos des navigateurs, l'arrière plan du code et la vignette "Hors ligne" de la section FALLBACK).
Exemple de code HTML5
<!-- <html manifest="_manifest.appcache"> <head> ... <link rel="stylesheet" type="text/css" href="_online.css"/> ... </head> --> <!--_online.css div#fallback { background-image: url("img/enLigne.png") } --> <!--_offline.css div#fallback { background-image: url("img/horsLigne.png") } --> <!--.htaccess AddType text/cache-manifest .appcache --> <!--_manifest.appcache CACHE MANIFEST # v1.7 : modifier ce commentaire permet de forcer le chargement du cache. CACHE: ../img/logos/chrome1.png ../img/logos/firefox1.png ../img/logos/ie0.png ../img/logos/safari1.png ../img/deco/glossymetal.jpg ./img/horsLigne.png NETWORK: http://html5demo.braincracking.org FALLBACK: _online.css _offline.css --> <div id="fallback"></div> <span id="status"></span> <script> elt = document.getElementById("status"); function msg(txt) { elt.innerHTML += txt + "<br>"; } cache = window.applicationCache; // if (!cache.addEventListener) // IE < 9. // cache.addEventListener = function (type, listener, useCapture){ // attachEvent("on"+type, // function(){listener(event)})} cache.addEventListener("cached", function(){msg("cached")}, false); cache.addEventListener("checking", function(){msg("checking")}, false); cache.addEventListener("downloading", function(){msg("downloading")}, false); cache.addEventListener("error", function(){msg("error")}, false); cache.addEventListener("noupdate", function(){msg("noupdate")}, false); cache.addEventListener("obsolete", function(){msg("obsolete")}, false); cache.addEventListener("progress", function(){msg("progress")}, false); cache.addEventListener("updateready", function(){msg("updateready")}, false); </script>
Démonstration du résultat HTML5
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script>isItemSupported("window.applicationCache")</script>