Définit la marge intérieure droit d'un élément
Qu’est ce que le cache d'Application ?
HTML5 cours tutorialHTML5 introduit le cache d'application, qui signifie qu'une application Web est mise en cache et accessible sans connexion internet.
Le cache d'application donne trois avantages à applications :
Navigation en mode hors connexion - les utilisateurs peuvent utiliser l'application même s’ils sont hors ligne
Vitesse - les ressources mises en cache se chargent plus rapidement
Charge du serveur réduite- le navigateur téléchargera seulement les ressources mises à jour ou modifiée depuis le serveur
Appui de navigateur
Le cache de l'application est pris en charge dans tous les principaux navigateurs, sauf Internet Explorer.
HTML5 Exemple manifest de Cache
L'exemple suivant montre un document HTML avec un cache manifest (pour la navigation hors ligne) :
Exemple
Exemple :
Exemple : Copier le code
<!DOCTYPE HTML> <html manifest="demo.appcache"> <head> <title>HTML5 demo</title> <meta charset="UTF-8" /> </head> <body> <div> Ici le contenu de votre page</div> </body> </html>
Dans l’exemple nous avons le squelette d’une page Web, mai avec un attribut manifest qui est ajouté à la balise <html>.
Cet attribut déclare un fichier manifest qui dans notre exemple est nommé "demo.appcache".
Basics manifest de cache
Pour activer le cache d'application, incluez l'attribut manifest dans le document dans la balise <html> :
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
Toutes les pages qui ont reçu l'attribut manifest vont être mis en cache lorsque l'utilisateur les visite. Si l'attribut manifest n'est pas spécifié, la page ne sera pas mise en cache (sauf si la page est spécifiée directement dans le fichier manifest).
L’application cache repose principalement sur l’utilisation d’un fichier “manifest” à ajouter aux pages de votre site.
Le fichier manifest
Le fichier manifest est un fichier texte simple qui indique au navigateur ce qu’il faut mettre en cache (et ce qu'il ne faut jamais mettre en cache).
Ce fichier, commence obligatoirement par la ligne “CACHE MANIFEST”, qui est le titre d’une première section du fichier.
Le fichier manifest comporte trois sections :
CACHE MANIFEST –Section obligatoire, les fichiers répertoriés sous cet en-tête vont être mis en cache après leur téléchargement pour la première fois
NETWORK –Section facultative, les fichiers répertoriés dans cette rubrique nécessitent une connexion au serveur et ne doivent jamais être mise en cache
FALLBACK – Section facultative, les fichiers répertoriés sous cet en-tête spécifie une page de secours si une page n'est pas accessible
CACHE MANIFEST
La première section est CACHE manifest :
CACHE MANIFEST /theme.css /logo.gif /main.js
Le fichier manifest ci-dessus répertorie trois ressources : un fichier CSS, une image GIF et un fichier JavaScript. Lors du chargement du fichier manifest, le navigateur va télécharger les trois fichiers depuis le répertoire racine du site web. Ensuite, chaque fois que l'utilisateur n'est pas connecté à Internet, les ressources seront toujours disponibles.
RÉSEAU NETWORK:
La section réseau (NETWORK) ci-dessous spécifie que le fichier « login.php» ne doit jamais être mis en cache et ne sera pas disponible en mode hors connexion :
NETWORK: login.php
Un astérisque peut être utilisé pour indiquer que toutes les autres ressources/fichiers qui ne sont pas indiqués dans la section CACHE MANIFEST et n’ont pas l’attribut manifest dans la balise <html> nécessite une connexion Internet :
NETWORK: *
SECOURS FALLBACK :
La section de secours ci-dessous spécifie que « offline.html » sera servi à la place de tous les fichiers du catalogue de /html/, dans le cas où la connexion internet ne peut être établie :
FALLBACK: /html/ /offline.html
Remarque : La première URI est la ressource principale, la second est le secours.
L'extension de fichier recommandée pour les fichiers manifest est: « .appcache », mais vous pouvez utiliser d’autre extention( par exemple .manifet)
Un fichier manifest doit être servi avec le type MIME correct, qui est "text/cache-manifest".
Qui doit être configuré sur le serveur web. Dans la grande majorité des cas vous utiliserez un fichier .htaccess.
Créez donc un fichier .htaccess dans le répertoire de votre application et y ajoutez simplement la ligne :
Exemple :
Exemple : Copier le code
AddType text/cache-manifest appcache
Dans cette ligne, on déclare que tous les fichiers se terminant par l’extension “appcache” ont pour MIME-type “text/cache-manifest”.
Mise à jour du Cache
Une fois qu'une application est mise en cache, il reste en mémoire cache jusqu'à ce qu'une des actions suivantes se produit :
L'utilisateur efface le cache du navigateur
Le fichier manifest est modifié (voir l'astuce ci-dessous)
Mise à jour par programme le cache d'application
Exemple de fichier manifest de Cache complet :
Exemple :
Exemple : Copier le code
CACHE MANIFEST # 2011-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
Astuce : Les lignes
commençant par un « # » sont des lignes de commentaires, mais peuvent également servir à
une autre fin. Le cache de l'application est uniquement mis à jour lorsque son fichier
manifest est modifiée. Si vous modifiez une image ou modifiez une fonction JavaScript, ces
modifications ne seront pas remises en mémoire cache. La mise à jour de la date et la
version dans une ligne de commentaire est une façon de montrer au navigateur qu’il doit
remettre en cache vos fichiers.
Notes sur le Cache de l'Application
Soyez prudent avec ce que vous mettez en cache.
Une fois qu'un fichier est mis en cache, le navigateur continuera d'afficher la version mise en cache, même si vous modifiez le fichier sur le serveur. Afin de s'assurer que le navigateur actualise le cache, vous devez modifier le fichier manifest.
Remarque : Les navigateurs peuvent avoir des limites de différentes tailles pour les données en mémoire cache (certains navigateurs ont une limite de 5 Mo par site).Par carabde 10 juin 2014