Just when you thought you’d seen all the cool features of HTML5, I’m here to bring you yet another one. The internet is no longer about just websites; it’s about web applications. Often, our users are on portable or mobile devices, and they won’t always have access to a network. With HTML5’s Application Cache, you can provide them with all or some of the functionality they would have online, no matter where they go.
Subscribe to our YouTube page to watch all of the video tutorials!
Step 1: Make the Cache Manifest
The trick here is using a cache manifest file. In its most basic form, it’s incredibly simple:
CACHE MANIFEST # version 0.1 index.html style.css script.js preview.jpg
Step 2: Serve the Manifest Correctly
This file needs to be served with a content-type header of text/cache-manifest; it’s really simple to do this with a .htaccess file:
AddType text/cache-manifest manifest
This will serve all files with an extention of “manifest” with the appropriate content-type header.
Step 3: Hook the Manifest In
To use the cache manifest file, you simply add a property to the html element:
<!DOCTYPE html> <html lang="en" manifest="site.manifest"> <meta charset='utf-8'>
Now, the next time a user visits your site / app, their browser will cache the required files. It’s that easy. If they browse to your URL when they’re offline, they’ll get the cached content.
Caveat: Refreshing the Cache
It’s important to note that even when the user is online, the browser will only go to the server to get new content in three cases:
- The user clears their cache (obviously removing your content).
- The manifest file changes.
- The cache is updated via JavaScript
So, to force all your users to reload their cache, you can change something in the manifest file (not the files linked to, the actual content of the manifest file). Most of the time, you’ll probably just want to change a comment, and that will be enough.
If you want, build cache updating into your app via the JavaScript API; that’s beyond the scope of this quick tip, but if you want to learn more, check out this article at html5rocks.com.
Browser Support
Like a lot of other HTML5 features, the Application Cache is supported by all the modern browsers.
And that’s HTML5′s Application Cache; it’s pretty cool, and I’m sure it will be used by developers, of almost any site, to provide a gracefully degrading experience that keeps their users happy wherever they are. Thanks for reading!