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.
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.
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.
Listing 2: HTML code
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>
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.
The focus of this article was to explain the process of building an offline Web application. Hope this will prove useful.