Explication détaillée du code du cache d'application HTML5 hors ligne

1. Scénarios d'application

Nous utilisons généralement le cache du navigateur Le stockage d'une seule page Web sur le disque de l'utilisateur permet d'économiser de la bande passante lorsque l'utilisateur navigue à nouveau, mais malgré cela, le Web n'est toujours pas accessible sans Internet. Afin de permettre l'accès à l'application Web même dans l'état hors ligne . html5 fournit une fonction de stockage hors ligne via le cache d'application API. Le principe est que la page Web que vous devez visiter a été visitée en ligne au moins une fois.

Quelle est la différence entre le stockage local hors ligne et le cache du navigateur traditionnel ?

1. Le cache du navigateur comprend principalement deux catégories :

a. Négociation du cache : Dernière modification, Etag

Le navigateur demande au serveur si la page a été modifiée. S'il n'y a aucune modification, 304 est renvoyé et le navigateur parcourt directement le fichier cache local. Sinon, le serveur renvoie un nouveau contenu.

b. Mise en cache complète : contrôle du cache, Expires

Définissez le délai d'expiration du cache via Expires, et il n'est pas nécessaire d'interagir avec la demande du serveur avant l'expiration.

2. Le stockage hors ligne fournit des services pour l'ensemble du Web et le cache du navigateur ne met en cache qu'une seule page ;

3. Le stockage hors ligne peut spécifier les fichiers qui doivent être mis en cache et lesquels peuvent être mis en cache ; être consulté uniquement en ligne. Le cache ne peut pas être spécifié

4. Le stockage hors ligne peut informer dynamiquement les utilisateurs de mettre à jour.

2. Comment mettre en œuvre

Le stockage hors ligne est géré via des fichiers manifestes et nécessite une prise en charge côté serveur. Différents serveurs ont différentes manières d'activer la prise en charge.

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

CACHE spécifie les fichiers qui doivent être mis en cache ; NETWORK spécifie les fichiers qui ne peuvent être parcourus que via Internet, * représente les fichiers autres que ceux de CACHE ; chaque ligne de FALLBACK spécifie les fichiers utilisés respectivement en ligne et hors ligne ;

Pour laisser le manifeste gérer le stockage, vous devez également définir l'attribut manifest dans la balise html , comme suit :

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;"><a href="http://www.php.cn/java/java-ymp-Lang.html" target="_blank">lang</a></span><span style="color: #0000ff;">="en"</span><span style="color: #ff0000;"> manifest</span><span style="color: #0000ff;">=&#39;test.manifest&#39;</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;"><a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a></span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">char<a href="http://www.php.cn/code/8209.html" target="_blank">set</a></span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Enfin, n'oubliez pas que ces applications nécessitent le support du serveur.

La façon d'activer la prise en charge du serveur Apache est la suivante : ajoutez un morceau de code dans conf/mime.types :

            test/cache-manifest manifest

La façon d'activer le serveur IIS :

Cliquez avec le bouton droit - -HTTP --- Sous le mappage MIME, cliquez sur le type de fichier --- Nouveau --- entrez manifest pour l'extension et entrez test/cache-manifest pour le type

3. Contrôler dynamiquement les mises à jour via JS

applicationCacheobject fournit des méthodes et des événements pour gérer le processus interactif de stockage hors ligne. En entrant window.applicationCache dans la console Firefox8.0, vous pouvez voir toutes les propriétés et méthodes d'événement de cet objet

.

applicationCache.onchecking = function(){
   //检查manifest文件是否存在
}

applicationCache.ondownloading = function(){
   //检查到有manifest或者manifest文件
   //已更新就执行下载操作
   //即使需要缓存的文件在请求时服务器已经返回过了
}

applicationCache.onnoupdate = function(){
   //返回304表示没有更新，通知浏览器直接使用本地文件
}

applicationCache.onprogress = function(){
   //下载的时候周期性的触发，可以通过它
   //获取已经下载的文件个数
}

applicationCache.oncached = function(){
   //下载结束后触发，表示缓存成功
}

application.onupdateready = function(){
   //第二次载入，如果manifest被更新
   //在下载结束时候触发
   //不触发onchched
   alert("本地缓存正在更新中。。。");
   if(confirm("是否重新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){
   //未找到文件，返回404或者401时候触发
}

applicationCache.onerror = function(){
   //其他和离线存储有关的错误
}

4. Interaction entre le navigateur et le serveur

Il y avait une question d'entretien comme celle-ci : « La description est saisie dans la barre d'adresse du navigateur : www. Que s'est-il passé après baidu.com ? »

1. Le serveur renvoie les ressources de la page Baidu et le navigateur charge le HTML

2. Le navigateur commence l'analyse

3. J'ai trouvé le lien et envoyé une demande de chargement le fichier CSS

4. Le navigateur affiche la page

5. Trouvé la image, envoie une demande de chargement de l'image et restitue

6. Envoyez le fichier js de la requête, Bloque le rendu. Si js fonctionne sur le dom, il sera restitué

Pour les pages prenant en charge le stockage hors ligne, quelle est l'interaction entre le navigateur et le serveur ?

Première page de chargement :

1-6 : Idem que ci-dessus

7 : Pages et données qui doivent être mises en cache dans la page de requête, même s'ils sont dans la page précédente Cela a été demandé à l'étape (c'est un endroit consommateur d'énergie)

8 : Le serveur renvoie tous les fichiers demandés, et le navigateur les stocke localement

Charger à nouveau la page :

1 : Envoyer une demande

2 : Utiliser les fichiers hors ligne stockés localement

3 : Analyser la page

4 : Demander le fichier manifeste du serveur pour déterminer s'il y a un changement, renvoyer 304 signifie qu'il n'y a pas de changement et passer à l'étape 5, sinon passer à l'étape 6

5 : Entrez 7-8 de la première page de chargement

6 : Utilisez le stockage local et ne redemandez pas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!