DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > 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.

Siva Prasad Rao Janapati user avatar by
Siva Prasad Rao Janapati
·
Mar. 08, 16 · Web Dev Zone · Opinion
Like (2)
Save
Tweet
6.55K Views

Join the DZone community and get the full member experience.

Join For Free

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.

  • 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/
mobile app Internet (web browser)

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.

Popular on DZone

  • 6 Things Startups Can Do to Avoid Tech Debt
  • How to Submit a Post to DZone
  • How to Generate Fake Test Data
  • Composable Architecture

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo