Thanks to Microsoft not only do I have to fix my friends and family PC (well actually Windows) issues, but they now keep asking me about the cloud. So in retaliation I’m going to write about the total opposite: how you can get web applications to run offline using HTML5.
There have been a number of open and proprietary technologies that have allowed applications to be delivered and updated through the web but to operate locally. Some of these have been dependant on plug-ins e.g. flash, Silverlight or platform specific such as Microsoft HTA.
HTML5 now brings with it features that not only allow you to run applications offline but also to store data and content with it too. Of course you may be thinking with 3G, 4G and Wifi we have ubiquitous broadband anytime anywhere, but you only have to take a stroll out of the city to realise we are not quite there. In fact the success of mobile apps has highlighted the need for local offline applications.
First an application can check whether it is online or offline by checking the navigator.online property (it is a simple Boolean). There are also events to notify an application of a change in status so an application can behave as desired in either it’s online or offline state.
HTML5 allows you to define a “Manifest” , essentially this simply lists the files (pages, images, scripts etc…) an application wants the browser to store (cache) locally so that they can be read when offline. There are also events and processing that can be programmed to control how and when the cached pages are refreshed, this includes the ability to show progress bars whilst a large application is being downloaded to the cache.
There aren’t many applications that don’t rely on stored data. HTML5 WebStorage specification provides new API’s for persisting data as simple key value pairs. There are two options here: sessionStorage or localStorage. The key difference between the two is how long the data is kept for. Simply, if your application just needs data whilst it is currently running (and not after the browser is closed) then use sessionStorage, otherwise if your application needs data that can be used after browser re-starts use localStorage.
Although this sounds similar to cookies, these API’s are far more efficient and can store far more data than cookies. Both options provide getItem, setItem and removeItem methods for retrieving, storing and removing values. There are also events that can be trapped and processed by an application when data changes. For me the WebStorage specification is one of the most exciting as I have previously blogged the need for “client side session management” to improve performance and efficiency of web applications.
In many applications this simple storage of data will not be enough and users will want much more the capabilities of a database that can be queried and sorted. Here the IndexDB specification comes to the rescue. This specification deserves a blog post in it’s own right, so for now I’m going to leave it as HTML5’s answer to having a local database capability.
So HTML5 brings a host of features to make rich, dynamic applications with local storage work offline a reality. But we are still a way off from this being a ubiquitous solution as standards/specifications gets finalised and desktop browser’s play catchup with enabling these new features. However the time is right for your organisations to re-evaluate the technologies used for offline applications as HTML5 is a serious contender for the future that is inevitably going to require a cross platform approach to both online and offline.