Exemple de code pour la mise en cache hors ligne du manifeste HTML5-Tutoriel H5-php.cn

Exemple de code pour la mise en cache hors ligne du manifeste HTML5

青灯夜游

Libérer： 2018-10-09 16:14:49

avant

2224 Les gens l'ont consulté

L'accès hors ligne devient de plus en plus important pour les applications basées sur le réseau. Cet article présente principalement les informations pertinentes sur l'exemple de code de mise en cache hors ligne du manifeste HTML5. J'espère qu'il a une certaine valeur de référence. ce sera utile. Vous avez aidé.

Introduction

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'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 avoir 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>

Copier après la connexion

<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 côté serveur.
En prenant Apache comme exemple, nous devons ajouter à httpd.conf : AddType text/cache-manifest .manifest

Structure du fichier manifeste

Un format de manifeste simple 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 &#39;master entries&#39;.
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 de 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.
Remarque : ces 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

请注意：系统会自动缓存引用清单文件的 HTML 文件。因此您无需将其添加到清单中，但我们建议您这样做。

请注意：HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。因此，通过 https 提供的网页可实现离线运行。

更新缓存

应用在离线后将保持缓存状态，除非发生以下某种情况：