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
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>
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>
Sie können den Offline-Cache direkt verwenden, indem Sie die Eigenschaft window.applicationCache aufrufen, die ein ApplicationCache-
-Objektzurückgibt ApplicationCache-Objekt Mitglieder:
aktuellDatum()——
Aktualisierungen der -Cache, um sicherzustellen, dass alle Elemente in der Liste die neueste Version heruntergeladen haben;
apCache() – Swap der aktuelle Cache mit einem neueren Cache Status – gibt Cache-Status zurück
3.1) ApplicationCache-ObjektStatusattributwert:
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
<!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 'swap': window.applicationCache.swapCache(); break; case 'update': 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>
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!