Let's Welcome Offline First
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.
Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
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.
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.
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Like This Article? Read More From DZone
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.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}