In Focus

HTML5 and ASP.Net Client-Side Caching Techniques

In this article you will learn about HTML5 and ASP.NET Client-Side Caching Techniques.

A browser renders server data (dynamic), Static Data (Cookies, CSS, JavaScript, Flash Media) and displays it to the users in quite a number of various modern devices, such as computers, Mobiles and tablets. No matter how fast the device or computer or Wi-Fi or network speed is, there is always latency to render content from various sources and formats them before displaying. To reduce this latency the designers of browsers always bring up the new techniques for the application developers in terms of new APIs.

Any resource that is cached locally is completely controlled by HTTP and is defined in the HTTP header itself. The HTTP header defines the three mechanisms of freshness, validation and invalidation of the cached content.

Freshness is used to refresh or reuse the content with or without rechecking with the content server. For example, say that the Expiration date in a response header provides a date for when the document becomes stale. There is actually a huge list of items in the Request/Response, that can be found on the Wiki.

Validation is used to check whether a cached response is still good after it becomes stale. If the response has a Last-Modified header then a cache can make a conditional request using the If-Modified-Since header to see if the content has changed. Now developers have even stronger/forced validation available through code.

Response.Cache.SetETag("\"someuniquetextstring:version\"");

Invalidation is usually a side-effect of another request that passes through the cache. For example, if the URL associated with a cached response subsequently gets a POST, PUT, or DELETE request then the cached response will be invalidated. So ensure that the correct guideline is set up for the development.

Although default caching has served for years, many challenges with the size still exist, invalidating the local cache when something is changed in the servers, security. Now in HTML 5 some of these are handled with more efficiency using the ApplicationCache (AppCache) and Local Storage.

Application Cache

HTML 5 specifications provide the ApplicationCache API that gives the ability for developers a direct access to the local browser content cache variables.

If we can cache max content that will not change in a certain timeframe then we can even browse the web application without an internet connection, on the other hand an application will make a request to the server only for the changed content.

The Application Cache gives an application the following advantages:

  1. Offline browsing: users can use the application when they're offline. Ready Only not the update functionality
  2. Increase the speed of the application: since cached resources load faster
  3. Reduced server load: the browser will only download updated/changed resources or content from the server

Browser versions that support the Application Cache are Internet Explorer 10, Firefox, Chrome, Safari and Opera.

The following is the procedure necessary to configure the Application Cache for web applications that support HTML 5.

  1. Define the manifest

    The Manifest file is a simple text file with a .manifest extension that can have the three sections CACHE, NETWORK and FALLBACK with a declaration tag of CACHE MANIFEST.

    Example: SiteCache.manifest

    CACHE MANIFEST

    # version 0.1
    # Cached entries, following files will be cached from their paths
    CACHE:
    /banner.ico
    home.html
    site.css
    images/logo.jpg
    scripts/application.js

    # Resources that are "always" fetched from the server, no local cached version for these resources.
    NETWORK:
    login.asmx
    login.aspx

    # static version of the file that will serve while application is offline.
    FALLBACK:
    # static version of index.html will be served with /Home/Index is not available
    /Home/Index /index.html

    # images/offline.jpg image will served while any of the image in images/ folder is not available
    images/ images/offline.jpg

    #for all the server version of files following static version of the will be served.
    * /appOffline.html
     
  2. Reference the manifest

    To reference the manifest file, simply define the manifest attribute on the <html> tag on the pages that needs to:

    <!DOCTYPE html>
    <html manifest="SiteCache.manifest">
    ...
    </html>

    If the browser finds this tag manifest attribute then it recognizes that your application defines a cache manifest and attempts to download the manifest file automatically.
     
  3. Serve the manifest to the user

    A manifest file needs to be served with the correct MIME-type, which is "text/cache-manifest" and must be configured on the web server.

    Response.ContentType= "text/cache-manifest";

    Without this MIME type specified, the browser won't recognize this file as a manifest file, and the AppCache will not be enabled for your site.

    With the AppCache enabled for your application, the browser will fetch server resources only in these three cases:

    1. When the user clears the cache, which removes all the cached content.
    2. When the manifest file changes on the server. Simply updating a comment and saving the file can trigger an update.
    3. When the cache is updated programmatically via JavaScript.

    The Application Cache gives developers complete control over cached content and resources and allows triggering updates when needed, without resorting to any down time.

Local Storage

The Local storage API is another new feature in HTML 5 specification, which supports offline, browser-based storage techniques. It is not similar to cookies that are limited in size and persists large amounts of data to the user's device.

The Local Storage API has two flavors or endpoints, localStorage and sessionStorage. Content stored in localStorage is available indefinitely whereas sessionStorage is lost when the browser is closed, otherwise there is no difference in these two techniques.

Like most server-side caching objects, Local Storage uses a string-based dictionary data structure. So, if you are retrieving anything other than strings then you may need to use functions like parseInt() or parse Float() to cast the data back to native JavaScript data types.

To store an item in localStorage, you can use setItem():

localStorage
.setItem("userName", "Srihari");
localStorage.setItem("empID", 1779
);

Or can use the square bracket syntax:

localStorage["userName"] = "Srihari";
localStorage["empID "] = 1779
;

Retrieving an item is straightforward as well:

var userName = localStorage.getItem("userName");
var age = parseInt(localStorage.getItem("empID"));
// or use square brackets...
var userName = localStorage["userName"];
var age = parseInt(localStorage["empID"
]);

Also use the removeItem() function to remove any individual item from storage as in the following:

localStorage.removeItem("userName");

Or, to clear all keys at once:

localStorage.clear();

Hope this information helps.

Thank You.