Web apps with no internet :) Beginner’s Guide for application cache

Standard

Hello Guys,

In this modern world, website are essentials. Have you wondered what if you have to read some article or use some web application while you are moving in train or bus and you have no internet? What if you provide this feature to your user? Answer is : This will be a great user experience to them.

What if your user doesn’t have to download your website content each time they visit? Don’t you think this experience will be much far faster than before? Again answer is YES in capital letters.

Let’s see approach.

#Concept

Concept is as simple as we can think. Lets put all of the website on user’s local machine and let browser serve the files from there only. Create some mechanism to let browser know about the updates and download the files again to update your local copy and BOOM, we are updated again and ready to serve application locally.

Technically, this concept is called Application Caching“.

#What is caching?

In computing, a cache is a hardware or software component that stores data so future requests for that data can be served faster; the data stored in a cache might be the result of an earlier computation, or the duplicate of data stored elsewhere.

 from : Wikipedia

Caching can be of two types

  • Browser Caching
  • Application Caching

#Browser Caching

Browser caching is a mechanism to tell our browser about the age of page it is serving. Browser will first look from its cache and if exist, it will serve from there else hit the server and download the copy.

Browser caching can be implemented by setting caching headers in the response.

Browser cache can only cache those pages that you have visited previously.

#Application Caching

Application caching is a technique to serve your complete website with no internet access. It’s same as serving from localhost.

Just one shot and magic happen.

Your browser will download all of your files which you have marked for offline access, on user’s machine when he/she visited you very first time and serve them directly from there until there is any change in content at server.

Intents for Application Cache can be:

  • Offline access
  • Speed
  • Fallback when your server is down.

#Implementation

#manifest File

Manifest file is sort of configuration file that we are going to need to tell our browser about our intention to make this application work offline.

#Referencing manifest inside the html

<html manifest="manifest_file">
  ...
</html>

URL can be relative as well as absolute. Absolute URL must be on same domain.

manifest attribute is mandatory to tell browser to cache this particular page. So we can not tell our manifest file about all the pages that we want to cache then we have to include manifest attribute in each and every html file.

Note: Another thing to note that manifest file must have content-type as text/cache-manifest

#Writing manifest

manifest file contains three sections.

  • CACHE – Files listed under this header will be cached after they are downloaded for the first time
  • NETWORK – Files listed under this header require a connection to the server, and will never be cached
  • FALLBACK – Files listed under this header specifies fallback pages if a page is inaccessible

#CACHE

CACHE
/index.html
/main.css
/scripts/main.min.js
/images/logo.png

The manifest file above list four of the files. So when manifest file will get loaded very first time, browser will download all these files and will be served in offline mode.

#NETWORK

Files comes under this section which need to be available on network only. In other words these files will only be available when user is online.

NETWORK
login.php

Above statement means that login.php will only be available when user is connected to internet and it seems logical as user can not get logged in without be authenticate from server.

Also we can simple write * in NETWORK section to indicate that all other resources/files requires an internet connection.

NETWORK
*

#FALLBACK

This header define fallback files in case of requested file is not available because of being offline.

FALLBACK
/plan.html /offline.html
images/ offline.png
/ /offline.html

It declare

  • offline.html file will be server in place of plan.html
  • offline.png will be used in place of images under images folder
  • offline.html will be used for every html file.

#Complete Manifest

CACHE MANIFEST
#Version 1.0

CACHE:
/index.html
/main.css
/scripts/main.min.js
/images/logo.png

NETWORK:
*

FALLBACK:
/plan.html /offline.html
images/ offline.png
/ /offline.html

#Updating Application

Whenever you have a new version of files and you want your users to get the updated one, you have to update the manifest file. Below is the execution process in order.

#First time or After getting updated.

  1. checking
  2. Downloading
  3. Progressing
  4. Cached

#Manifest not updated

  1. checking
  2. No update

So every time application loads into the browser, it first check for the manifest update and act accordingly.

So we can update version no in the manifest file to mark it as updated one and browser will download all the resources again.

Lets talk about the application cache interface a little before going to the problematically ways to update the application.

#Application Cache status

app cache object can be accessed by window.applicationCache and status can be seen by its status property.

var appCache = window.applicationCache;
var status &nbsp;= appCache.status;

Application cache can be of following types

UNCACHED, IDLE, CHECKING, DOWNLOADING, UPDATEREADY and OBSOLETE.

#Cache Events

Cache status can be tracked by adding listeners to its events. Below is the example.

function onCacheEvent (e) {

}
function onCacheError (e) {
 console.log ("An Error occurred");
}

// fired after first cache of the manifest
appCache.addEventListener ("cached", onCacheEvent, false);

//browser is checking for update
appCache.addEventListener ("checking", onCacheEvent, false);

// browser is downloading the resourses
appCache.addEventListener ("downloading", onCacheEvent, false);

// fired for each resource
appCache.addEventListener ("progress", onCacheEvent, false);

// if manifest file throws 404 etc
appCache.addEventListener ("error", onCacheError, false);

// fired if no update available
appCache.addEventListener ("noupdate", onCacheEvent, false);

// when there is an update
appCache.addEventListener ("updateready", onCacheEvent, false);

// in this case cache will be deleted
appCache.addEventListener ("obselete", onCacheEvent, false);

 

#How to update resource when updates are available

Whenever you want to update your user with the new content just update the manifest file and add below code in your javascript.

(function(){
window.addEventListener ("load", loadApp, false);

function loadApp () {
window.applicationCache.addEventListener ("updateready", onUpdateReady, false);
};

function onUpdateReady () {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// update found reload the app.
window.applicationCache.swapCache ();
window.location.reload ();
} else {
// no update. don't bother.
}
}

})();

#DEMO

Sample app can be seen here http://l.sgoyal.net/2bHklEf

 

#REFERENCES

You may want to take a look at this article Application Cache is a Douchebag

That’s it guys.

Happy Learning!

with ♥

sgoyal

One thought on “Web apps with no internet :) Beginner’s Guide for application cache

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s