Last active
March 20, 2018 07:54
-
-
Save jamct/5060aa9b1b53da17d299c348e3cc5281 to your computer and use it in GitHub Desktop.
Demo für Offline-Webanwendung
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html manifest="beispiel.appcache"> | |
<body> | |
<div id="ajax_container"> | |
</div> | |
<button type="button" onclick="loadContent()">Inhalte nachladen</button> | |
<script> | |
function loadContent() { | |
var xhttp = new XMLHttpRequest(); | |
xhttp.onreadystatechange = function() { | |
if (this.readyState == 4 && this.status == 200) { | |
document.getElementById("ajax_container").innerHTML = this.responseText; | |
} | |
}; | |
xhttp.open("GET", "zeit.php", true); | |
xhttp.send(); | |
} | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
CACHE MANIFEST | |
#1.1.2018 12:00:00 | |
CACHE: | |
index.htm | |
style.css | |
script.js | |
NETWORK: | |
uhrzeit.php | |
FALLBACK: | |
/ nicht_erreichbar.htm |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html manifest="beispiel.appcache"> | |
<body> | |
<button type="button" onclick="updateCache()">Update auslösen</button> | |
<script> | |
function updateCache() { | |
window.applicationCache.update(); | |
} | |
window.applicationCache.addEventListener("updateready", function(e) { | |
if (window.applicationCache.UPDATEREADY) { | |
window.applicationCache.swapCache(); | |
window.location.reload(); | |
} | |
}, false); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if (!("indexedDB" in window)) { | |
alert("Wird nicht unterstützt."); | |
return; | |
} | |
var idb = indexedDB.open("demo",1); | |
idb.onupgradeneeded = function() { | |
var db = this.result; | |
store = db.createObjectStore | |
("beispiel", { | |
keyPath: "id", | |
autoIncrement: true | |
}); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
request.onsuccess = function(){ | |
var inhalt = { vorname: 'Hans', | |
nachname: 'Muster' }; | |
var statement = this.result.transaction(['beispiel'], 'readwrite'); | |
var ergebnis =statement.objectStore('beispiel').put(inhalt); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//Diese Datei simuliert eine instabile Verbindung. Das Ergebnis ist entweder die aktuelle Uhrzeit oder ein Fehler 404 | |
$zufall = rand(0,10); | |
if($zufall >7){ | |
header("HTTP/1.0 404 Not Found"); | |
exit; | |
} | |
echo date("d.m.Y - H:i:s"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Beispiel-Code zum Einsatz von Application Cache und IndexedDB.
Bitte beachten: Damit der Cache genutzt werden kann, müssen alle im Manifest geforderten Dateien existieren. Legen Sie ggf. leere Dateien für stlye.css und script.js an.