La plupart des applications basées sur le Web ne fonctionnent que si vous êtes en ligne, ce qui rend d'une certaine sorte de sens. Mais HTML5 dispose d'un mécanisme pour forcer partie d'une page Web et de ses ressources pour être stocké sur la machine locale de sorte que vous pouvez le voir en mode hors connexion. Vous pouvez avoir une page elle-même identifier pour ce comportement et tenter de sauvegarder une copie sur le automatically- de la machine locale par exemple:

Stockage hors connexion Démo

Bien que très simple, cette page parvient à attirer des ressources à partir de plusieurs fichiers différents. Bien sûr, il faut l'image pot.jpg, mais il utilise également un fichier javascript externe (offline.js) Et une feuille de style externe (offline.css). HTML5 offre un mécanisme qui permet au navigateur de sauvegarder automatiquement non seulement le fichier HTML, mais toutes les autres ressources dont il a besoin pour afficher correctement.

Vous ne voulez pas construire une telle page simple avec tant de dépendances externes, mais ce qui est le point de cet exercice particulier.

Le secret est dans un fichier spécial appelé cache.manifest. Ce dossier spécial est tout simplement un fichier texte qui indique quels autres fichiers sont nécessaires par la page. Voici le contenu de cache.manifest pour cet exemple particulier:

CACHE MANIFESToffline.cssoffline.jspot.jpg

Le fichier doit commencer avec la phrase Manifeste de cache (tout en majuscules). Chaque ligne suivante doit contenir le nom d'un fichier nécessaire pour remplir la page. Il est plus facile si tous les fichiers sont dans le même répertoire, mais des références relatives sont acceptables.

Suivez ces étapes pour configurer une page pour le cache hors connexion:

1. Configurez votre serveur pour gérer les caches.

   
   
   
   
   

   Le mécanisme de cache utilise le text / manifeste Type MIME. Votre serveur peut pas encore être mis en place pour ce type de données. Si vous utilisez Apache, cela est facile à corriger. Recherchez (ou créer) un fichier texte nommé .htaccess dans le répertoire racine de votre serveur web. Ajoutez la ligne suivante à ce fichier:

   AddType text / .manifest de cache-manifest

   Si vous n'êtes pas autorisé à ajouter ou modifier .htaccess ou si vous utilisez un autre serveur, vous pourriez avoir à demander à votre administrateur de serveur pour ajouter ce type MIME.

2. Créer votre fichier manifeste par la construction d'un fichier texte nommé cache.manifest dans le même répertoire que votre projet.

   Faire la première ligne lue Manifeste de cache. Sur chaque ligne suivante, la liste de l'un des atouts de votre page aura besoin. Vous pouvez avoir besoin de regarder à travers votre code source pour trouver les différents éléments (normalement images, CSS, javascript) et les fichiers que votre page aura besoin.

3. Création de la page de façon normale.

   Gardez une trace de toutes les ressources externes, vous pourriez avoir besoin.

4. Indiquez que votre page se demander stockage local en ajoutant le manifeste attribuer à la tag et un lien vers votre cache.manifest fichier.

5. Chargez votre page.

   Évidemment, vous ne pouvez pas tester cache sur une machine locale (sauf si vous utilisez votre propre serveur Web et essai à travers la http: // localhost adresse). Vous aurez besoin de charger vos fichiers sur un serveur. La première fois que vous essayez d'accéder à la page, votre navigateur va probablement demander la permission de sauvegarder les données localement. Accorder l'autorisation de le faire.

6. Déconnecté de test.

   Pour voir si la page fonctionne, déconnecter d'Internet (en éteignant votre réseau sans fil ou de débrancher votre câble réseau). Essayez de recharger la page. Si vous avez du succès, la page entière sera charger.

Navigateurs ont déjà une forme de cache qui stocke automatiquement les pages que l'utilisateur a visités, mais ce type de cache est une forme différente, plus intentionnelle de cache.

Notez que vous ne pouvez pas mettre des liens vers des actifs côté serveur dans le cache. Un cache local ne peut pas stocker un programme ou une base de PHP. Cependant, vous pouvez stocker toutes les données dont vous avez besoin sur le client afin que votre projet travaillera toujours sans connexion au serveur.

Si vous changez cache.manifest déposer et retester, le navigateur ne sera pas mise à jour immédiatement. Voilà parce que les navigateurs sont réglés pour maintenir le cache actuel pour un couple d'heures. Si vous testez à nouveau après une couple d'heures, vous verrez les changements reflétaient. Pendant le test, vous pouvez activer la mise en cache du navigateur hors service automatique en ajoutant ces lignes à votre .htaccess fichier:

ExpiresActive OnExpiresDefault «accès»

Il n'a de sens que pour désactiver le cache du navigateur sur un serveur de test. Laissez le comportement de mise en cache à son niveau par défaut pour un serveur de production.

Si l'une des modifications de fichiers, mais le cache.manifest fichier ne, le navigateur ne connaîtra pas de recharger le fichier modifié. Si vous voulez déclencher un rechargement complet du fichier, vous avez besoin de changer au moins un caractère dans la cache.manifest fichier. Cela peut être un commentaire, de sorte que vous pouvez simplement ajouter un numéro de version comme ceci:

#version 3

Changer le numéro de version déclencher le mécanisme de recharge la prochaine fois que vous êtes en ligne, de sorte que la version hors ligne sera à jour.