Web App Offline Cache

- to enable offline Cache, prepare manifest file which will be sent to user device with content type "cache-manifest"

- the manifest contains a list of files included in the cache. It may looks like this, say demo.manifest:

  

  CACHE MANIFEST

  index.html

  http://www.google.com/logo.jpg

- then link up this manifest file to the html file: 

 

- configure web server to serve the manifest file with "text/cache-manifest" content type otherwise browser will not recognize it. If you are using Apache web server, may add the following line to .htaccess file:

AddType text/cache-manifest .manifest

So next time a user browses the page, it's resources will load normally over the network and in the background, files listed in the manifest will be downloaded to the users' local disk or iphone's flash memory. once download completes and user refresh the page, they will be accessing the local files only.

The drawback is if you wanna update the page, you need to update the manifest file.
And the download of the new files takes place in the background AFTER the initial launch of the app. This mens that even after the download complete, user will be working with the old files only.
i.e. page won't auto reload
New files will not become visible until app is relaunched.