Maison >interface Web >Tutoriel H5 >Comment implémenter le cache d'application en HTML5 ? Une brève description de la technologie de stockage hors ligne

Comment implémenter le cache d'application en HTML5 ? Une brève description de la technologie de stockage hors ligne

青灯夜游original: 2018-09-08 17:07:421626parcourir

Dans ce chapitre, nous allons vous présenter comment implémenter le cache d'application en utilisant html5 ? Décrivez brièvement la technologie de stockage hors ligne. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Avant HTML5, il fallait se connecter à Internet pour accéder à la page. Cependant, avec l’essor de l’Internet mobile, la localisation des terminaux n’est plus fixe. Les appareils mobiles dépendent fortement des signaux sans fil, mais la fiabilité des réseaux sans fil n'est pas stable. Par exemple, les sites Web ne sont pas accessibles lors du passage dans des tunnels ou dans des endroits où la puissance du signal est faible. Il s'agit sans aucun doute d'une mauvaise expérience utilisateur, donc la mise en cache hors ligne en HTML5. (applicationCache) résout ce problème.

1 : Qu'est-ce que la mise en cache hors ligne
Le cache hors ligne HTML5, également connu sous le nom d'applicationCache, est l'une des nouvelles fonctionnalités de HTML5. Une compréhension simple est que les données sont mises en cache après le premier chargement, elles peuvent être chargées la prochaine fois sans réseau. pour comparer des pages Web ou des jeux avec des données statiques. Facile à utiliser. Bien sûr, tous les nouveaux navigateurs HTML5 ne peuvent pas le prendre en charge, et il en va de même pour la mise en cache hors ligne. Quoi qu'il en soit, IE9 (y compris) et les navigateurs inférieurs à IE9 ne sont actuellement pas pris en charge. S’il est utilisé sur mobile, il doit être pris en charge. Il est également relativement simple de détecter si la mise en cache hors ligne est prise en charge.

<script>
    if(window.applicationCache){
        alert("支持离线缓存");
    }
    else{
        alert("不支持离线缓存");
    }
</script>

Deux : Comment utiliser

Le cache hors ligne HTML5 est une zone de cache séparée du cache du navigateur. Pour enregistrer les données dans ce cache, vous devez utiliser un fichier de description (.manifest. ), répertorie les ressources qui doivent être téléchargées et mises en cache.

1. Importez le fichier manifeste

<!DOCTYPE html>
<html>
<head>
<!--就是在这里引入，注意引入也是讲究路劲跟文件名的，
      这里文件名是test，后缀是mainfest，路劲在当前的html下面
     （一般放在html当前文件夹下面也没什么问题，我是这么放的）-->
<html manifest="test.manifest">
<meta charset="UTF-8">
<title>html5 离线缓存</title>
</head>
<body>
</body>
</html>

2. Une fois l'introduction terminée, l'étape suivante consiste à écrire le code du fichier test.mainfest.

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).

Le fichier manifeste peut être divisé en trois parties :
①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 spécifient la page de secours lorsque la page est inaccessible (comme une page 404)

Code complet

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

Le fichier manifeste doit être configuré avec le Type MIME correct, à savoir "text/cache-manifest", celui-ci est configuré sur le serveur Web.

Analyse :
Les lignes commençant par # représentent des commentaires. Les fichiers sous CACHE sont tous des fichiers mis en cache. Cela signifie qu'à chaque fois qu'ils sont demandés au réseau, ils sont ensuite mis en cache. Les fichiers spécifiés sont toujours demandés au réseau pour les plus récents. RETOUR : Si le fichier spécifié est introuvable, il sera redirigé vers une nouvelle adresse. Les normes sont toutes en majuscules.

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

L'application restera en cache après sa mise hors ligne, sauf si l'une des situations suivantes se produit :
L'utilisateur efface l'accès du navigateur à votre site Web Stockage des données.
Le fichier manifeste a été modifié.

Veuillez noter : la mise à jour d'un fichier répertorié dans le manifeste ne signifie pas que le navigateur remettra la ressource en cache. Le fichier manifeste lui-même doit être modifié.

1) Statut du cache : L'objet window.applicationCache est une méthode d'accès par programmation au cache d'application du navigateur. Sa propriété status peut être utilisée pour afficher l'état actuel du cache.

La valeur de applicationCache.status est la suivante :
0 === Non mis en cache
1 === Idle (le cache est le dernier état)
2 === En cours d'inspection
3 === Téléchargement
4 === Mise à jour prête
5 === Expiration du cache

var appCache = window.applicationCache; 
switch (appCache.status) { 
　　case appCache.UNCACHED: // UNCACHED == 0 
　　　　return &#39;UNCACHED&#39;; 
　　　　break; 
　　case appCache.IDLE: // IDLE == 1 
　　　　return &#39;IDLE&#39;; 
　　　　break; 
　　case appCache.CHECKING: // CHECKING == 2 
　　　　return &#39;CHECKING&#39;; 
　　　　break; 
　　case appCache.DOWNLOADING: // DOWNLOADING == 3 
　　　　return &#39;DOWNLOADING&#39;; 
　　　　break; 
　　case appCache.UPDATEREADY: // UPDATEREADY == 4 
　　　　return &#39;UPDATEREADY&#39;; 
　　　　break; 
　　case appCache.OBSOLETE: // OBSOLETE == 5 
　　　　return &#39;OBSOLETE&#39;; 
　　　　break; 
　　default: 
　　　　return &#39;UKNOWN CACHE STATUS&#39;; 
　　　　break; 
　　};

2) Mettre à jour activement le cache : applicationCache.update()

<script>    //利用定时器隔一定时间自动更新一下缓存
    setInterval(function(){
            applicationCache.update();
    },50000);</script>

Pour mettre à jour le cache par programme, appelez d'abord applicationCache.update() . Cette opération tentera de mettre à jour le cache de l'utilisateur (à condition que le fichier manifeste ait été modifié). Enfin, lorsque applicationCache.status est dans l'état UPDATEREADY, appelez applicationCache.swapCache() pour remplacer le cache d'origine par le nouveau cache.

var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user&#39;s cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();  // The fetch was successful, swap in the new cache.

4. Une simple application de cache hors ligne

Construisez un projet Web AppCache, comprenant quatre fichiers :
appcache_offline.html

<html manifest="test.manifest">
<head>
<title>AppCache Test</title>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
</head>
<body>
<p><output id="test"></output></p>
<div id="log"></div>
</body>
</html>

Fichier manifeste : test.manifest

CACHE MANIFEST
#VERSION 1.0
CACHE:
test.css

test.css

output { font: 2em sans-serif; }

test.js

setTimeout(function () {
document.getElementById(&#39;test&#39;).value = new Date();
}, 1000);

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!

html5 JS 对象

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le plugin number scroll plugin numberAnimate.js ?Article suivant：Comment utiliser le plugin number scroll plugin numberAnimate.js ?

Articles Liés

Voir plus