How HTML5 On-Device Caching Improves User Experience
Sue Poremba, writing for Designmodo, provides a useful overview of the key role HTML5 on-device caching plays in mobile cloud computing.
The promise of mobile cloud computing is exciting: access the internet anywhere, anytime, wirelessly. The reality, however, involves intermittent connectivity, inconsistent data rates, and network latencies that don’t quite live up to the promise.
Thankfully, notes Poremba, the architects of HTML5 had this reality in mind when they developed the specification. HTML5 features on-device caching which can buffer the user experience from the frustrations associated with a lost or spotty data connection.
When you first visit a website or web application using your mobile device’s browser, it will download and store (cache) a copy of the web page and the images displayed on that page. This means that the next time you visit that page on your mobile browser, it will immediately load those files from your device rather than re-download them across your mobile wireless connection. If any one of the files or images has changed since you last visited the page – only those changed files/images will be downloaded over your wireless connection.
This approach radically improves the way you experience the speed of the web pages you view on your mobile browser by not making you wait for everything to be downloaded wirelessly each time you visit a page.
HTML5 also improves your experience when interacting with a web application or game using a mobile browser via a technology called client-side storage. Imagine that you were filling-out a multistep form on your phone’s web browser and your signal dropped. Normally, this loss of connection would mean that you would have to stop, wait until you could re-establish a connection and then start all over again with your mobile device… losing all of what you had started. This is not an ideal user experience.
Client-side storage solves this by saving your data to your phone while you are filling-out the form and later pushing that data up to the cloud when it has a strong connection. The on-device storage acts as a safety net for when you temporarily lose your connection – keeping you from losing your data and allowing your experience to conclude without interruption.
Poremba notes several examples of how mobile apps can take advantage of on-device caching:
- preload map data for areas the user transits most often
- cache information/data so that it can be accessed when no wireless signal is available (while traveling out-of-network or where signal coverage is bad)
- preload long lists of data to improve on-screen scrolling capability (no more freezes or pauses mid-scroll)
In today’s increasingly mobile, on-demand, fast-paced society, HTML5 makes it possible for us to have engaging user experiences while on-the-go without having to worry about the quality or presence of a wireless signal.
Does your website offer the best possible user experience to your mobile visitors?