<!doctype HTML>
<html manifest="cache.manifest">
<meta charset="utf-8"/>
<title>...
CACHE MANIFEST #version01 #files that explicitly cached CACHE: index.html css/styles.css scripts/application.js #Resources requiring connectivity NETWORK: signin.php dosomething.cgi
Add to .htaccess file
AddType text/cache-manifest manifest
if(window.applicationCache){
var appCache = window.applicationCache;
appCache.update();
if (appCache.status == appCache.UPDATEREADY ){
appCache.swapCache();
}
}
In this lab, we are going to build a manifest file for our web application and we are going to see a live example of offline caching For the purpose of this lab, we are going to use the python module SimpleHTTPServer as a web server but first, we will need to define the MIME type for the manifest file. Edit mimetypes.py and look for the section defining MIME types. Add the MIME type for .manifest files after '.man' : 'application/x-troff-man', like this:
types_map = {
# Mimetypes
'.man' : 'application/x-troff-man',
# MIME TYPE ADDED FOR MANIFEST FILES
'.manifest' : 'text/cache-manifest',
# Continues...
}
We are also going to use firefox for this lab since it provides the useful functionality to go work offline
1. The application in your labs folder (in offline_application) is composed by the following assets:
2. We now want to create a manifest file specifying which resources need to be cached and what is the fallback page in case users try to access a resources which is not cached. In the same folder of the application, create offline.manifest:
CACHE MANIFEST # Version 1.0.0 CACHE: index.html cached.html style.css light_bulb_off.jpg NETWORK: * FALLBACK: / fallback.html
3. We then need to link this manifest file to the index.html page:
<!DOCTYPE html> <html lang="en" manifest="offline.manifest"> <!-- Rest of the file not showed here -->
4. So far we could use our application as it is but before we would like to have details on which events have been fired so we exactly know what is going on. In index.html, add the following between the <script> tag:
function networkStatus() {
if (navigator.onLine) {
document.getElementById("status").innerHTML="ONLINE";
} else {
document.getElementById("status").innerHTML="OFFLINE";
}
}
function printMessage(message) {
var p = document.createElement("p");
p.innerHTML = message;
document.getElementById("cachelog").appendChild(p);
}
//Here we add event listener for the applicationCache so we exactly know what is the flow of event
//For each fired event, this will be displayed in the page
window.applicationCache.onchecking = function(e) {
printMessage("checking event: Checking is always the first event to be fired");
}
window.applicationCache.onnoupdate = function(e) {
printMessage("noupdate event: The manifest file has not changed. There is no update");
}
window.applicationCache.onupdateready = function(e) {
printMessage("updateready event: Application update ready");
}
window.applicationCache.onobsolete = function(e) {
printMessage("obsolete event: The manifest file does not exist");
}
window.applicationCache.ondownloading = function(e) {
printMessage("downloading event: Update found. Downloading has started");
}
window.applicationCache.oncached = function(e) {
printMessage("cached event: Application cached");
}
window.applicationCache.onerror = function(e) {
printMessage("error event: Application cache error");
}
window.applicationCache.onprogress = function(e) {
printMessage("progress event: Downloading resources...");
}
window.addEventListener("online", function(e) {
document.getElementById("status").innerHTML="ONLINE";
}, true);
window.addEventListener("offline", function(e) {
document.getElementById("status").innerHTML="OFFLINE";
}, true);
window.addEventListener("load", networkStatus, true);
5. Time to see your application working. In a terminal or command prompt, browse to your labs folder in the offline_application and run the following command:
python -m SimpleHTTPServer
6. Then open firefox and browse to: http://localhost:8000 (or any other port where the web server is listening on). So far, if it worked well, firefox should ask you to store data on your computer for offline use:
7. Click on "Allow" and then you should see the following being displayed:
ONLINE checking event: Checking is always the first event to be fired downloading event: Update found. Downloading has started progress event: Downloading resources... progress event: Downloading resources... progress event: Downloading resources... progress event: Downloading resources... progress event: Downloading resources... cached event: Application cached
8. Do not browse any other page and directly switch to offline mode. In firefox, click on File!Work Offline
9. Now that you are offline, click on the "Network Page" link. Since it is not cached, the fallback page should be displayed.
10. Click on the "Cached Page" link and you should be able to see the page since it was in the CACHE section of themanifest file
11. Switch back to online mode. In firefox, click on File!Work Offline (if this one is checked)
12. Now visit the "Network Page" again. You should be able to see it since you are online
13. Switch to offline mode again. In firefox, click on File!Work Offline
14. Visit the "Network Page" again and now instead of getting the fallback page, you get the browser cache (do not confuse this with the application cache) since you already visited the page while online.
15. Let us change the header of our web application to something a little bit fancier. Change:
<header> <hgroup> <h1>The HTML5 Blog</h1> <h2>All HTML5 News :)</h2> </hgroup> </header>
By the following:
<header> <hgroup> <h1>The kick-ass HTML5 Blog</h1> <h2>kick-ass since it is now an offline blog as well :)</h2> </hgroup> </header>
16. Switch to online mode. In firefox, click on File!Work Offline (if this one is checked)
17. Click on the "Home" link and checked that the title has changed
18. The modification we have just made did not take place since we did not modify the manifest as well. Update the
manifest with a simple comment (like modifying the version number for instance), save it and click again on the
"Home" link
19. The information displayed in the index.html page are the following:
ONLINE checking event: Checking is always the first event to be fired downloading event: Update found. Downloading has started progress event: Downloading resources... progress event: Downloading resources... progress event: Downloading resources... progress event: Downloading resources... progress event: Downloading resources... updateready event: Application update ready
Since the manifest file has been updated, the application detect that there is an update at "downloading event: Update found. Downloading has started". "Application update ready" mean that the application has downloaded the new cache and the new cached resources but it is not using it yet
20. Reload the page again and now you can see the change