HTML5 and ASP.Net Client-Side Caching Techniques

Introduction

A browser renders server data (dynamic) and static Data (Cookies, CSS, JavaScript, Flash Media) and displays it to the users on 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 format 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 and 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 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 with the following advantages.

Offline browsing: users can use the application when they're offline. Ready Only, not the update functionality.
Increase the speed of the application: since cached resources load faster.
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.

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 the 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 serve while any of the images 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

Reference the manifest

To reference the manifest file, simply define the manifest attribute on the <html> tag on the pages that need 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.

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.

When the user clears the cache, it removes all the cached content.
When the manifest file changes on the server. Simply updating a comment and saving the file can trigger an update.
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 downtime.

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 persist 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.