Mise en cache des applications HTML5
Qu'est-ce que le cache d'application ?
HTML5 introduit la mise en cache des applications, ce qui signifie que les applications Web peuvent être mises en cache et accessibles sans connexion Internet.
La mise en cache des applications apporte trois avantages aux applications :
1. Navigation hors ligne : les utilisateurs peuvent utiliser les applications lorsqu'ils sont hors ligne
2. Vitesse : chargement des ressources mises en cache Obtenez plus rapidement
3. Réduisez la charge du serveur - le navigateur téléchargera uniquement les ressources mises à jour ou modifiées à partir du serveur.
HTML5, vous pouvez facilement créer une version hors ligne de votre application Web en créant un fichier manifeste de cache.
Prise en charge du navigateur
Internet Explorer 10, Firefox, Chrome, Safari et Opera prennent en charge la mise en cache des applications.
Exemple de manifeste de cache HTML5
L'exemple suivant montre un document HTML avec un manifeste de cache (pour une navigation hors ligne) :
<!DOCTYPE html> <html manifest="demo_html.appcache"> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <script src="demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p> <p><img src="http://img.taopic.com/uploads/allimg/130512/240477-130512133S924.jpg" width="336" height="69"></p> <p>尝试打开 <a href="" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p> </body> </html>
Bases du manifeste de cache
Pour activer la mise en cache de l'application, incluez l'attribut manifest dans la balise <html> du document :
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Chaque page avec un manifeste spécifié sera mise en cache lorsque l'utilisateur y accédera. Si l'attribut manifest n'est pas spécifié, la page ne sera pas mise en cache (sauf si elle est spécifiée directement dans le fichier manifeste).
L'extension de fichier recommandée pour les fichiers manifestes est : ".appcache".
Veuillez noter que le fichier manifeste doit être configuré avec le type MIME correct, c'est-à-dire "text/cache-manifest". Doit être configuré sur le serveur Web.
Fichiers manifestes
Les fichiers manifestes sont de simples fichiers texte qui indiquent au navigateur ce qui est mis en cache (et ce qui ne l'est pas) .
Les fichiers manifestes peuvent être divisés en trois sections :
CACHE MANIFEST - les fichiers répertoriés sous cette rubrique seront mis en cache après le premier téléchargement
RÉSEAU - Les fichiers répertoriés sous cette rubrique nécessitent une connexion au serveur et ne seront pas mis en cache
FALLBACK - Les fichiers répertoriés sous cette rubrique nécessitent une connexion à la page Page de secours lorsque inaccessible (comme une page 404)
CACHE MANIFEST
La première ligne, CACHE MANIFEST, est requise :
CACHE MANIFEST
/theme.css
/logo
/main. .js
Le fichier manifeste ci-dessus répertorie trois ressources : un fichier CSS, une image GIF et un fichier JavaScript. Lors du chargement du fichier manifeste, le navigateur télécharge ces trois fichiers à partir du répertoire racine du site Web. Ainsi, chaque fois que l’utilisateur se déconnecte d’Internet, ces ressources restent disponibles.
RÉSEAU
La section RÉSEAU suivante précise que le fichier "login.php" ne sera jamais mis en cache et n'est pas disponible hors ligne :
RÉSEAU :
login.php
Un astérisque peut être utilisé pour indiquer que toutes les autres ressources/fichiers nécessitent une connexion Internet :
RÉSEAU :
*
FALLBACK
La sous-section FALLBACK suivante indique que si Si la connexion Internet ne peut pas être établie, remplacez tous les fichiers du répertoire /html5/ par "offline.html" :
FALLBACK :
/html/ /offline.html
Remarque : Le premier URI est la ressource, le second est le substitut.
Mettre à jour le cache
Une fois l'application mise en cache, il restera en cache jusqu'à ce que ce qui suit se produise :
L'utilisateur efface le cache du navigateur
Le fichier manifeste est modifié (voir conseils ci-dessous)
Mettre à jour le cache de l'application par programme
Exemple - fichier manifeste complet
MANIFESTE DE CACHE
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
RÉSEAU :
login.php
FALLBACK :
/html/ /offline.html
Astuce : Les lignes commençant par "#" sont des lignes de commentaires, mais peuvent servir à d'autres fins. Le cache de l'application est mis à jour lorsque son fichier manifeste change. Si vous modifiez une image ou modifiez une fonction JavaScript, ces modifications ne seront pas remises en cache. La mise à jour de la date et du numéro de version dans la ligne de commentaire est un moyen d'amener le navigateur à remettre le fichier en cache.
Remarque sur la mise en cache des applications
Veuillez faire attention au contenu du 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. Pour vous assurer que le navigateur met à jour son cache, vous devez mettre à jour votre fichier manifeste.
Remarque : les navigateurs peuvent avoir des limites de capacité différentes pour les données mises en cache (certains navigateurs fixent une limite de 5 Mo par site).
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
