<html><\/code> Tag like this:<\/p>\n\r\n<!DOCTYPE html>\r\n<html manifest="cache.manifest">\r\n<body>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nThe filename does not matter, but as a convention you may use names like : manifest.appcache<\/em>, myapplicaiton.manifest<\/em>, …<\/p>\nThe important thing is the Content-Type<\/em> return by the server, it must be: text\/cache-manifest<\/code>.<\/p>\nIn Apache you will have to add a directive: AddType text\/cache-manifest .manifest<\/code> to force the server to serve all .manifest<\/em> file with the text\/cache-manifest<\/code> Content-Type<\/em>.<\/p><\/blockquote>\nIn NGINX, you will have to edit the mime.types<\/code> file and add the following line: text\/cache.manifest\u00a0\u00a0\u00a0\u00a0\u00a0manifest;<\/code><\/p><\/blockquote>\nFor IIS, yous will have to add the mime type. Have a look at the answer on this StackOverflow<\/a>.<\/p><\/blockquote>\nAnd its first line must be: CACHE MANIFEST<\/code>. For example:<\/p>\n\r\nCACHE MANIFEST\r\n# This is a comment\r\nindex.html\r\ncss\/style.css\r\njs\/script.js\r\n<\/pre>\nThis file will tell the browser to keep three files in cache: index.html<\/em>, style.css<\/em> and script.js<\/em>.<\/p>\nSo now, if you are disconnected and you refresh your browser, you will always be able to use your web page.<\/p>\n
2. Manifest Sections<\/h2>\n
We did not see it in the previous section, but the manifest<\/em> file is structured with sections:<\/p>\n\nCACHE<\/code>: Files listed in this section are explicitly cached after they are downloaded.<\/li>\nNETWORK<\/code>: Files listed in this section are explicitly NOT<\/strong> cached.
\n“All requests to such resources bypass the cache, even if the user is offline”<\/p><\/blockquote>\n<\/li>\n
FALLBACK<\/code>: This section will specifies fallback pages the browser will use when a resource is not accessible. Entries in this section lines of mapping urls: URL_REQUESTED URL_FALLBACK.<\/li>\n<\/ul>\nNote <\/strong>: All the files listed outside any sections are considered listed in the explicit CACHE<\/code> section.<\/p><\/blockquote>\nSo let see a more complex Manifest file<\/code>:<\/p>\n\r\nCACHE MANIFEST\r\n# This is a comment\r\nCACHE:\r\nindex.html\r\ncss\/style.css\r\njs\/script.js\r\n\r\nNETWORK:\r\n# All requests to the Api need a network connection\r\n\/api\r\n\r\nFALLBACK:\r\nadd.html offline.html\r\n<\/pre>\nThis manifest file will caches 3 files, tell the browser to always try to download resources inside \/api<\/em>, and if the add.html<\/em> file is requested, the display the offline.html<\/em> file.<\/p>\nOne side effect using application cache is that the browser won’t try to download updates cached files until the manifest file itself is updated …<\/p>\n
This can be very disturbing during development, or when files are frequently updated.<\/p>\n
To solve this problem we can add a version number<\/em> in a comment line at the top of the manifest<\/code> file to force the browser to update its cache.<\/p>\nFor example:<\/p>\n
\r\nCACHE MANIFEST\r\n# V1.0.1 <-- update the version to force the browser to update its cache.\r\n\r\n# This is a comment\r\nCACHE:\r\nindex.html\r\ncss\/style.css\r\njs\/script.js\r\n\r\nNETWORK:\r\n# All requests to the Api need a network connection\r\n\/api\r\n\r\nFALLBACK:\r\nadd.html offline.html\r\n<\/pre>\n3. Application Cache API<\/h2>\n
The HTML5 Application Cache comes with a JavaScript Api, that will allow us (developers) to interact with the cache.<\/p>\n
We can access the Application cache by the window.applicationCache<\/code> object.<\/p>\n3.1 Events<\/h3>\n
Here are the events introduced by the Application Cache:<\/p>\n
\nchecking<\/code>: Fired when the user agent is looking for updates, or is trying to download the manifest file for the first time. (This is always the first event in the sequence.)<\/li>\nerror<\/code>: The manifest file is not accessible (404), or any other errors when trying to downlod the manifest.<\/li>\nnoupdate<\/code>: The manifest did not change … nothing to update.<\/li>\ndownloading<\/code>: The manifest was found or updated, so the browser starts to download resources listed in it.<\/li>\nprogress<\/code>: Fired during download progress.<\/li>\nupdateready<\/code>: Fired when resources in the manifest have been redownloaded.<\/li>\ncached<\/code>: Fired when resources have been cached. (Last event in sequence.)<\/li>\n<\/ul>\n3.2 Properties<\/h3>\n
The window.applicationCache<\/code> object has only one property: status<\/code>
\nThis property returns the current status of the applicationCache<\/code>.
\nThe value of the property is one of this constant:<\/p>\n\nUNCACHED<\/code>: 0<\/strong> A special value that indicates that an application cache object is not fully initialized.<\/li>\nIDLE<\/code>: 1<\/strong> The application cache is not currently in the process of being updated.<\/li>\nCHECKING<\/code>: 2<\/strong> The manifest is being fetched and checked for updates.<\/li>\nDOWNLOADING<\/code>: 3<\/strong> Resources are being downloaded to be added to the cache, due to a changed resource manifest.<\/li>\nUPDATEREADY<\/code>: 4<\/strong> There is a new version of the application cache available. There is a corresponding updateready event, which is fired instead of the cached event when a new update has been downloaded but not yet activated using the swapCache() method.<\/li>\nOBSOLETE<\/code>: 5<\/strong> The application cache group is now obsolete.<\/li>\n<\/ul>\n3.3 Methods<\/h3>\n
Here are the methods of the window.applicationCache<\/code> object.<\/p>\n\nupdate()<\/code>: Invoke the cache download process, not really necessary, the browser, will generally take care of updating the cache.<\/li>\nabort()<\/code>: Cancel the cache download process.<\/li>\nswapCache()<\/code>: Switches to the most recent application cache, if there is a newer one. If there isn’t, throws an InvalidStateError exception.<\/li>\n<\/ul>\n4. The online \/ offline events<\/h2>\n
The API also add two events for Online status detection. These events are: online<\/code> and offline<\/code>.<\/p>\nLet see a simple example:<\/p>\n
\r\nwindow.addEvenListener('online', function(){\r\n console.log('online');\r\n}, false)\r\nwindow.addEvenListener('offline', function(){\r\n console.log('offline');\r\n}, false)\r\n<\/pre>\nNow we know the necessary for a “real world” example …<\/p>\n
5. A Working Example<\/h2>\n
As an example we can imagine a simple web application, to manage your todo list<\/em>.
\nYou must not be able to add a task when you’re offline, we will do that by disabling submit button.<\/p>\nNOTE<\/strong>: The example will use the Zepto.js<\/a> library to facilitate, the ajax calls and DOM manipulation..<\/p><\/blockquote>\n5.1. Project structure<\/h3>\n
So the project structure will be:<\/p>\n
\r\n \/\r\n --\/css\/\r\n --\/css\/style.css\r\n --\/js\/\r\n --\/js\/script.js\r\n --\/server\/server.php\r\n --\/server\/tasks.json\r\n --\/index.html\r\n<\/pre>\nThe goal is to write an application that will allow you to add<\/em> \/ remove<\/em> \/ edit<\/em> tasks, tasks will be saved in a static json file (tasks.json<\/code>) on the server (simulated here by the server.php<\/code> file).<\/p>\n5.2 The server.php file<\/h3>\nAs I said this will simulate<\/em> a server, so do not use this file in production<\/strong>, this is only for testing purpose.<\/p><\/blockquote>\n\r\n\/\/ We we only manage POST Requests\r\nif ($_SERVER['REQUEST_METHOD'] === 'POST') {\r\n $message = array();\r\n $file = dirname(__FILE__)."\/tasks.json";\r\n $content = file_get_contents($file);\r\n $tasks = json_decode($content, true);\r\n switch($_POST['action']){\r\n case "list":\r\n \/\/ create the response\r\n $message["type"] = "OK";\r\n $message["data"] = $tasks;\r\n break;\r\n case "add":\r\n \/\/ create the task\r\n $task = array('id'=> uniqid(), "task"=>$_POST["task"]);\r\n \/\/ push it to the array pf tasks\r\n array_push($tasks, $task);\r\n\r\n \/\/ save the file :\r\n file_put_contents($file, json_encode($tasks));\r\n\r\n \/\/ create the response\r\n $message["type"] = "OK";\r\n $message["data"] = $task;\r\n\r\n break;\r\n case "remove":\r\n \/\/ Get the task id\r\n $id = $_POST["id"];\r\n $tmpTasks = array();\r\n $found = false;\r\n foreach($tasks as $task){\r\n if( $task["id"] !== $id ){\r\n array_push($tmpTasks, $task);\r\n } else {\r\n $found = true;\r\n }\r\n }\r\n if( $found ){\r\n \/\/ Ok task was deleted\r\n $message["type"] = "OK";\r\n $message["data"] = $id;\r\n file_put_contents($file, json_encode($tmpTasks));\r\n } else {\r\n $message["type"] = "KO";\r\n $message['message'] = "Task No Found";\r\n }\r\n break;\r\n case "update":\r\n case "edit":\r\n \/\/ Get the task id\r\n $id = $_POST["id"];\r\n $taskPosted = $_POST["task"];\r\n $tmpTasks = array();\r\n $found = false;\r\n foreach($tasks as $task){\r\n if( $task["id"] === $id ){\r\n $task["id"] = $id;\r\n $task["task"] = $taskPosted;\r\n $found = true;\r\n }\r\n array_push($tmpTasks, $task);\r\n }\r\n if( $found ){\r\n \/\/ Ok task was deleted\r\n $message["type"] = "OK";\r\n $message["data"] = array('id'=>$id, 'task'=>$taskPosted);\r\n file_put_contents($file, json_encode($tmpTasks));\r\n } else {\r\n $message["type"] = "KO";\r\n $message['message'] = "Task No Found";\r\n }\r\n break;\r\n case 'reset':\r\n \/\/ save the file :\r\n\r\n file_put_contents($file, json_encode(array()));\r\n $message["type"] = "OK";\r\n $message["data"] = "";\r\n break;\r\n default:\r\n $message = array(\r\n "type"=>"ERR",\r\n "message" =>"Action unknown : ".$_POST["action"]."."\r\n );\r\n break;\r\n }\r\n \/\/ Print the result\r\n echo json_encode($message);\r\n} else {\r\n $message = array(\r\n "type"=>"ERR",\r\n "message" =>"Request should be post, nothing to do ..."\r\n );\r\n echo json_encode($message);\r\n}\r\n<\/pre>\nThis little php script allow you to use some actions<\/em> to manage the task list, some of the actions<\/em> needs some extra post datas, here is the API definition:<\/p>\n\n\n\naction<\/th>\n parameters<\/th>\n description<\/th>\n<\/tr>\n<\/thead>\n \n\nlist<\/code><\/td>\nnone<\/td>\n Get the full list of tasks.<\/td>\n<\/tr>\n \nadd<\/code><\/td>\ntask : STRING<\/td>\n Add the task, will generate a unique id, and return a task :<\/p>\n\r\n {\r\n "type":"OK",\r\n "data":{\r\n "id":"54e390fbc8823",\r\n "task":"rere"\r\n }\r\n }\r\n <\/pre>\n<\/td>\n<\/tr>\n\nremove<\/code><\/td>\nid : INT<\/td>\n Remove the task identified by the ID, will return the id as message, or an error message :<\/p>\n\r\n {\r\n "type":"OK",\r\n "data":"54e390fbc8823"\r\n }\r\n <\/pre>\nor<\/p>\n
\r\n {\r\n "type":"KO",\r\n "message":"Task No Found"\r\n }\r\n <\/pre>\n<\/td>\n<\/tr>\n\nupdate<\/code> or edit<\/code><\/td>\nid : INT
\ntask : STRING<\/td>\n Update the task identified by the ID with the Task sent, will return the id as message, or an error message :<\/p>\n\r\n {\r\n "type":"OK",\r\n "data":"54e390fbc8823"\r\n }\r\n <\/pre>\nor<\/p>\n
\r\n {\r\n "type":"KO",\r\n "message":"Task No Found"\r\n }\r\n <\/pre>\n<\/td>\n<\/tr>\n\nreset<\/code><\/td>\nnone<\/td>\n Reset the task list (empty list), return an empty message :<\/p>\n\r\n {\r\n "type":"OK",\r\n "message":""\r\n }\r\n <\/pre>\n<\/td>\n<\/tr>\n\ndefault<\/code><\/td>\nnone<\/td>\n Should not append, return an error message :<\/p>\n\r\n {\r\n "type":"KO",\r\n "message":"Task No Found"\r\n }\r\n <\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n5.3 The main HTML file<\/h3>\n
Here is the index.html<\/code> source file:<\/p>\n\r\n<!DOCTYPE html>\r\n<html manifest="app.manifest">\r\n<head lang="en">\r\n <meta charset="UTF-8">\r\n <title>Task List Example<\/title>\r\n <link href="css\/style.css" rel="stylesheet" \/>\r\n<\/head>\r\n<body>\r\n<div id="wrapper">\r\n <form id="taskform">\r\n <input type="hidden" id="task_id" value="-1" \/>\r\n <input type="text" id="task" placeholder="Add a Task ..." \/>\r\n <input type="submit" value="Add" \/>\r\n <\/form>\r\n <ul id="tasklist"><\/ul>\r\n <button id="reset">Clear All Tasks<\/button>\r\n<\/div>\r\n\r\n<script src="js\/zepto.min.js"><\/script>\r\n<script src="js\/script.js"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nHere is the app.manifest<\/code> file:<\/p>\n\r\nCACHE MANIFEST\r\n# version 1\r\n# This is a comment\r\nCACHE:\r\nindex.html\r\ncss\/style.css\r\njs\/script.js\r\njs\/zepto.min.js\r\n\r\nNETWORK:\r\nserver\/server.php\r\n\r\n<\/pre>\n5.4 The JavaScript<\/h3>\n
I won’t show the full JS file as you can download it, I will only explain some parts of the code.<\/p>\n
First of all we need to detect if the browser is onLine<\/strong> or offLine<\/strong>, as the whole code is cached (via the app.manifest file), the application can be opened without being onLine (don’t need to do the first request if it was done once before).<\/p>\n\r\nif(navigator.onLine){\r\n \/\/ browser is online so I can load the list from the server\r\n server.list(init);\r\n \/\/ set the connection status to true\r\n setConnected(true);\r\n} else {\r\n \/\/ Not online, set the connection status to false\r\n setConnected(false);\r\n}\r\n<\/pre>\nHere is the function setConnected<\/code><\/p>\n\r\nfunction setConnected(isConnected){\r\n var buttons = 'input[type="submit"], button';\r\n if( isConnected ){\r\n $(buttons).removeAttr('disabled', 'disabled');\r\n } else {\r\n $(buttons).attr('disabled', 'disabled');\r\n }\r\n}\r\n<\/pre>\nThis function only enable or disable the buttons.<\/p>\n
Now we need to listen to the online<\/code> and offline<\/code> events to manage the connection status:<\/p>\n\r\n$(window).bind('online', function(){\r\n \/\/ If the list was never loaded\r\n if( ! loaded ){\r\n \/\/ we load the list from the server\r\n server.list(init);\r\n }\r\n \/\/ set the connection status to true\r\n setConnected(true);\r\n});\r\n$(window).bind('offline', function(){\r\n \/\/ set the connection status to false\r\n setConnected(false);\r\n});\r\n<\/pre>\nI think the above code, is documented enough to understand it.<\/p>\n
Here is what the application looks like in “online” mode:<\/p>\n![\"HTML5](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/02\/online.png\")
<\/a>HTML5 Offline Web Application Example OnLine<\/figcaption><\/figure>\nHere is what the application looks like in “offline” mode:<\/p>\n![\"HTML5](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/02\/offline.png\")
<\/a>HTML5 Offline Web Application Example OffLine<\/figcaption><\/figure>\n6. Download<\/h2>\n