Forty eight hours, twenty seven minutes, thirty seven seconds later and jackpot! My custom WordPress theme and Typekit account remained accessible even when offline. A truly awesome feature from the hyped up HTML5 spec. Lets get this party started with a direct quote pulled from Mozilla’s developer documentation so we can understand exactly what a cache manifest can do for our web apps and websites.
How the cache manifest works: explanation courtesy of MDN
The application cache modifies the normal process of loading a document; if an application cache already exists, resources are then loaded directly from that cache, without accessing the network, ultimately speeding up the page load. The web application then checks if the manifest has been updated on the server and if it has, a new version of the cache is downloaded. This is done in the background and doesn’t affect performance in a significant manner.
Application caches can also become obsolete. If the manifest is removed from the server, the browser removes all application caches that use that manifest, then sends an “obsoleted” event to the application cache object. Then the application cache’s status is set to OBSOLETE.
The cache manifest file shown in example 1a allows our users to cache important and necessary files in order for a WordPress theme to function(.php files need a server to interpret) plus access to Typekit fonts online and off –pretty cool. There are a few caveats we must point out before achieving this offline functionality. Note: Although this case is specific to our context using Typekit with WordPress, the manifest code can still be applied to your WordPress theme even without the Typekit inclusion.
The caveats of offline caching
- Set expires headers on your web server for your
cache.manifestfile to expire immediately. This avoids the risk of caching the manifest files. In Apache (i.e. the
.htaccessfile) you can configure this like so:
ExpiresByType text/cache-manifest "access plus 0 seconds"
Entries must have the same scheme, host, and port as the manifest
- Any page that contains the manifest attribute within the
<HMTL>tag is cached by default. Authors are encouraged to include the direct page resource desired, but once again not required
- The first line of the cache manifest must consist of the string
CACHE MANIFESTdirectly at the top
- Comments may only be used on their own lines, and cannot be appended to other lines. Comments are represented by the # character
- The section header line (i.e. CACHE, NETWORK, FALLBACK ) may include whitespaces, but must include the colon (:) in the section name.
- NO wildcard character(*) is allowed in the CACHE section of the manifest
- In the network section, each line is a a valid URL or URI reference to a resource to fetch from the network (the wildcard * is also allowed in this section).
- Note: Relative URI’s are relative to the cache manifest’s URI, NOT to the URI of the document referencing the manifest.
Now that we have those nasty scary monsters out of the way we can breathe a sigh of relief and get down to business.
- Start by opening up your favorite text editor
- Add the
manifestattribute to you HTML tag
- Copy and paste example 1a into your black cache manifest document
- Save your file as cache.manifest and place the manifest into your site’s root directory
That’s it! Feel free to customize the manifest I have provided further as it is strongly encouraged. If you need help along the way you can always check out this great tutorial by HTML5 Rocks or read the direct documentation and external links given below.
The Web Ahead by Jen Simmons
HTML5 expert Peter Lubbers joins Jen Simmons on the inaugural episode of The Web Ahead to talk about what the heck HTML5, web apps, local storage, offline caching, and web databases are.
using html5 application cache to create offline web applications
Gist Example 1a.