Parmi toutes les nouvelles fonctionnalités intéressantes introduites par HTML5, la possibilité de mettre hors-ligne des pages Web pour une utilisation hors connexion est certainement l’une des plus intéressantes. Dans cet article nous allons voir comment créer une page, qui sera disponible pour une consultation hors ligne.
Déclare le doctype HTML5
La première chose à faire est de créer un document HTML5 valide. Pour cela nous allons déclarer le doctype HTML5, plus facile à retenir que ceux utilisés pour le XHTML :
<!DOCTYPE html>
<html>
…
[/sourcecode]
Créez un fichier nommé index.html. Nous allons y ajouter quelques éléments HTML5.
Note : Dans le cas où vous en avez besoin, les spécifications complètes HTML5 sont disponibles sur le site Web du W3C.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Démo HTML5 hors-ligne</title>
<link href="style.css" type="text/css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
</head>
<body>
<!– container –>
<div id="container">
<header class="css-class">
<h1 id ="logo"><a href="#">Blog Nouvelles Technologies</a></h1>
</header>
<!– content –>
<div id="content">
<h2>Article sur l’HTML5 hors-ligne</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut elit erat. Donec feugiat urna ac ante mollis commodo pulvinar felis vehicula. Ut id diam at felis egestas tincidunt. Aliquam justo velit, hendrerit et porttitor eget, ultricies at nibh. Aenean eleifend eleifend arcu porta vestibulum. Maecenas nisi velit, lobortis nec viverra ac, ornare nec nulla. Proin quam nunc, tempor nec dapibus a, porttitor vel purus. Proin elementum velit lacus. Mauris tellus purus, dapibus id gravida ut, mattis sit amet lorem. Aliquam in mauris ac metus aliquet blandit nec ac ligula. Suspendisse rutrum sapien sit amet augue pulvinar tristique. Morbi dignissim orci eget elit tincidunt feugiat.
</p>
</div>
<!– #content –>
<footer>Démo sur <a href="https://www.blog-nouvelles-technologies.fr">Blog Nouvelles Technologies</a></footer>
</div>
<!– #container –>
</body>
</html>
[/sourcecode]
Une fois cela fait, nous allons ajouter une feuille de style à notre page index.html. Le code suivant est le style de base pour la page. Collez-le dans un fichier nommé style.css.
*{
margin:0;
padding:0;
}
body{
background:#f5f5f5;
font-family:"Lucida Grande", Arial;
font-size:13px;
line-height:21px;
color:#444;
}
p{
margin:15px 0;
}
h2{
margin-top:20px;
}
#container{
background:#fff;
border-left:1px #ddd solid;
border-right:1px #ddd solid;
border-bottom:1px #ddd solid;
width:600px;
margin:0 auto;
}
header h1#logo a{
text-indent:-9999px;
display:block;
width:600px;
height:82px;
background:url(logo-med.png) no-repeat 0 0;
}
#content{
width:95%;
margin:0 auto;
}
footer{
text-align:center;
width:100%;
display:block;
font-size:11px;
}
[/sourcecode]
À l’heure actuelle, si vous regardez à votre page index.html dans votre navigateur Web, vous verrez quelque chose comme la capture d’écran ci-dessous. Rien de spectaculaire non ? Alors on continue avec la partie intéressante.
Déjà première constatation, si vous ouvrez la page avec une résolution supérieure à 800 * 600, vous verrez une mise en page vraiment petite. Alors, comment faire pour des grands écrans qui permettent d’afficher une résolution plus grande, tout en gardant celle-ci pour les personnes avec des résolutions inférieures ?
C’est là que la spécification CSS3 Media Queries entre en jeu. Ouvrez le fichier style.css et collez le code ci-dessous à la fin du fichier :
@media screen and (min-width:1200px){
#container{
width:1100px;
}
header h1#logo a{
width:1100px;
height:150px;
background:url(logo.png) no-repeat 0 0;
}
}
[/sourcecode]
Maintenant rafraichissez à nouveau votre page. La disposition est en effet plus grande, essayez même de redimensionner horizontalement la taille de la fenêtre ! Aucun problème 🙂
Comme vous pouvez le voir, il n’y a rien de bien compliqué pour mettre en œuvre cette technique. @media screen indique au navigateur d’appliquer cette spécification uniquement à l’affichage sur l’écran, car nous ne voulons pas redimensionner lors de l’impression. min-width: 1200px précise que l’écran doit avoir une largeur minimale de 1200px. Si ces conditions sont remplies, alors le code dans la parenthèse est pris en compte par le navigateur, et redéfinit les styles précédents.
Maintenant que nous avons créé une version plus grande pour les écrans larges, qu’en est-il pour une version mobile ? Collez ce code dans le fichier style.css et vous avez terminé.
@media screen and (max-width:767px){
#container{
width:320px;
}
header h1#logo a{
width:320px;
height:44px;
background:url(logo-small.png) no-repeat 0 0;
}
}
[/sourcecode]
Concernant mon image, pourquoi est-elle agrandie quand je redimensionne horizontalement la fenêtre ? C’est le même principe il vous suffit d’ajouter un style sur l’image. La propriété CSS max-width est là pour vous aider. Insérez le code suivant dans votre fichier style.css :
img {
max-width:570px;
margin:10px 0;
}
[/sourcecode]
Une taille par défaut de l’image est maintenant définie. Maintenant, nous allons définir cette propriété aussi pour les versions mobiles :
@media screen and (min-width:1200px){
img {
max-width:1000px;
}
}
@media screen and (max-width:767px){
img {
max-width:305px;
}
}
[/sourcecode]
Maintenant, redimensionnez votre navigateur : les images sont redimensionnées à la mise en page !
Note : Devinez quoi ? Internet Explorer ne supporte pas la propriété CSS @media screen, à l’exception de IE9 qui l’a publié récemment.
Ajout du support .htaccess
Le dossier que nous allons créer pour mettre en cache notre page Web est appelé manifeste. Avant sa création, nous devons d’abord ajouter une directive au fichier .htaccess
Note : Pour cette directive on suppose que vous disposez d’un serveur Web Apache.
Ouvrez le fichier .htaccess situé à la racine de votre site, et ajoutez le code suivant :
AddType text/cache-manifest .manifest
[/sourcecode]
Cette directive va faire en sorte que le fichier .manifeste soit considéré comment un fichier text/cache-manifest. Si le fichier n’en est pas un, le manifeste n’aura aucun effet sur la page et celle-ci ne sera donc pas disponible hors-ligne.
Création du manifeste
Nous allons entrer dans le vif du sujet avec la création du manifeste. Créez un nouveau fichier et enregistrez-le sous le nom : offline.manifest. Ensuite, collez le code suivant dedans. Je vais l’expliquer par la suite.
CACHE MANIFEST
CACHE
index.html
style.css
logo.png
logo-med.png
logo-small.png
[/sourcecode]
Dès lors, vous avez un fichier manifeste parfaitement fonctionnel !
La façon dont cela fonctionne est très simple : après la déclaration du CACHE, vous indiquez la liste de chaque fichier que vous souhaitez rendre disponible hors connexion. C’est suffisant pour la mise en cache d’une page Web simple comme celle de mon exemple, mais le cache HTML5 a d’autres possibilités intéressantes.
Par exemple, considérons le fichier manifeste suivant :
CACHE MANIFEST
CACHE
index.html
style.css
NETWORK:
search.php
login.php
FALLBACK:
/api offline.html
[/sourcecode]
Dans l’exemple ci-dessus nous avons en déclaration du CACHE les fichiers index.html et style.css. En plus de notre premier manifeste nous avons la déclaration RESEAU, utilisée pour indiquer les fichiers qui ne doivent pas être mis en cache, comme une page de connexion.
La dernière déclaration est FALLBACK. Elle vous permet de rediriger l’utilisateur vers un fichier particulier. Dans notre exemple si une ressource /api n’est pas disponible hors-ligne on redirige vers le fichier offline.html.
Lien entre votre fichier de manifeste et le document HTML
Maintenant que votre manifeste et votre fichier HTML sont prêts, la seule chose qui vous reste à faire est de relier le fichier manifeste au document HTML.
Pour faire cette opération il suffit d’ajouter le manifeste en attribut de votre document HTML comme indiqué ci-dessous :
<html manifest="/offline.manifest">
[/sourcecode]
Testez-le
Une fois cela fait, vous êtes prêt à visiter votre fichier index.html à l’aide de Firefox 3.5+. Vous devriez voir une bannière comme celle-ci :
Il vous suffit d’autoriser la mise en cache. Pour les autres navigateurs que j’ai pu tester (Chrome, Safari, Android) aucun avertissement sur la mise en cache de fichiers n’est affiché, le fichier est automatiquement mis en cache.
Ci-dessous vous trouverez la compatibilité avec les navigateurs :
- IE : Aucun support
- Firefox: 3.5 +
- Safari: 4.0 +
- Chrome: 5.0 +
- Opera: 10.6 +
- iPhone: 2.1 +
- Android: 2.0 +
[samples id= »4116″]
Conclusion
Les applications Web ont fait énormément de chemin et ont considérablement évoluées ! On demande maintenant aux navigateurs mobiles des choses que l’on n’aurait pas osé demander à leurs ainés de bureau. Le mode hors-connexion en fait partie.
Les standards spécifiés par HTML5 font beaucoup pour permettre aux développeurs de fournir un mode déconnecté à leurs applications Web mobiles.
Je pense vraiment que cette spécificité va apporter une autre vision sur le stockage des applications Web mais aussi des jeux hors-ligne !
Et vous, qu’en pensez-vous ? Avez-vous déjà mis en œuvre cette spécificité HTML5 ? Si oui, venez en parler dans la partie des commentaires.
