Offline Web Browsing is part 10 of Beginner’s Guide to HTML5.
In this article we are going to find a way to view a web site without internet. With application cache it is easy to make an offline version of a web application, by creating a cache manifest file. Let’s see what is actually this application cache.
HTML5 introduces application cache with the intention of when a web application is cached, it can accessible without an internet connection.
Application cache gives an application three advantages:
- Offline browsing – users can use the application when they’re offline
- Speed – cached resources load faster
- Reduced server load – the browser will only download updated/changed resources from the server
Let’s see how to create this cache manifest file.[code language=”html”] This is the most important code segment if you want to reserve a manifest file on the user’s web browser to support the offline web browsing. To enable application cache, include the manifest attribute in the document’stag. Just put this code line there and view the website once with the online, and view it repeatedly in offline.
Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached unless the page is specified directly in the manifest file.
The recommended file extension for manifest files is: “.appcache”
Let’s look at what is this manifest file.
The Manifest File
The manifest file is a simple text file, which tells the browser what to cache (and what to never cache).
The manifest file has three sections:
|CACHE MANIFEST – Files listed under this header will be cached after they are downloaded for the first time|
| This is the first line of the file and also it is a required line.CACHE MANIFEST
|NETWORK – Files listed under this header require a connection to the server, and will never be cached|
| This specifies the files that should not cached in the web browser. The NETWORK section below specifies that the file “login.asp” should never be cached, and will not be available offline.NETWORK:
login.aspAn asterisk can be used to indicate that all other resources/files require an internet connection.
|FALLBACK – Files listed under this header specifies fallback pages if a page is inaccessible|
| The FALLBACK section below specifies that “offline.html” will be served in place of all files in the /html/ catalog, in case an internet connection cannot be established. The first URI is the resource, the second is the fallback.FALLBACK:
This is a complete manifest file
| CACHE MANIFEST
# 2012-02-21 v1.0.0
So how long would be this cached information stored in the browser. Once an application is cached, it remains cached until one of the following happens. Also user can define the size limit of the cache information.
- The user clears the browser’s cache
- The manifest file is modified (see tip below)
- The application cache is programmatically updated
But remember to be careful what you are going to allow for caching. Once a file is cached, the browser will continue to show the cached version, even if you change the file on the server. To ensure the browser updates the cache, you need to change the manifest file. So that’s all. In the next section we are looking at web workers behind the scenes.
Learn how to Workers in the Web.