Over a million developers have joined DZone.

Let's Welcome Offline First

In a world where online connectivity is always expected but often spotty, it's time we start looking to offline solutions. Check out this quick introduction to the "Offline First" web paradigm.

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

We are all living in a connected world. We always have access to either our personal computer, smart phone, and/or tablet. We want a seamless experience across all channels. Let's look at a scenario. Imagine, you are trying to upload a document into Dropbox. The uploading process is almost 95% completed. Suddenly, your internet gets disconnected. Or, imagine another scenario where you are trying to register with an application using a multi-page sign up form. You are at the last step to finish your registration, when again, suddenly the internet is disconnected. There's a good chance you might come across one of these frustrating moments. Even though internet connection and bandwidth are improving, still we are facing these kinds of incidents frequently. To handle these kinds of unknown glitches, to provide better user experience to the users, teams are coming up with an "Offline First" web paradigm.

Until now, we are all considering disconnectivity as an error scenario and handling it gracefully (rollback transaction) by providing error messages 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 on the client-side local storage (like browser local storage, mobile app cache, etc.) and 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 to the server-side. The steps are depicted in the below diagram.

Offline First

By this time, you may have lots of questions in your mind about “Offline First“. Below are a few of the questions which I had when I first heard about this.

  • What information would be stored on 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 disconnectivity of the internet?
  • Is it safe to store information like usernames, passwords, credit cards, bank accounts, and other sensitive information? What about encryption?
  • How safe is it to access these kinds of applications from public computers where multiple users will access the same device?
  • How are we going to handle technical challenges, like when the user is in the process of registering with an application from the desktop. Suddenly, the internet is gone. The user went ahead and completed the registration using a mobile network from a smart phone. Later the desktop got the internet connection. What would be the system reaction for this?

In addition to the questions stated above, you might have other queries. Any new exploration will lead you down a rabbit hole filled with lots of questions. The research/queries/answers  can be found by following the discussion/events on "Offline First" at http://offlinefirst.org/

Even though "Offline First" is a new concept, there are few people putting it into practice. You can learn more using the links below.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

offline web application

Published at DZone with permission of Siva Prasad Rao Janapati, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}