Making the web work offline first
I guess all of us have been more than once in this situation: While doing something on the internet the 3G status bar on our phone slowly disappears, or the internet connection in our office unexpectedly goes down.
All of a sudden, and without any prior warning, a meaningless browser or application error message destroys our seamless online experience. And with it, the sign up form that we were going to submit minutes before the deadline, the blog post comment that took us 20 minutes to write, or the photo upload that was 99% complete: We have to do it all over again.
Having experienced these or similar scenarios a few times, I was all ears when I recently heard of a new paradigm in web development called "Offline first".
Jake Archibald about solving "Offline first" at Lanyrd
In a recent episode of "The Big Web Show" Jeffrey Zeldman was talking with Jake Archibald about how Lanyrd – the social event platform – was designed in such a way that it would tolerate a temporary connection downtime. Such as with progressive enhancement, an additional layer is added to the stack, where synchronization with the servers only takes place when a network has been detected. This would prevent the application from crashing when the user gets disconnected.
Jake therefore used HTML5 AppCache and Offline Storage to store event information offline, and made sure the app worked across a variety of different devices.
As he says, the challenge of designing such an application is huge, and can only be accomplished when you start designing your software "Offline first", because the amount of work that goes into rewriting every single line of code to add offline capabilities would otherwise be too much.
Caolan McMahon about solving "Offline first" with hood.ie
The guys from from the Changelog, Andrew Stacoviak and Adam Thorp, recently talked about "Offline First" in the last episode of their podcast. They interviewed Caolan McMahon from hood.ie to talk about designing web applications with the help of their new framework.
One of the outstanding features of hood.ie is that it automatically and by default stores data on the client side and synchronizes it with the server only when a connection is being detected.
By building web apps using its API, you can create robust interfaces without having to worry about persistence topics like localStorage and application cache on the frontend side or backend implementation details like API endpoints or databases configuration.
On their website, you'll find information on how to install hood.ie from the command line and a quick intro tutorial which covers its basic features.
Other Community solutions
Thanks to the growing browser support for natively provided features such as HTML5 Appcache and localStorage it has become a lot easier for developers to build offline-friendly applications. Although being quite a new paradigm, there are already a few other intents of putting it into practice.
- SyncIt: A library to leverage offline capabilities for web apps
- “Offline” by Hubspot: A library to automatically detect when your application goes offline
- jQuery Offline: An add on for jQuery built on the HTML5 localstorage API
- HTML5 Offline: A Rack and Rails plugin for building offline web applications
Conclusion
Personally, I love the idea and hope that more community members are going to support it. However, being a programmer myself I know how cumbersome it can be to integrate it into your workflow, and especially adding this feature to existing software.
Although we still don't have complete support for offline capabilities in all browsers and there are only a few tools so far to abstract away the complicated implementation details, I think there is a decent amount of people on the web who appreciate the idea and try pushing things forward.
I hope that major companies like Google or Facebook are going to set an example by implementing "Offline First" capabilities into their products just as they did a few years ago with Progressive Enhancement. In this case, many others would follow and facilitate a more offline-friendly ecosystem of apps and websites.