Application Cache

HTML5 provides an application caching mechanism that lets web-based applications run offline. Browser (specially mobile) typically has small cache, so this provides additional control over the resource. This results in faster web pages, lower network bandwidth and lower web server load

Things to be aware when using Application Cache

Double Refresh Issue
1.Client Load the Page
2.Load Manifest File
3.Load Application Cache
4.Server update the page and Manifest file
5.Client reload the page which will come form clients Application cache
6.Client will fetch Manifest file
7.Since manifest file has been updated, page will be downloaded and application cache will be updated
8.Still user see page from old version of the cache, so client now has to reload the page.

The above situation may become little more confusing when there are few resources coming from Network (marked in NETWORK section), in which case some of the resources are fresh every time the page is viewed, where as others marked in Cache coming from application cache which was loaded last time the Page was viewed.

To get away with this situation you can write javascript code to reload page once application is cached (window.applicationCache.onupdateready event).

Asynchronous
If a manifest file is added to a HTML file, it forces all resources to be downloaded synchronously as soon as the manifest file is downloaded, which will mean resources that may not yet be required, such as JavaScript or an image below the fold, will be downloaded at the start of the page.The best way to reduce this problem is to be careful about the order of files listed in the manifest file. As a general rule the files should be in the following order CSS -> IMG -> JS.

Atomic
The only way to update application file is to modify manifest, even though resources are changed on the server, client will continue to see older cached version until manifest file is modified. Modifying manifest file will result in download of entire cache file even though only one changed.

Prevent Manifest File Caching
It is important to avoid caching the manifest file by ensuring the web server serves the manifest file with Cache-Control: no-store, no-cache and Expires: 0.

Browser Cach

Cache-Control
public-Means cached version can be saved by proxy and intermediate servers where evryone can see
private-Only user's private browser can cache it
no-cache-this is useful for cases where url is same but content may change

Max-Age
In specifies the max age (in seconds), until then resource is not considered stale. Until then no need to send request to server. Fiddler should not show any traffic and browser load page from the cache.

Expires
Absolute time until resource is not considered stale. The inclusion of just an Expires header with no Cache-Control header indicates that the content can be cached by both browsers and public/shared caches

Last-Modified
If response contains "Last-Modified" then browser sends following cache header in subsequent request to the same resource. Server can implement logic to verify if the resource has been modified since last modified sent by the browser and if it is not then it can send "304 Not Modified" status with no content.
If-Modified-Since: Mon, 19 May 2014 15:40:42 GMT

ETag
Its like a hash or fingerprint to a resource which server can send and in any subsequent request to the same resource browser can send this value as "If-None-Match". Based on this value server can decide if resource has been modified or not. Typically server will have this ETag and it will verify it with the If-None-Match value and if it is same then "304 Not Modified" can be responded.
If-None-Match: -1265215684

Cache With Refresh
Hitting refresh results in an “If-None-Match” header being sent to the origin web server for all content that is currently on the disk cache, independent of the expiration date of the cached content.

CTRL + Refresh or CTRL +F5 
Hitting CTRL and refresh (in Internet Explorer only) or CTRL and F5 (Internet Explorer and Firefox) will insert a “Cache-Control=no-cache” header in the request, resulting in all of the content being served directly from the origin servers with no content being delivered from the local browser cache. All objects will contain a response code of 200, indicating that all were served directly from the servers.

Browser Setting
Review browser setting to verify when the page is out of date (Every Visit/Never/Once per Session/When the page is out of date). Along with this check settings to enable/disable caching of SSL content.

Sample Cache related Http  Response Headers
Cache-Control: private, max-age=1000 (,s-maxage=0)
Expires: Mon, 19 May 2014 14:42:14 GMT
Last-Modified: Mon, 19 May 2014 15:40:42 GMT
ETag: -1265215684

HTML5 Application Cache
HTML5 provides an application caching mechanism that lets web-based applications run offline. Applications that are cached load and work correctly even if users click the refresh button when they are offline.