Home » HTML5 » HTML5 Offline Web Application Example

About Remi Goyard

Remi Goyard
I'm a senior web architect. Passionated by new technologies, programming, devops tools, and agile methodologies. I really enjoy to coach, or teach, people who wants to learn programming, from beginners to skilled programmers. Involved in local developer communities, Java User Group, PHP User Group, or Javascript User Group, i like to share with others about experiences, news or business. Coding is FUN !

HTML5 Offline Web Application Example

In this example we will talk about writing an “Offline” Web Application. Offline ? Sounds weird, doesn’t it ?

HTML5 allows us to create a “list” of files accessible after the browser is disconnected.

The browser will always have to download the main HTML file and all the files in this “list” at least once.

Let’s see how this works.

Want to be a HTML5 Ninja?

Subscribe to our newsletter and download the HTML5 Programming Cookbook right now!

In order to get you prepared for your HTML5 development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

1. The Manifest

The “list” is called the manifest file. This manifest is declared with an attribute of the <html> Tag like this:

<!DOCTYPE html>
<html manifest="cache.manifest">
<body>

</body>
</html>

The filename does not matter, but as a convention you may use names like : manifest.appcache, myapplicaiton.manifest, …

The important thing is the Content-Type return by the server, it must be: text/cache-manifest.

In Apache you will have to add a directive: AddType text/cache-manifest .manifest to force the server to serve all .manifest file with the text/cache-manifest Content-Type.

In NGINX, you will have to edit the mime.types file and add the following line: text/cache.manifest     manifest;

For IIS, yous will have to add the mime type. Have a look at the answer on this StackOverflow.

And its first line must be: CACHE MANIFEST. For example:

CACHE MANIFEST
# This is a comment
index.html
css/style.css
js/script.js

This file will tell the browser to keep three files in cache: index.html, style.css and script.js.

So now, if you are disconnected and you refresh your browser, you will always be able to use your web page.

2. Manifest Sections

We did not see it in the previous section, but the manifest file is structured with sections:

  • CACHE: Files listed in this section are explicitly cached after they are downloaded.
  • NETWORK: Files listed in this section are explicitly NOT cached.

    “All requests to such resources bypass the cache, even if the user is offline”

  • FALLBACK: 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.

Note : All the files listed outside any sections are considered listed in the explicit CACHE section.

So let see a more complex Manifest file:

CACHE MANIFEST
# This is a comment
CACHE:
index.html
css/style.css
js/script.js

NETWORK:
# All requests to the Api need a network connection
/api

FALLBACK:
add.html offline.html

This manifest file will caches 3 files, tell the browser to always try to download resources inside /api, and if the add.html file is requested, the display the offline.html file.

One side effect using application cache is that the browser won’t try to download updates cached files until the manifest file itself is updated …

This can be very disturbing during development, or when files are frequently updated.

To solve this problem we can add a version number in a comment line at the top of the manifest file to force the browser to update its cache.

For example:

CACHE MANIFEST
# V1.0.1 <-- update the version to force the browser to update its cache.

# This is a comment
CACHE:
index.html
css/style.css
js/script.js

NETWORK:
# All requests to the Api need a network connection
/api

FALLBACK:
add.html offline.html

3. Application Cache API

The HTML5 Application Cache comes with a JavaScript Api, that will allow us (developers) to interact with the cache.

We can access the Application cache by the window.applicationCache object.

3.1 Events

Here are the events introduced by the Application Cache:

  • checking: 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.)
  • error: The manifest file is not accessible (404), or any other errors when trying to downlod the manifest.
  • noupdate: The manifest did not change … nothing to update.
  • downloading: The manifest was found or updated, so the browser starts to download resources listed in it.
  • progress: Fired during download progress.
  • updateready: Fired when resources in the manifest have been redownloaded.
  • cached: Fired when resources have been cached. (Last event in sequence.)

3.2 Properties

The window.applicationCache object has only one property: status
This property returns the current status of the applicationCache.
The value of the property is one of this constant:

  • UNCACHED: 0 A special value that indicates that an application cache object is not fully initialized.
  • IDLE: 1 The application cache is not currently in the process of being updated.
  • CHECKING: 2 The manifest is being fetched and checked for updates.
  • DOWNLOADING: 3 Resources are being downloaded to be added to the cache, due to a changed resource manifest.
  • UPDATEREADY: 4 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.
  • OBSOLETE: 5 The application cache group is now obsolete.

3.3 Methods

Here are the methods of the window.applicationCache object.

  • update(): Invoke the cache download process, not really necessary, the browser, will generally take care of updating the cache.
  • abort(): Cancel the cache download process.
  • swapCache(): Switches to the most recent application cache, if there is a newer one. If there isn’t, throws an InvalidStateError exception.

4. The online / offline events

The API also add two events for Online status detection. These events are: online and offline.

Let see a simple example:

window.addEvenListener('online', function(){
    console.log('online');
}, false)
window.addEvenListener('offline', function(){
    console.log('offline');
}, false)

Now we know the necessary for a “real world” example …

5. A Working Example

As an example we can imagine a simple web application, to manage your todo list.
You must not be able to add a task when you’re offline, we will do that by disabling submit button.

NOTE: The example will use the Zepto.js library to facilitate, the ajax calls and DOM manipulation..

5.1. Project structure

So the project structure will be:

 /
 --/css/
 --/css/style.css
 --/js/
 --/js/script.js
 --/server/server.php
 --/server/tasks.json
 --/index.html

The goal is to write an application that will allow you to add / remove / edit tasks, tasks will be saved in a static json file (tasks.json) on the server (simulated here by the server.php file).

5.2 The server.php file

As I said this will simulate a server, so do not use this file in production, this is only for testing purpose.

// We we only manage POST Requests
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $message = array();
    $file  = dirname(__FILE__)."/tasks.json";
    $content = file_get_contents($file);
    $tasks = json_decode($content, true);
    switch($_POST['action']){
        case "list":
            // create the response
            $message["type"] = "OK";
            $message["data"] = $tasks;
            break;
        case "add":
            // create the task
            $task = array('id'=> uniqid(), "task"=>$_POST["task"]);
            // push it to the array pf tasks
            array_push($tasks, $task);

            // save the file :
            file_put_contents($file, json_encode($tasks));

            // create the response
            $message["type"] = "OK";
            $message["data"] = $task;

            break;
        case "remove":
            // Get the task id
            $id = $_POST["id"];
            $tmpTasks = array();
            $found = false;
            foreach($tasks as $task){
                if( $task["id"] !== $id ){
                    array_push($tmpTasks, $task);
                } else {
                    $found = true;
                }
            }
            if( $found ){
                // Ok task was deleted
                $message["type"] = "OK";
                $message["data"] = $id;
                file_put_contents($file, json_encode($tmpTasks));
            } else {
                $message["type"] = "KO";
                $message['message'] = "Task No Found";
            }
            break;
        case "update":
        case "edit":
            // Get the task id
            $id = $_POST["id"];
            $taskPosted = $_POST["task"];
            $tmpTasks = array();
            $found = false;
            foreach($tasks as $task){
                if( $task["id"] === $id ){
                    $task["id"] = $id;
                    $task["task"] = $taskPosted;
                    $found = true;
                }
                array_push($tmpTasks, $task);
            }
            if( $found ){
                // Ok task was deleted
                $message["type"] = "OK";
                $message["data"] = array('id'=>$id, 'task'=>$taskPosted);
                file_put_contents($file, json_encode($tmpTasks));
            } else {
                $message["type"] = "KO";
                $message['message'] = "Task No Found";
            }
            break;
        case 'reset':
            // save the file :

            file_put_contents($file, json_encode(array()));
            $message["type"] = "OK";
            $message["data"] = "";
            break;
        default:
            $message = array(
                "type"=>"ERR",
                "message" =>"Action unknown : ".$_POST["action"]."."
            );
            break;
    }
    // Print the result
    echo json_encode($message);
} else {
    $message = array(
        "type"=>"ERR",
        "message" =>"Request should be post, nothing to do ..."
    );
    echo json_encode($message);
}

This little php script allow you to use some actions to manage the task list, some of the actions needs some extra post datas, here is the API definition:

actionparametersdescription
listnoneGet the full list of tasks.
addtask : STRING Add the task, will generate a unique id, and return a task :

            {
                "type":"OK",
                "data":{
                    "id":"54e390fbc8823",
                    "task":"rere"
                }
            }
            
removeid : INTRemove the task identified by the ID, will return the id as message, or an error message :

            {
                "type":"OK",
                "data":"54e390fbc8823"
            }
            

or

            {
                "type":"KO",
                "message":"Task No Found"
            }
            
update or editid : INT
task : STRING
Update the task identified by the ID with the Task sent, will return the id as message, or an error message :

            {
                "type":"OK",
                "data":"54e390fbc8823"
            }
            

or

            {
                "type":"KO",
                "message":"Task No Found"
            }
            
resetnoneReset the task list (empty list), return an empty message :

            {
                "type":"OK",
                "message":""
            }
            
defaultnone Should not append, return an error message :

            {
                "type":"KO",
                "message":"Task No Found"
            }
            

5.3 The main HTML file

Here is the index.html source file:

<!DOCTYPE html>
<html manifest="app.manifest">
<head lang="en">
    <meta charset="UTF-8">
    <title>Task List Example</title>
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
    <form id="taskform">
        <input type="hidden" id="task_id" value="-1" />
        <input type="text" id="task" placeholder="Add a Task ..." />
        <input type="submit" value="Add" />
    </form>
    <ul id="tasklist"></ul>
    <button id="reset">Clear All Tasks</button>
</div>

<script src="js/zepto.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

Here is the app.manifest file:

CACHE MANIFEST
# version 1
# This is a comment
CACHE:
index.html
css/style.css
js/script.js
js/zepto.min.js

NETWORK:
server/server.php

5.4 The JavaScript

I won’t show the full JS file as you can download it, I will only explain some parts of the code.

First of all we need to detect if the browser is onLine or offLine, 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).

if(navigator.onLine){
    // browser is online so I can load the list from the server
    server.list(init);
    // set the connection status to true
    setConnected(true);
} else {
    // Not online, set the connection status to false
    setConnected(false);
}

Here is the function setConnected

function setConnected(isConnected){
    var buttons = 'input[type="submit"], button';
    if( isConnected ){
        $(buttons).removeAttr('disabled', 'disabled');
    } else {
        $(buttons).attr('disabled', 'disabled');
    }
}

This function only enable or disable the buttons.

Now we need to listen to the online and offline events to manage the connection status:

$(window).bind('online', function(){
    // If the list was never loaded
    if( ! loaded ){
        // we load the list from the server
        server.list(init);
    }
    // set the connection status to true
    setConnected(true);
});
$(window).bind('offline', function(){
    // set the connection status to false
    setConnected(false);
});

I think the above code, is documented enough to understand it.

Here is what the application looks like in “online” mode:

HTML5 Offline Web Application Example OnLine

HTML5 Offline Web Application Example OnLine

Here is what the application looks like in “offline” mode:

HTML5 Offline Web Application Example OffLine

HTML5 Offline Web Application Example OffLine

6. Download

Download
You can download the full source code of this example here: HTML5 Offline Web Application Example

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

One comment

  1. Hey great example but you have left out the reference to your manifest file in the index.html of your example.
    So it does not work!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook