Solution d'application hors ligne HTML5 pour créer un site Web sans demande et sans trafic_html5 compétences du didacticiel

Avant-propos

Les applications Web d'aujourd'hui sont déjà très complexes. Avec le développement actuel, elles le deviendront de plus en plus. Cependant, elles présentent un défaut fatal, à savoir qu'elles ne peuvent pas être déconnectées d'Internet. C'est pourquoi une nouvelle API a été ajoutée. en HTML,

Il utilise un mécanisme de stockage local pour bien résoudre ce problème, ouvrant la voie aux applications Web hors ligne.
Cache local dans le cache du navigateur

Copiez le code

Le code est le suivant :

Le cache local sert l'intégralité de l'application Web
Le cache du navigateur ne sert qu'une seule page Web</p> <p>Toute page Web dispose d'un cache de pages Web
Le cache local ne met en cache que les pages que vous spécifiez comme cache</p> <p>La mise en cache des pages Web n'est pas fiable et dangereuse car nous ne savons pas quelles pages et ressources sont mises en cache sur le site Web
La mise en cache locale peut contrôler le contenu qui est mis en cache

manifeste fichier

Le cache local des applications Web est géré via le fichier manifeste de chaque page. Le manifeste est un simple texte dans lequel les noms et chemins des fichiers qui doivent être mis en cache et qui n'ont pas besoin d'être mis en cache sont répertoriés sous le formulaire. d'une liste.

Le manifeste peut être spécifié individuellement pour chaque page ou pour l'ensemble de l'application. Par exemple, nos paramètres pour hello.htm :

Copier le codeLe code est le suivant :

CACHE MANIFEST
CACHE:
other.html
hellow.js
images/myphoto.jpg
RÉSEAU :
http://LuLinniu/NotOffline
NotOffline.asp
*
FALLBACK :
online.js locale.js
CACHE :
newhellow.html
newhellow .js

Dans le fichier manifeste, la première ligne doit être CACHE MANIFEST pour indiquer au navigateur le rôle du texte, c'est-à-dire pour définir des paramètres spécifiques pour les fichiers de ressources dans le fichier local cache.
Lorsque vous exécutez une application Web hors ligne en même temps, vous devez configurer le serveur afin qu'il prenne en charge le type MIME texte/cache-manifest.
Lors de la spécification des fichiers source, les fichiers de ressources peuvent être divisés en trois catégories, CACHE, RÉSEAU et FALLBACK

Copier le code Le code est le suivant :

</p> <p>Spécifiez les fichiers de ressources qui doivent être mis en cache localement dans la catégorie CACHE. Lorsque vous spécifiez les fichiers de ressources qui doivent être mis en cache localement pour une certaine page, vous n'avez pas besoin de spécifier la page elle-même dans la catégorie CACHE,

car si une page contient un fichier manifeste, le navigateur mettra automatiquement la page en cache localement</p> <p>La catégorie RÉSEAU regroupe les fichiers de ressources qui sont explicitement spécifiés pour ne pas être mis en cache. Ces fichiers ne sont accessibles qu'en établissant un lien côté serveur. Dans cet exemple, le caractère générique * est utilisé pour indiquer ceux qui ne sont pas enregistrés. ne sera pas mis en cache</p> <p>Chaque ligne de la catégorie FALLBACK spécifie deux fichiers de ressources. Le premier fichier de ressources est le fichier de ressources utilisé lorsqu'il est accessible en ligne, et le second est le fichier de cache local utilisé lorsqu'il n'est pas accessible en ligne

Le processus d'interaction entre le navigateur et le serveur Lorsque vous travaillez avec des applications Web hors ligne, il est nécessaire de comprendre le processus d'interaction entre le navigateur et le serveur :

Copier le codeLe code est le suivant :

Par exemple, http://LuLingniu, avec index.htm comme page d'accueil, la page d'accueil utilise index.manifest,
met en cache index.htm dans le fichier hello.js, hello.jpg, le processus de première visite est le suivant :
Le navigateur demande l'url
Le serveur renvoie la page d'accueil index.htm
Le navigateur analyse l'index. htm et demande tous les fichiers de ressources sur la page
Le serveur renvoie le fichier de ressources
Le navigateur traite le fichier manifeste et demande le fichier qui doit être mis en cache dans le manifeste, même s'il a été demandé. il le demandera à nouveau
. Le serveur renvoie le fichier qui doit être mis en cache
Le navigateur met à jour le cache local et l'enregistre et déclenche un événement pour notifier les mises à jour du cache local</p> <p>Ouvrez à nouveau l'URL
Demander l'URL
Le navigateur constate que la page est mise en cache, il utilise donc le fichier de cache local
pour analyser le fichier
Le navigateur demande le fichier manifeste au serveur
et le serveur renvoie 304, Notifie que le fichier manifeste n'a pas changé (il sera différent s'il change)


Objet applicationCache

Cet objet représente le cache local, qui peut être utilisé pour avertir l'utilisateur que le cache local a été mis à jour, et permet également la mise à jour manuelle du cache local.

Lorsque le navigateur met à jour le cache local et charge un nouveau fichier de ressources, l'événement updateready de l'objet applicationCache sera déclenché, notifiant que le cache local a été modifié, puis invitant l'utilisateur à actualiser manuellement la page.
swapCache

La méthode swapCache est utilisée pour effectuer manuellement des mises à jour du cache local. Elle ne peut être appelée que lorsque l'événement updateReady de l'objet applicationCache est déclenché,

C'est-à-dire que lorsque le fichier de ressources change, vous pouvez utiliser cette méthode pour mettre manuellement en cache la mise à jour.