HTML5 – Developing websites to work offline

In the past, any web page or content you wanted to access required an internet connection. While this seems perfectly acceptable for normal websites, application or service-based sites could benefit greatly from being able to operate without an internet connection.

Enter modern web development

Let’s say we created a website that allowed users to create little videos or Powerpoint style presentations, by adding text, uploading images and applying effects. But what if a user needed to quickly make an adjustment to one of his presentations right before an important board meeting and now he doesn’t have an internet connection!

What a great help it would be if he could still use your website without being connected to the internet. With recent HTML5 features, this is entirely possible. HTML5 is the latest version of HTML.

First, we would make use of the ‘manifest’ feature which tells the browser, which files should be remembered and available when you’re offline.

Next, we would need some way to store data, like the user’s presentations, images or settings. This can be accomplished using HTML5 Localstorage or indexedDB features. With Localstorage you have excellent browser support but can’t risk keeping important data, as a user can possibly clear his local storage cache and lose all that data. With indexedDb, the browser support isn’t as great (currently only Chrome and Firefox at the time this article was written), but it provides powerful features and fairly secure storage.

Now the only thing that is missing is the ability to ‘upload’ images for use in our presentations. We obviously can’t upload the images to a server, if we are not connected, but we can make use of other HTML5 features: Filereader and DataURI. The combination of these two features allows us to take the image file that the user selects and read it into the browser immediately, where we can use it.

The end result of all this is that the user can use this amazing piece of software even when he is offline. The only time he is required to connect would be to synchronise his presentations with the server and maybe download new content to use.

To summarise, HTML5 allows users of websites more flexibility and features. In this case, it is the ability to work offline and store files locally in certain browsers.

Elemental is a web solutions company that has been developing custom web solutions for their clients. We can assist your company in making use of this feature of HTML5 to benefit your website clients and users. Should you be interested in such a solution or any other web solution, kindly contact us. For more information about the services that we offer click here.

Don't forget to share this post!
Having been established in 2005, in Cape Town, South Africa, Elemental is primarily focused on providing web development services and digital marketing campaigns.