HTML and CSS Reference
In-Depth Information
We briefly touched upon this in Chapter 4. Caching can be useful, but can also
be a pain when you need to clear it. Fortunately, application caching has a
JavaScript API that allows you to dynamically clear it.
Not only can you cache files from your web application, but you can also cache
files that you pull in from external web sites, such as the user's favorite movie
images. Be warned, however, as your application's cache may be limited to a
certain size on some devices.
Open the
momemo.cache
file that you created in Chapter 4. We know that the
application files (such as the images, JavaScript files, and CSS) will need to be
cached, so update the
momemo.cache
so that the following files are cached.
index.html
css/mobile.min.css
js/app.min.css
img/
Your manifest file should now look like the following code.
CACHE MANIFEST
# We'll make these files cachable
CACHE:
index.html
css/mobile.min.css
js/app.min.js
img/highres/momemo.png
img/lowres/momemo.png
img/back.png
img/clear.png
img/loading.gif
img/search.png
You can see that every file that needs to be cached has been explicitly
specified. Unfortunately, you can't use wildcards, as the browser cache will
cache all of the files in the manifest file before the page is loaded. It doesn't
know which files exist on your server, so using a wildcard (*) won't have any
effect.
We're caching the minified CSS and JS files, instead of the JavaScript and CSS
files that haven't been minified. This will prevent frustration when you need to
change files for development, so that you don't have to manually change the
manifest file to bring in the changed files.
With the cache manifest, you can also specify which files require a network
connection. We definitely want the Rotten Tomatoes API to have the latest data.
