One of the most amazing features of HTML5 is the support for offline applications using the cache manifest. Well browser caching is not a new technique; it’s supported by majority of the browsers. The browser caching technique is unreliable and doesn’t work every time. Creating offline web applications is pretty easy and reliable with cache manifest.
With cache manifest there are three advantages-
- Offline Browsing- users can browse your website even when they are not connected to the Internet.
- Less Server Load- server load is reduced as only modified or new resources will be fetched.
- Speed- the Application will be fast as the files will be cached in the local memory.
What’s the Cache Manifest File?
Cache Manifest file is a simple text file encoded using UTF-8. This file contains the list of the files that are needed to be cached in the local memory for offline usage by the Application. The files listed in cache manifest are downloaded and gets stored in the “Application Cache”.
The “Application Cache” (or AppCache) is like the browser cache but more robust and reliable. Your application will run smoothly even when the user is offline.
Make sure your Doctype is a valid Html5 Doctype. i.e. <!DOCTYPE html>
Before creating cache manifest file we need to add support for it in .htaccess file i.e. you may need to add the custom mime- type to your web server. Assuming that you have Apache server, you need to add the following code to your .htaccess file-
AddType text/cache-manifest .manifest
Defining the mime-type makes the server understand the .manifest file and serve them for caching applications.
Creating the Cache Manifest File-
As we have already have a valid html5 Doctype, we need to create a text file and save it as offline.manifest. The content of the text file is-
CACHE MANIFEST #Here goes the comment index.html stylesheet.css images/logo.png scripts/main.js
This is an example of a working cache manifest file. This file will cache the four files on the page and make them available for offline usage. This is just a general example of the cache manifest file; you can change these files with the names of your files you want to cache. That’s a basic example of cache manifest file simple enough for basic web applications.
Let’s take a look at complex cache manifest file-
CACHE MANIFEST #Here goes the Master Comment # Cache Files CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Resources that require the user to be online. NETWORK: login.php /myapi http://api.twitter.com # static.html will be served if main.py is inaccessible # offline.jpg will be served in place of all images in images/large/ # offline.html will be served in place of all other .html files FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html
Let’s understand the above cache manifest code.
CACHE: It defines the list of files that will be cached in the local storage as soon as they are downloaded first time.
NETWORK: It defines the files that require server connection. These files are not cached in the local storage and will require internet connectivity.
FALLBACK: It is an optional decleration specifying fallback page whenever the resource is unavailable. It redirects a user to a specific page whenever there are no resources (example fallback offline.html).
Linking the Cache Manifest File-
Now that we have successfully made a cache file the next important part is to link the file to the HTML5 document. Linking the cache manifest file to html5 is pretty simple just add the single line code to your html5 document and you are ready to go.
Notes to Remember-
- The first string of the cache manifest file should be CACHE MANIFEST and it’s mandatory to use it.
- The second thing is that the cache manifest file has limited storage i.e. maximum 5MB. If you’re developing for chrome web store you can use unlimitedstorage directive to remove any storage restrictions.