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.
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
<!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.
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.
Like a lot of other HTML5 features, the Application Cache is supported by all the modern browsers.
Chart from www.findmebyip.com
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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post