HTML and CSS Reference
In-Depth Information
•
FALLBACK
:
For resources that should have a fallback version used when the device is offline.
FALLBACK
resources are specified by an online version followed by an offline version.
•
CACHE
and
NETWORK
each consist of a list of files or paths. (Wildcards are also permitted.)
If you load a page that has been cached while the device is online, the browser makes a request for the mani-
fest file. If the file has changed, all the files download again. If the file hasn't changed (or has been cached
normally in the browser), then none of the cached files reload. Because you may often update assets without
changing which assets are in your manifest, the most common way to change the manifest file is with a version
number in a comment.
Say you have a game that loads from an
index.html
inside the
/myGame
directory and that has
static assets in
/myGame/images
and
/myGame/js
. Then say it has a high-score list that loads from
/myGame/high-scores.php
and an advertisement that loads from
/myGame/ads.php
. You might set
up a cache manifest file like the following:
CACHE MANIFEST
# Version: 1
# Remember to update the version whenever you change a file
CACHE
# Cache the game index.html file and all assets
/myGame/index.html
/myGame/js/*
/myGame/images/*
NETWORK
# Always try to pull the high scores from the network
/myGame/high-scores.php
FALLBACK
# Fallback to a static ad if user is not connected
/myGame/ads.php /myGame/static-ad.html
NOTE
The HTML file with the manifest declaration is automatically cached by default and doesn't need to
be in the manifest file, but there's no harm in being explicit that it is going to be cached.
After your players have played your game, the next time they bring up the game, it pulls all the assets from
the Application Cache. If the players are online, pressing
/myGame/ads.php
downloads your real ads (or
whatever is in that file,) while pressing the file while offline loads a
/myGame/static-ad.html
from the
Application Cache. If you try to press the high score list at
/myGame/high-scores.php
, the browser at-
tempts to make the request regardless of whether the device is online.
Checking If the Browser Is Online
You may want your game to behave differently depending on whether you are online. Mobile Safari and the
Android browser can use the
navigator.onLine
flag to check whether the browser thinks it's online, as
follows:
