With offline cache, users of your web site don’t need always to be online. If your web site don’t update frequently, the users may access your web site once and then browse those pages again and again even without internet connection. The advantages are obvious:
1 For web site owners, the web server load is reduced.
2 For web site users, offline cache saves downloading time and bandwidth. In particular, those smartphone users with limited internet bandwidth will enjoy the new feature much more.
There are three steps to set up offline cache.
1 <html manifest=”myCache.manifest”>
Add the manifest attribute into a html tag to specify that the very page should be cached and point to a manifest file ”myCache.manifest” for listing other assets(such as images, videos, css, and other html pages) to be cached too. You can put the manifest file anywhere on you web server; but you have to specify the corresponding path in the manifest attribute. Note: mobile safari has 5Mb limit for the offline cache.
2 The manifest file should be with an extension of .manifest. To let apache server recognize the extension, you need to add one line statement like below to your .htaccess file.
AddType text/cache-manifest
3 Now let’s take a look at the format inside the manifest file.
Source Code Box: Manifest file (Browsers:IE10+, Firefox24+, Chrome29+, Safari5.1+, Opera17+, iOS3.2+, Android2.1+)
The first line of manifest file has to be:
CACHE MANIFEST
There are three sections in a manifest file,
1 Cache
List the to-be-cached file names; in the example above, like style.css, home.html
2 Network
List the files accessed through normal internet connection(not cached). * in here means any file that is not cached can be accessed at web server through internet connection. Of course, you can replace the * with some specific file names. That means only these listed files can be accessed through internet connection.
3 Fallback
In case the requested file is not in the cache, internet is not connected either, all the requests to left side uri will be forwarded to the right side fallback file, in the example is cacheError.html
Updating cache
Considering once some pages are cached, user cannot access the server-side updates for these pages, you’d better not use cache function during development. If you want to update cached pages, you have to change manifest file. Once a browser detects the changes of your manifest file, it will re-download cached pages from your web server.