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-typeastext/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.
- checking
- Downloading
- Progressing
- Cached
#Manifest not updated
- checking
- 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 = 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
TECH ON RIA - Shubham's Blog 
This piece of writing is truly a good one it assists new internet
people, who are wishing in favor of blogging.