Exemple d’application web offline HTML5 avec le cache manifest

Cette simple page de démonstration illustre les capacité des smartphones (iPhone et Android notamment) à considérer un lien vers une page web comme étant une application web. En ajoutant cette page en favoris et sur le bureau de votre smartphone, une icone spécifique apparaîtra et vous pourrez accéder à la page sans connexion internet si vous l’avez visité une fois auparavant.

Voici la démonstration d’application web offline HTML5 avec le cache manifest.

Le fonctionnement de cette page est décrit dans ce Tutoriel pour réaliser une application web HTML5 offline avec le cache manifest.

Voici le code source de la page en question :

<!DOCTYPE html>
<html manifest="site.manifest">
<head>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-icon" href="earth-folder.png">
	<link rel="apple-touch-icon-precomposed" href="earth-folder.png">
	<link rel="apple-touch-startup-image" href="earth-folder.png" />
	
	<style type="text/css">
		#main{
			width:900px;
			margin:auto;
		}
	</style>
</head>
<body>
	<div id="main">
		<h1>Cette page est accessible hors ligne</h1>
		<p>Elle possède une icone d'application pour les smartphones.</p>
		<img src="earth-folder.png" />
	</div>
</body>

</html>

Le fichier site.manifest :

CACHE MANIFEST

# Version 0.4

exemple-application-cache-manifest-html5.html
earth-folder.png

Le .htaccess :

AddType text/cache-manifest manifest

10 thoughts on “Exemple d’application web offline HTML5 avec le cache manifest

  1. Bonjour, je viens de tester la page exemple sur ipad, ok l’icône s’installe et ensuite c’est un plein écran mais le soucis est que quand je deconnecte le wifi et que je relance cette “appli” il ne met rien en cacher et me demande une nouvelle connection ! Que faire (ipad c sur Safari).

  2. Super tuto en français, merci beaucoup.
    Ca marche incroyablement bien sur iPad et ça me donne plein d’idées !!! Par contre je n’ai pas l’icône personnalisée, mais une miniature de la page Web… un problème de configuration ?

    • Je pense qu’Apple préfère afficher une miniature plutôt qu’une icône sur iPad puisqu’il y a plus de place sur l’écran, c’est tout :)
      Ou peut-être que l’iPad demande une icône en plus haute qualité tout simplement… Je te laisse enquêter !

      • Bonjour et bravo pour ce tuto qui m’a beaucoup servi ! Très pratique pour rendre hyper-rapide la vitesse de chargement d’un site avec pleins de graphismes.

        Pour l’iPad, c’est effectivement une autre résolution d’icone qu’il faut. Je n’ai plus les chiffres en tête mais j’ai déjà réussi à créer une bonne favicon supportée par l’iPad. Par ailleurs ça se complique encore avec les nouveaux appareils retina a écran haute-résolution…

  3. Bonjour,
    je développe actuellement une application iphone/android qui affiche un emplois du temps en fonction d’une heure donnée. J’ai donc utilisé manifest afin d’afficher la dernière page chargée lorsque le réseau est indisponible. Cependant, lorsque le réseau est disponible le cache continue d’être affiché, à la place de la dernière version de la page. Y’aurait-il un moyen d’annuler l’affichage des pages en cache lorsqu’il y a une connexion internet ?

    • L’utilisation de l’AppCache n’est pas exactement celle-ci. Avec l’AppCache vous allez sauvegarder le cadre / design de l’app, alors que le Local Storage s’occupera du contenu en données que vous affichez. Si vous souhaitez faire une mise à jour de l’AppCache (parce que vous avez changé de design par exemple, il faut faire un changement dans le Manifest (changer une ligne de commentaire de versionning par exemple).

      • Pardonnez-moi de m’être mal exprimé, en fait l’application affiche une WebView et va donc charger une page web. J’ai donc utilise le cache-manifest pour mettre en cache la page, histoire qu’il y aie toujours quelque chose d’affiché dans cette WebView même lorsque le téléphone ne capte aucune connexion internet. Le problème est lorsque je recharge la page alors que j’ai une connexion, c’est la page en cache qui s’affiche et non la page en ligne (je le sais grâce à un affichage de la date sur la page). J’aimerais juste remédier à cela. Vous comprenez donc bien que je ne peux pas changer la version du cache à chaque chargement de page. :/

        • Dans tous les cas, ne stockez pas le “contenu” de votre page dans l’AppCache. Allez chercher les données en JavaScript avec des appels AJAX pour obtenir les informations les plus récentes. En gros dans l’AppCache vous devriez avoir le JS, le CSS, et un fichier HTML sans aucune donnée.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>