HTML and CSS Reference
In-Depth Information
And here's what the same page looks
like when offline. Each image from the
headshots folder has been replaced by
the fallback image without having to
explicitly list each image.
It's worth noting that in this particular example, the alt text no longer
corresponds to the images displayed, so it might be a good idea to over-
ride the alt text with JavaScript if you can detect that the page is
offline. As discussed at the beginning of the section, it's possible to do
this now that you know how
FALLBACK
works.
There are several possible approaches to using a fallback to detect the
application's online status, but they all boil down to the same thing:
having a pair of files in the
FALLBACK
section of the manifest that have an
easily detectable difference between the online and fallback versions.
The complete listings for the two files this example uses are shown in
the following table.
ch06/offline-example/online.txt
ch06/offline-example/offline.txt
ONLINE
OFFLINE
It would certainly be possible to add more complexity; but the
online.txt file will be fetched from the server frequently, so the shorter
the better. In real life, it would be best to stop pandering to human
readability and use values of
1
and
0
. Now add these two files in the
FALLBACK
section of the manifest file:
CACHE MANIFEST
#v1
