Skip to content

Instantly share code, notes, and snippets.

@jamct
Last active March 20, 2018 07:54
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamct/5060aa9b1b53da17d299c348e3cc5281 to your computer and use it in GitHub Desktop.
Save jamct/5060aa9b1b53da17d299c348e3cc5281 to your computer and use it in GitHub Desktop.
Demo für Offline-Webanwendung
<!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>
CACHE MANIFEST
#1.1.2018 12:00:00
CACHE:
index.htm
style.css
script.js
NETWORK:
uhrzeit.php
FALLBACK:
/ nicht_erreichbar.htm
<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);
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
});
}
};
request.onsuccess = function(){
var inhalt = { vorname: 'Hans',
nachname: 'Muster' };
var statement = this.result.transaction(['beispiel'], 'readwrite');
var ergebnis =statement.objectStore('beispiel').put(inhalt);
}
<?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");
@jamct
Copy link
Author

jamct commented Jan 19, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment