The main component of the offline application
cache is a cache manifest file that you host on
your web server. I’m going to use a simple example to explain the concepts
involved, then I’ll show you how to apply what you’ve learned to the Kilo
example we’ve been working on.A manifest file is just a simple text document
that lives on your web server and is sent to the user’s device with a
content type of cache-manifest. The manifest contains a list
of files a user’s device must download and save in order to function.
Consider a web directory containing the following files:
index.html
logo.jpg
scripts/demo.js
styles/screen.css
In this case, index.html is the page users will
load in their browsers when they visit your application. The other files
are referenced from within index.html. To make
everything available offline, create a file named
demo.manifest in the directory with
index.html. Here’s a directory listing showing the
added file:
demo.manifest
index.html
logo.jpg
scripts/demo.js
styles/screen.css
Next, add the following lines to
demo.manifest:
CACHE MANIFEST
index.html
logo.jpg
scripts/demo.js
styles/screen.css
The paths in the manifest are relative to the
location of the manifest file. You can also use absolute URLs like so (don’t bother creating this just yet; you’ll see
how to apply this to your app shortly):
CACHE MANIFEST
http://www.example.com/index.html
http://www.example.com/logo.jpg
http://www.example.com/scripts/demo.js
http://www.example.com/styles/screen.css
Now that the manifest file is created, you need
to link to it by adding a manifest attribute to the HTML tag inside index.html:
<html manifest="demo.manifest">
You must serve the manifest file with the
text/cache-manifest content type or the browser will not
recognize it. If you are using the Apache web server or a compatible web
server, you can accomplish this by adding an .htaccess file to your web directory
with the following line:
AddType text/cache-manifest .manifest
Note:
If the .htaccess file
doesn’t work for you, please refer to the portion of your web server
documentation that pertains to MIME types. You
must associate the file extension .manifest with
the MIME type of text/cache-manifest. If your website is
hosted by a web hosting provider, your provider may have a control panel
for your website where you can add the appropriate MIME type.
Our offline application cache is now in working
order. The next time a user browses to
http://example.com/index.html,
the page and its resources will load normally over the network (replace
example.com/index.html with the URL of your web app).
In the background, all the files listed in the manifest will be downloaded
locally. Once the download completes and the user refreshes the page,
he’ll be accessing the local files only. He can now disconnect from the
Internet and continue to access the web app.
If you are serving up web pages on your local network using the
Apache web server that’s included with Mac OS X, it will ignore any
.htaccess file in your personal web folder (the
Sites folder that’s in your home directory).
However, you can enable support for .htaccess by
following these steps: Open Applications→Utilities→Terminal and typing these commands (you’ll
need to type your password when prompted): cd /etc/apache2/users
sudo pico $USER.conf
This loads your personal Apache configuration file into the
pico editor (you can see a list of editor commands at
the bottom of the screen—the ^ symbol indicates the
Control key). Use the arrow keys to move down to the line
AllowOverride None, delete the word None,
and replace it with All. Press Control-X to exit, answer Y to save changes, and press
Return to save the file. Start System Preferences, go to Sharing, and, if needed, click
the lock icon labeled “Click the lock to make changes.” Type your
password when prompted. Clear the checkbox next to Web Sharing and then check it again
(this restarts Web Sharing). The web server on your Mac should now
respect the settings in .htaccess files you put
in your Sites directory or its
subdirectories.
|
Now that the user is accessing our files
locally on his device, we have a new problem: how does he get updates when
we make changes to the website?
When the user does have access to the Internet
and navigates to the URL of your web app, his browser checks the manifest
file on the site to see if it still matches the local copy. If the remote
manifest has changed, the browser downloads all the files listed in it. It
downloads these in the background to a temporary cache.
Note:
The comparison between the local manifest and
the remote manifest is a byte-by-byte comparison of the file contents
(including comments and blank lines). The file modification timestamp or
changes to any of the resources themselves are irrelevant when
determining whether or not changes have been made.
If something goes wrong during the download
(e.g., the user loses Internet connection), the partially downloaded
temporary cache is automatically discarded and the previous one remains in
effect. If the download is successful, the new local files will be used
the next time the user launches the app.
Note:
Remember that when a manifest is updated, the
download of the new files takes place in the background
after the initial launch of the app. This means
that even after the download completes, the user will still be working
with the old files. In other words, the currently loaded page and all of
its related files don’t automatically reload when the download
completes. The new files that were downloaded in the background will not
become visible until the user relaunches the app.
This is very similar to standard desktop app
update behavior. You launch an app, it tells you that updates are
available, you click Download Updates, the download completes, and you
are prompted to relaunch the app for the updates to take effect.
If you want to implement this sort of
behavior in your app, you can listen for the updateready
event of the window.applicationCache object.
