We are all living in a connected world. We have access to our personal computer, smart phone and Tablet. We want seamless experience across the channels. Let us take a scenario. You are trying to upload a document into Dropbox. The uploading process is almost 95% completed. Suddenly your internet got disconnected. Another scenario where you are trying to register with an application using multi page sign up form. You are at last step to finish your registration. Again, suddenly the internet is disconnected. Definitely you might come across with these kind of frustrated moments. Even though we are all having better internet connection and better band width, still we are facing these kind of incidents frequently. To handle these kind of unknown glitches, to provide better user experience to the users, the teams are coming up with “Offline First” web paradigm.
Till now we are all considering dis-connectivity as an error scenario and handling it gracefully(rollback transaction) by providing error message to the user. This is no more with “Offline First“. If the internet is not available, store the information in the local storage. When the device is connected to the internet, synchronize the local storage with the server. That is, the client side web/mobile app should have the capability to store the information at the client side local storage(like browser local storage, mobile app cache etc…), it should have the capability to detect the internet connectivity and then it should have a synchronizer application to push the client side stored content into server side. The steps are depicted in the below diagram.
By this time you might got lot of questions into your mind about “Offline First“. Below are few of the questions which I got when I first heard about this.
- What information would be stored in the local storage? What about the security of my information? Because the client side storage will give access to others.
- What would be the UX to indicate the dis-connectivity of the internet?
- Is it safe to store information like usernames, passwords, credit cards, bank accounts etc… sensitive information? What about encryption?
- How safe to access these kind of applications from public computers where multiple users will access the same device?
- How are we going to handle technical challenges like, user is in the process of registering with the application from the desktop. Suddenly the internet gone. User went ahead and completed the registration using mobile network from the smart phone. Later the desktop got the internet connection. What would be the system reaction for this?
In addition to the above said queries, you might have other queries. Any new exploration will start the journey with lot questions. The research/queries/answers can be found by following the discussion/events on “Offline First” at http://offlinefirst.org/
Even though the “Offline First” is a new concept, there are few people putting it into practice. You can find the links below.
- Google Chrome – Offline First
- jQuery Addon
- hood.ie initiatives
- HTML5 Offline
- https://hacks.mozilla.org/2012/11/offline-first-better-html5-user-experience-prefetching-resources-social-media-sizing-cheat-sheet-hacks-weekly/
Siva Janapati is an Architect with experience in building Cloud Native Microservices architectures, Reactive Systems, Large scale distributed systems, and Serverless Systems. Siva has hands-on in architecture, design, and implementation of scalable systems using Cloud, Java, Go lang, Apache Kafka, Apache Solr, Spring, Spring Boot, Lightbend reactive tech stack, APIGEE edge & on-premise and other open-source, proprietary technologies. Expertise working with and building RESTful, GraphQL APIs. He has successfully delivered multiple applications in retail, telco, and financial services domains. He manages the GitHub(https://github.com/2013techsmarts) where he put the source code of his work related to his blog posts.
Smart Techie 
Thank you for sharing your thoughts. I truly appreciate your efforts.