Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to develop Offline Web Applications in HTML5

This tutorial aims to cover the basics of why we need apps to work offline and most importantly the process as to how to develop Offline Applications in HTML5.

Why do web apps need to work offline?

Nowadays we don’t just have simple web pages. The internet is becoming increasingly ubiquitous, and we are seeing ourselves consume web applications more and more. Our reliance on them is increasing, and they are also becoming more complicated and sophisticated. We are seeing more instances where web apps are successfully replacing traditional desktop applications.

One major advantage desktop applications have always had over web applications is the ability to work offline. With web applications, we simply did not have the proper tools and technologies to make this happen.

But this is no longer a problem! With the advent of HTML5 Application Cache, Web Storage and WebSQL we finally have a great way to make web applications work offline:

Application Cache allows us to store a copy of our web app's HTML, CSS and other assets off line, to be used when the network is not available.

Web Storage takes the principles of older storage mechanisms such as cookies, and makes them more powerful and flexible.

WebSQL provides a fully-operational SQL database inside the browser, which can store a copy of our web app's data offline, allowing users to continue working with their data when they have no connection available. The data is then synched back up to the server when the network is available again.

Core elements of Offline Application

Figure1: Core elements of Offline Application

One of the cool things with the Offline application is the fact that once you’ve loaded it, the application caches all of the data on your device, so that subsequent visits when your network connection isn’t on still gives you the full web app experience which is made possible through AppCaching. Basically, a web app is made of html, css, js and images. What AppCaching does is every time a user connects to the site, it provides a list to your device of files that need to be downloaded to make the site work offline, so that when you open the site without a network connection, it pulls the up to date local files.

<html manifest="/cache.manifest">

This then links to a manifest document that sits on your server and tells the device which files it needs to cache locally. A simple manifest is a text file that looks like this:

Listing1: The Cache Manifest

CACHE MANIFEST
/stuff.js
/stuff.css
/stuff_img.jpg

However, within the manifest file you can also do some nifty things around specifying which files are to always be left on the network and surfacing alternative files if the user is offline. If you want some more information on how to do more with AppCaching then head to this great article on Dive into HTML5.

This makes the whole concept of web apps a viable option when all you need to do is present information to the user and not uses device specific functionality, like the camera. However, if you link this up with HTML5 technologies like geolocation and canvas animation, you can create some pretty amazing experiences, while still completely bypassing the app store. However, one of the problems with this at the moment is device compatibility.

When a user selects an item in the list, the details (Id, Quantity, Name) of the item are shown in the middle of the form. The details of the selected item can be changed using the Update button. The selected item can also be deleted from the application using the Delete button. New items can be created by entering the item's quantity and name in the form and selecting the Create button.

The application Status is displayed in the lower part of the screen.

HTML details

The HTML page contains declarations, meta tags for a mobile-optimized display, references to external files (manifest, JavaScript, css), and essential HTML elements that form the basic structure of the application. Listing 1 shows the code.

Listing 2: HTML code

<!DOCTYPE HTML>
                <html manifest="MyHomeStuff.manifest">
                <head>
                <meta name="viewport" content="width=device-width; 
                initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
                <title>MyHomeStuff</title>
                <script type="text/javascript" src="MyHomeStuff.js" ></script>
                </head>
                <body onload="onInit()">
                <h3>Overview</h3>
        <ul id="itemData" ></ul>
    <h3>Details</h3>
        <form name="itemForm">
            <label for="id">Id: </label>
            <input type="text" name="id" id="id" size=2 disabled="true"/>
            <label for="amount">Amount: </label>
            <input type="text" name="amount" id="amount" size = 3/>
            <label for="name">Name: </label>
            <input type="text" name="name" id="name" size=16 /> <br>
            <br>
            <input type="button" name="create" value="create"
                onclick="onCreate()" />
            <input type="button" name="update" value="update"
                onclick="onUpdate()" />
            <input type="button" name="delete" value="delete"
        </form>
    <h4>Status</h4>
        <div id="status"></div>
   </body>
</html>

Event handler attributes of the HTML elements specify which JavaScript functions are executed when the page is initially loaded (onload) and button elements are clicked (onclick).

The HTML page of an offline Web application starts with the tag <!DOCTYPE HTML>. The manifest is referenced through the manifest attribute in the tag <html manifest="MyHomeStuff.manifest">.</p>

As mentioned, the manifest specifies the required files that need to be loaded into the cache. This application consists of an HTML file and a JavaScript file. The HTML file with the reference to the manifest is automatically included in the application cache.

Listing 3: Manifest file

CACHE MANIFEST
MyHomeStuf

The Application cache is like the browser's standard disk cache, but much more robust. Once a resource is stored in the application cache, the browser will never request it from the web until the cached item is de-cached or the cache manifest is invalidated.

Conclusion

The focus of this article was to explain the process of building an offline Web application. Hope this will prove useful.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login