Information Technology Reference
In-Depth Information
Das Listing beginnt mit der bekannten
DOCTYPE
-Definition und dem anschlie-
ßenden Verweis auf die
manifest
-Datei, in der die zu speichernden Inhalte re-
ferenziert sind. Für jedes Spiel wird eine eigene JavaScript-Datei geladen, hier
zum Beispiel mit dem Namen
knappDran_spiel0001.js
.
Im zweiten Teil des Listings findet sich ein
canvas
-Element, ein starker Hin-
weis darauf, dass sich hier die interaktive Spielfläche befindet. Das
select
-
Element mit der
ID
selGame
ist zwar noch leer, es wird aber bei Spielbeginn die
Liste aller aktiven Spiele enthalten. Die weiteren HTML-Elemente mit den
ID
s
gameResults
,
curQuestion
,
onlineStatus
und
localStorage
sind Platzhalter, die
ebenfalls später von JavaScript-Funktionen befüllt werden. Die abschließende
Schaltfläche mit dem Text
lädt die Webseite über
location.reload
neu und überprüft dabei automatisch, ob sich die Manifest-Datei geändert hat.
J
ETZT
PRÜFEN
!
Die Manifest-Datei
Das Cache-Manifest enthält nach der obligatorischen ersten Zeile Verweise auf
den HTML-Code, die JavaScript-Datei und das Stylesheet. Im Anschluss wer-
den für jedes Spiel die entsprechende JavaScript-Datei und die statische Karte
von Google Maps referenziert.
CACHE MANIFEST
# application files
knappDran.html
knappDran.js
knappDran.css
# gamedata
# Die Innenstadt von Paris
knappDran_spiel0001.js
http://maps.google.com/maps/api/staticmap?sensor=false&maptype=satellit
e&size=640x480¢er=48.864721,2.3105226&zoom=14
Obwohl der Kartenaufruf der Google-Maps-Karte aus einer dynamischen URL
zusammengesetzt ist, wird das resultierende Bild im Offline-Speicher abgelegt
und bei einem entsprechenden Aufruf ohne Netzwerk-Zugriff korrekt geladen.
Abbildung 8.8 zeigt das erfolgreiche Laden von drei Spielen in den Offline-Spei-
cher.