Qu'est-ce que le cache hors ligne h5 ? Application de mise en cache hors ligne manifeste h5 (avec code)-tutoriel HTML-php.cn

Qu'est-ce qui est manifeste ? Le manifeste est un fichier avec un suffixe nommé minifest. Les fichiers qui doivent être mis en cache sont définis dans le fichier. Les navigateurs prenant en charge le manifeste enregistreront les fichiers localement selon les règles du fichier manifeste, de sorte que même s'il n'y a pas de lien réseau. , Peut accéder à la page.

L'accès hors ligne est de plus en plus important pour les applications Web. Bien que tous les navigateurs disposent de mécanismes de mise en cache, ils ne sont pas fiables et peuvent ne pas toujours fonctionner comme prévu. HTML5 utilise l'interface ApplicationCache pour résoudre certains des problèmes causés par le mode hors connexion.

L'utilisation d'une interface de cache apporte les trois avantages suivants à votre application :

Navigation hors ligne : les utilisateurs peuvent parcourir l'intégralité de votre site Web en mode hors connexion
Vitesse - Les ressources mises en cache sont des ressources locales, elles se chargent donc plus rapidement.
Moins de charge du serveur - le navigateur téléchargera uniquement les ressources des serveurs qui ont changé.

Application Cache (également connu sous le nom d'AppCache) permet aux développeurs de spécifier quels fichiers doivent être mis en cache par le navigateur pour que les utilisateurs hors ligne puissent y accéder. Même si l'utilisateur appuie sur le bouton d'actualisation lorsqu'il est hors ligne, votre application se chargera et s'exécutera normalement.

Référez-vous au fichier manifeste

Pour activer la mise en cache d'application pour une application, ajoutez l'attribut manifest à la balise html du document :
L'attribut manifest peut pointer vers une URL absolue ou un chemin relatif, mais l'URL absolue doit provenir de la même origine que l'application Web correspondante. Le fichier manifeste peut utiliser n'importe quelle extension de fichier, mais doit être servi avec le type MIME correct (voir ci-dessous).

<html manifest="/cache.manifest">
  ...
</html>

或

<html manifest="http://www.example.com/example.mf">
  ...
</html>

Copier après la connexion

Vous devez ajouter l'attribut manifest sur chaque page de votre application Web que vous souhaitez mettre en cache. Si une page Web ne contient pas l'attribut manifeste, le navigateur ne mettra pas la page en cache (sauf si l'attribut est explicitement répertorié dans le fichier manifeste).
Cela signifie que chaque page Web parcourue par l'utilisateur et contenant un manifeste sera implicitement ajoutée au cache de l'application. Par conséquent, vous n’avez pas besoin de répertorier toutes les pages de votre inventaire.

Les fichiers manifestes doivent être fournis au format MIME texte/cache-manifest. Le nom du suffixe du fichier peut être personnalisé (.manifest est recommandé), nous devons donc déclarer le type de fichier avec le suffixe .manifest sous forme de texte/cache-manifest sur le serveur.
En prenant Apache comme exemple, nous devons ajouter à httpd.conf : AddType text/cache-manifest .manifest

Structure du fichier manifeste

Le format simple du manifeste est le suivant :

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

Copier après la connexion

Cet exemple mettra en cache quatre fichiers sur la page Web qui spécifie ce fichier manifeste.

Vous devez faire attention aux points suivants :

La chaîne CACHE MANIFEST doit être sur la première ligne et est essentielle.

La taille des données mises en cache d'un site Web ne doit pas dépasser 5 Mo. Toutefois, si vous écrivez une application pour le Chrome Web Store, vous pouvez utiliser unlimitedStorage pour supprimer cette restriction.

Si le fichier manifeste ou les ressources qui y sont spécifiées ne peuvent pas être téléchargés, l'ensemble du processus de mise à jour du cache ne peut pas se poursuivre. Dans ce cas, le navigateur continuera à utiliser le cache de l'application d'origine.

Regardons un exemple plus complexe :

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

Copier après la connexion

Les lignes commençant par "#" sont des lignes de commentaires, mais peuvent également être utilisées à d'autres fins. Par exemple, mettre à jour le cache
Le cache de l'application ne sera mis à jour que lorsque son fichier manifeste sera modifié. Par exemple, si vous modifiez une ressource image ou une fonction JavaScript, ces modifications ne seront pas remises en cache. Vous devez modifier le fichier manifeste lui-même pour permettre au navigateur d'actualiser le fichier cache. La création de lignes de commentaires avec des numéros de version générés, des hachages de fichiers ou des horodatages garantit que les utilisateurs disposent de la dernière version de votre logiciel.
Vous pouvez également mettre à jour le cache par programme lorsqu'une nouvelle version devient disponible, comme décrit dans la section Mise à jour du cache.

Si la page introduit un fichier manifeste de cache, le fichier manifeste doit contenir tous les fichiers requis par la page courante (css, js, image...), sinon il ne sera pas chargé, donc les fichiers qui qui doivent être mis en cache sont supprimés. Il est recommandé d'ajouter un astérisque * à l'élément RÉSEAU dans le fichier pour indiquer que la liste de tous les autres fichiers

peut inclure les trois parties différentes suivantes : CACHE, RÉSEAU et FALLBACK. .

CACHE :

C'est la partie par défaut de l'entrée. Les fichiers répertoriés sous cet en-tête (ou les fichiers qui suivent immédiatement CACHE MANIFEST) sont explicitement mis en cache lors de leur premier téléchargement.

RÉSEAU :

Les fichiers répertoriés dans cette section sont des ressources sur liste blanche qui doivent être connectées au serveur. Toutes les demandes concernant ces ressources contournent le cache, que l'utilisateur soit ou non hors ligne. Des caractères génériques peuvent être utilisés.

REMPLI :

Cette section est facultative et est utilisée pour spécifier une page de secours si la ressource n'est pas accessible. Le premier URI représente la ressource et le second représente la page Web de secours. Les deux URI doivent être liés et doivent avoir la même origine que le fichier manifeste. Des caractères génériques peuvent être utilisés.
Veuillez noter : les sections peuvent être organisées dans n'importe quel ordre et chaque section peut apparaître à plusieurs reprises dans la même liste.

La liste suivante définit la page "complète" (offline.html) qui s'affiche lorsqu'un utilisateur tente d'accéder à la racine du site hors ligne, et indique également que toutes les autres ressources (telles que celles des sites distants ) nécessitent une connexion Internet.

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

Copier après la connexion

Veuillez noter : les fichiers HTML qui font référence aux fichiers manifestes sont automatiquement mis en cache. Vous n’avez donc pas besoin de l’ajouter à votre liste, mais nous vous recommandons de le faire.

Veuillez noter : les en-têtes de cache HTTP et les limites de cache définies sur les pages servies via SSL seront remplacées par des manifestes de cache. Par conséquent, les pages Web servies via https peuvent s’exécuter hors ligne.

Mettre à jour le cache

Les applications resteront mises en cache lorsqu'elles sont hors ligne, sauf si l'une des situations suivantes se produit :

Effacer par l'utilisateur Supprimer le le stockage des données de votre site Web par le navigateur.
Le fichier manifeste a été modifié. Remarque : La mise à jour d'un fichier répertorié dans le manifeste ne signifie pas que le navigateur remettra la ressource en cache. Le fichier manifeste lui-même doit être modifié.
Le cache de l'application est mis à jour par programme.