Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS 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

text/cache-manifest

Têtes de sections

applicationCache


Ci-dessous les évènements envoyés lors des phases d'utilisation du cache :

Notes sur le tuto


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>		

Can I Use offline-apps? Data on support for the offline-apps feature across the major browsers from caniuse.com.