Principe de stockage hors ligne HTML5 et exemples de code d'implémentation-Tutoriel H5-php.cn

Préface

En utilisant HTML5, vous pouvez facilement créer une version hors ligne d'une application Web en créant un fichier manifeste de cache.

HTML5 introduit la mise en cache des applications, ce qui signifie que les applications Web peuvent être mises en cache et accessibles sans connexion Internet. La mise en cache des applications apporte trois avantages aux applications :

Navigation hors ligne : les utilisateurs peuvent utiliser les applications lorsqu'ils sont hors ligne

Vitesse – Chargement des ressources mises en cache plus rapide

Charge réduite du serveur – le navigateur téléchargera uniquement les ressources mises à jour ou modifiées à partir du serveur.

Principes et environnement

Comme mentionné ci-dessus, le stockage hors ligne de HTML5 est basé sur un fichier .appcache nouvellement créé, via le 解析清单 sur ce fichier 🎜>Ressources de stockage hors ligne, ces ressources seront stockées comme des cookies. Plus tard, lorsque le réseau sera hors ligne, le navigateur affichera la page via les données stockées hors ligne.

Tout comme les cookies, le stockage hors ligne HTML5 nécessite également un environnement serveur.
Voici un petit outil - un simple serveur iis. Placez-le dans le répertoire de mise à jour du projet et double-cliquez pour l'exécuter afin de simuler l'environnement du serveur.
Lien : http://pan.baidu.com/s/1jG86UV0 Mot de passe : ja9h

Liste d'analyse

Avant de commencer, vous devez comprendre manifest ( c'est-à-dire le fichier .appcache), comment écrire le 解析清单 ci-dessus.

Les fichiers manifestes sont de simples fichiers texte qui indiquent au navigateur ce qui est mis en cache (et ce qui ne l'est pas).

Les fichiers manifestes peuvent être divisés en trois sections :

CACHE MANIFEST - les fichiers répertoriés sous cette rubrique seront mis en cache après le premier téléchargement

RÉSEAU - Les fichiers répertoriés sous cette rubrique nécessitent une connexion au serveur et ne seront pas mis en cache

FALLBACK - Les fichiers répertoriés sous cette rubrique nécessitent une connexion à la page Page de secours lorsque inaccessible (comme la page 404)

Lorsqu'il est en ligne, l'agent utilisateur lira le manifeste à chaque fois qu'il visitera la page. Si des modifications sont trouvées, il sera rechargé. Toutes les ressources du manifeste.

CACHE MANIFEST

La première ligne, CACHE MANIFEST, est obligatoire :

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Copier après la connexion

Le fichier manifeste ci-dessus répertorie trois ressources : un fichier CSS, un GIF image et un fichier JavaScript. Lors du chargement du fichier manifeste, le navigateur télécharge ces trois fichiers à partir du répertoire racine du site Web. Ainsi, chaque fois que l’utilisateur se déconnecte d’Internet, ces ressources restent disponibles.

RÉSEAU

liste blanche, utilisez le caractère générique "*". Il entrera dans l'état ouvert de la liste blanche. Dans cet état, toutes les URL qui n'apparaissent pas dans la zone de cache correspondante. sera utilisé par défaut par la politique d'en-tête de cache liée à HTTP

La section RÉSEAU suivante stipule que le fichier "login.asp" ne sera jamais mis en cache et n'est pas disponible hors ligne :

NETWORK:
login.asp

Copier après la connexion

Oui Utilisez un astérisque pour indiquer que toutes les autres ressources/fichiers nécessitent une connexion Internet :

NETWORK:
login.asp

Copier après la connexion

FALLBACK

La sous-section FALLBACK ci-dessous indique que si une connexion Internet ne peut pas être établie, " offline.html" est utilisé à la place. Tous les fichiers du répertoire /html5/ :

ALLBACK:
/html5/ /404.html

Copier après la connexion

Remarque : Le premier URI est la ressource, le second est la solution de secours.

Mettre à jour le cache

Une fois qu'une application est mise en cache, elle reste en cache jusqu'à :

L'utilisateur efface le cache du navigateur
Le fichier manifeste est modifié
Le cache de l'application est mis à jour par le programme

Démo

case/
  |-- index.html
  |
  |-- demo.appcache
  |
  |-- 简易IIS服务器.exe
  |
  `-- image
        |-- Principe de stockage hors ligne HTML5 et exemples de code dimplémentation
        `-- Principe de stockage hors ligne HTML5 et exemples de code dimplémentation

Copier après la connexion

index.html

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
    <meta charset="UTF-8">
    <title>HTML5离线存储</title>
</head>
<body>
    <img src="image/Principe de stockage hors ligne HTML5 et exemples de code dimplémentation" alt="">
    <img src="image/Principe de stockage hors ligne HTML5 et exemples de code dimplémentation" alt="">
</body>
</html>

Copier après la connexion

demo.appcache

CACHE MANIFEST
#v01
image/Principe de stockage hors ligne HTML5 et exemples de code dimplémentation

NETWORK:
*

FALLBACK:
/

Copier après la connexion

magasins de dossiers d'images
Principe de stockage hors ligne HTML5 et exemples de code dimplémentation

Principe de stockage hors ligne HTML5 et exemples de code dimplémentation

02. jpg

Principe de stockage hors ligne HTML5 et exemples de code dimplémentation

D'accord, puis exécutez 简易IIS服务器.exe et essayez-le.

Lorsque iis est activé

Alt text

Lorsque iis est éteint (il est éteint, la pause ne verra pas l'effet)

Alt text

Vous pouvez voir que 图片1 a été affiché avec succès hors ligne, mais 图片2 ne peut pas être affiché normalement.

Maintenant, je souhaite changer les positions de 图片2 et 图片1

Remplacer la partie HTML

<body>
    <img src="image/Principe de stockage hors ligne HTML5 et exemples de code dimplémentation" alt="">
    <img src="image/Principe de stockage hors ligne HTML5 et exemples de code dimplémentation" alt="">
</body>

Copier après la connexion

À ce moment-là, j'ai trouvé un problème, html Pourquoi les images ne sont-elles pas remplacées alors qu'elles ont été modifiées ? N'ai-je pas écrit un astérisque dans le demo.appcache du fichier NETWORK A part le fichier CACHE MANIFEST, tout le reste est en mode en ligne. Selon les informations, la page qui introduit le manifeste sera toujours mise en cache par l'agent utilisateur même si elle n'est pas incluse dans la liste de cache.

D'accord, alors je mettrai à jour le fichier .appcache, je vais donc changer le numéro de version dans l'en-tête #v02. J'ai actualisé la page et toujours pas de réponse ! Actualisez à nouveau, le voilà ! Pourquoi?

对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的.发现manifest改变.所有浏览器的实现都是紧随这做静默更新资源.以保证下次pv,应用到更新.

通过控制台我们能够窥探一二：

第一次刷新，应用程序缓存更新准备事件,
第二次刷新才会看到效果。

缓存立即执行

我们的产品已经更新了用户却要第二次进来才能够看到，这样用户体验也太差了吧，有什么方式能够解决呢？好在html5给javascript提供了相关的API。

API篇幅太多自行查看把，这里我晒下我测试成功的code：

 /*code1,简单粗暴的*/
    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
        location.reload();
    };
    /*code2，缓存公用方法*/
    // var EventUtil = {
    //     addHandler: function(element, type, handler) {
    //         if (element.addEventListener) {
    //             element.addEventListener(type, handler, false);
    //         } else if (element.attachEvent) {
    //             element.attachEvent("on" + type, handler);
    //         } else {
    //             element["on" + type] = handler;
    //         }
    //     }
    // };
    // EventUtil.addHandler(applicationCache, "updateready", function() {      //缓存更新并已下载，要在下次进入页面生效
    //     applicationCache.update();  //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。
    //     applicationCache.swapCache();  //交换到新的缓存项中，交换了要下次进入页面才生效
    //     location.reload();              //重新载入页面
    // });

Copier après la connexion

code1一般用在页面加载时直接触发，而code2的方式可后期检查更新。