Heim > Web-Frontend > H5-Tutorial > Beispielcode zum Erstellen von Offline-Webanwendungen in HTML5

Beispielcode zum Erstellen von Offline-Webanwendungen in HTML5

黄舟
Freigeben: 2017-03-15 15:57:24
Original
1680 Leute haben es durchsucht

Mit der Funktion

Offline-AnwendungenCache können wir alle von der Webanwendung benötigten Ressourcen angeben,

Auf diese Weise kann der Browser sie alle herunterladen, wenn er das HTML-Dokument lädt.

1) Browser-Cache definieren:

Offline-Caching aktivieren – eine Manifestdatei erstellen und im manest-Attribut des html-Elements darauf verweisen

Geben Sie Ressourcen an, die in Offline-Anwendungen zwischengespeichert werden sollen – listen Sie Ressourcen oben in der Manifestdatei oder im CACHE-Bereich auf; 🎜>

Geben Sie den Sicherungsinhalt an, der angezeigt werden soll, wenn die Ressource nicht verfügbar ist – listen Sie den Inhalt im Bereich FALLBACK der Manifestdatei auf; 🎜> zeigt auf die Ressource, die immer vom Server angefordert wird – der Inhalt wird im BETWORK-Bereich der Manifestdatei aufgeführt

Beispiel: Erstellen Sie zunächst die Manifestdatei von Fruit.appcache

Erstellen Sie die 404.html-Datei erneut, wenn sich die HTML-Datei, auf die der Link verweist, nicht im Offline-Cache befindet.

    CACHE MANIFEST  
      
    example.html  
    banana100.png  
      
    FALLBACK:  
    * 404.html  
      
    NETWORK:  
    cherries100.png  
      
    CACHE:   
    apple100.png
Nach dem Login kopieren


Erstellen Sie abschließend die html-Datei, die für das Offline-Caching aktiviert werden muss

2) Browser-

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

window.navigator.online - wenn Es wird festgestellt, dass der Browser offline ist. Geben Sie „false“ zurück. Wenn der Browser möglicherweise online ist, wird „true“ zurückgegeben.

<!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>
Nach dem Login kopieren

3) Offline-Cache verwenden:

Sie können den Offline-Cache direkt verwenden, indem Sie die Eigenschaft window.applicationCache aufrufen, die ein ApplicationCache-

-Objekt

zurückgibt ApplicationCache-Objekt Mitglieder:

aktuellDatum()——
Aktualisierungen der -Cache, um sicherzustellen, dass alle Elemente in der Liste die neueste Version heruntergeladen haben;

sw

apCache() – Swap der aktuelle Cache mit einem neueren Cache Status – gibt Cache-Status zurück

3.1) ApplicationCache-Objekt

Statusattributwert:

0 – UNCACHED – Dieses Dokument ist nicht zwischengespeichert oder speichert Daten wurde noch nicht heruntergeladen 1 – IDLE – der Cache wurde heruntergeladen keine Operationen durchführen

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
Nach dem Login kopieren

<!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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispielcode zum Erstellen von Offline-Webanwendungen in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage