Maison >interface Web >Tutoriel H5 >Exemple de code pour créer des applications Web hors ligne en HTML5

Exemple de code pour créer des applications Web hors ligne en HTML5

黄舟original: 2017-03-15 15:57:241677parcourir

La fonctionnalité

Applications hors ligneCache nous permet de spécifier toutes les ressources requises par l'application Web,

De cette façon, le navigateur peut tous les télécharger lors du chargement du document HTML.

1) Définir le cache du navigateur :

Activer la mise en cache hors ligne - créez un fichier manifeste et référencez-le dans l'attribut manifest de l'élément html It

Spécifiez les ressources à mettre en cache dans les applications hors ligne - répertoriez les ressources en haut du fichier manifeste ou dans la zone CACHE

Spécifiez le contenu de sauvegarde à afficher lorsque la ressource est indisponible - répertoriez le contenu dans la zone F

ALLBACK du fichier manifeste

pointe vers la ressource qui est toujours demandée au serveur - le contenu est répertorié dans la zone BETWORK du fichier manifeste

;

Exemple : Créez d'abord le fichier manifeste de fruit.appcache

    CACHE MANIFEST  
      
    example.html  
    banana100.png  
      
    FALLBACK:  
    * 404.html  
      
    NETWORK:  
    cherries100.png  
      
    CACHE:   
    apple100.png

Créez à nouveau le fichier 404.html Si le fichier html pointé par le lien n'est pas dans le cache hors ligne, vous pouvez l'utiliser à la place. >

Enfin, créez le fichier h

tml qui doit activer la mise en cache hors ligne

<!DOCTYPE HTML>
<html manifest="fruit.appcache">
    <head>
        <title>Offline</title>
    </head>
    <body>
      <h1>您要的页面找不到了！</h1>
      或许您可以帮我们找找孩子！
    </body>
</html>

2) Détecter l'état du navigateur

<!DOCTYPE HTML>
<html manifest="fruit.appcache">
    <head>
        <title>Example</title>
        <style>
            img {border: medium double black; padding: 5px; margin: 5px;}
        </style>
    </head>
    <body>
        <img id="imgtarget" src="banana100.png"/>
        <p>
            <button id="banana">Banana</button>
            <button id="apple">Apple</button>
            <button id="cherries">Cherries</button>
        </p>
        <a href="otherpage.html">Link to another page</a>
        <script>
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }
            
            function handleButtonPress(e) {
                document.getElementById("imgtarget").src = e.target.id + "100.png";
            }
        </script>
    </body>
</html>

window.navigator.online - si le navigateur est déterminé comme étant hors ligne, renvoie false, si le navigateur est en ligne, renvoie true

3) Utiliser le cache hors ligne :

Vous pouvez utiliser le cache hors ligne directement en appelant la propriété window.applicationCache, qui renverra un objet ApplicationCache

; >

Objet ApplicationCache membres :
update() - met à jour le

cache pour s'assurer que tous les éléments de la liste ont téléchargé la dernière version

swapCache() - Échangez le cache actuel ; avec un cache plus récent ;

statut - renvoie le statut du cache

3.1) Objet ApplicationCache

valeur de l'attribut d'état : 0 - NON CACHÉ - Ce document n'est pas mis en cache, ou met en cache les données n'a pas encore été téléchargé

1 - IDLE - le cache n'a effectué aucun téléchargement ; opérations

2——CHECKING——浏览器正在检查清单或清单所指定项目的更新；

3——DOWNLOADING——浏览器正在下载清单或内容的更新；

4——UPDATEREADY——有更新后的缓存数据可用；

5——OBSOLETE——缓存数据已经废弃，不应该再使用了。这是请求清单文件时返回HTTP状态码4xx所造成的

（通常表明清单文件已被移走/删除）；

3.2）ApplicationCache对象定义的事件，在缓存状态改变时触发：

checking——浏览器正在获取初始清单或者检查清单更新；

noupdate——没有更新可用，当前的清单是最新版；

downloading——浏览器正在下载清单里指定的内容；

progress——在下载阶段中触发；

cached——清单里指定的所有内容都已被下载和缓存了；

updateready——新资源已下载并且可以使用了；

obsolete——缓存已废弃；

CACHE MANIFEST

CACHE: 
example.html
banana100.png
cherries100.png
apple100.png

FALLBACK:
* offline2.html

<!DOCTYPE HTML>
<html manifest="fruit.appcache">
    <head>
        <title>Example</title>
        <style>
            img {border: medium double black; padding: 5px; margin: 5px;}
            p {margin-top: 10px; margin-bottom: 10px}
            table {margin: 10px; border-collapse: collapse;}
            th, td {padding: 2px;}
            body > * {float: left;}
        </style>
    </head>
    <body>
        <p>
            <img id="imgtarget" src="banana100.png"/>
            <p>
                <button id="banana">Banana</button>
                <button id="apple">Apple</button>
                <button id="cherries">Cherries</button>
            </p>
            <p>
                <button id="update">Update</button>
                <button id="swap">Swap Cache</button>
            </p>
            The status is: <span id="status"></span>
        </p>
        <table id="eventtable" border="1">
            <tr><th>Event Type</th></tr>
        </table>
        <script>
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }
            
            window.applicationCache.onchecking =  handleEvent;
            window.applicationCache.onnoupdate = handleEvent;
            window.applicationCache.ondownloading = handleEvent;
            window.applicationCache.onupdateready = handleEvent;
            window.applicationCache.oncached = handleEvent;
            window.applicationCache.onobselete = handleEvent;
            
            function handleEvent(e) {
                document.getElementById("eventtable").innerHTML +=
                    "<tr><td>" + e.type + "</td></td>";
                checkStatus();
            }
            
            function handleButtonPress(e) {
                switch (e.target.id) {
                    case &#39;swap&#39;:
                        window.applicationCache.swapCache();
                        break;
                    case &#39;update&#39;:
                        window.applicationCache.update();
                        checkStatus();
                        break;
                    default:
                        document.getElementById("imgtarget").src = e.target.id
                            + "100.png";
                }
            }
            
            function checkStatus() {
                var statusNames = ["UNCACHED", "IDLE", "CHECKING", "DOWNLOADING",
                                   "UPDATEREADY", "OBSOLETE"];
                var status = window.applicationCache.status;
                document.getElementById("status").innerHTML = statusNames[status];
            }
            
        </script>
    </body>
</html>

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!

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：Introduction détaillée à l'exemple de code glisser-déposer en html5Article suivant：Introduction détaillée à l'exemple de code glisser-déposer en html5

Articles Liés

Voir plus