Skip to main content

Breaking open https://web.whatsapp.com/

Today whatsapp have launched an online/web version of their overly popular smartphone messaging app.

I was very much interested in seeing the architecture of this app because as far as i knew, they never stored messages on their server but all the data was only stored in users phone. So I started to look under the hood of the webapp and what I saw was a beauty.

First let me list down the frameworks they have used in creating this app:


  1. React.js : A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES from Facebook.
  2. Underscore.js : Unerscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and Backbone's suspenders.
  3. Velocity.js : Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.
These are the major pieces. They have been using secured websockets for communication with your phone through there server. I wonder why they didn't use webrtc's dataChannel there? Hmmm as I ask this question answer became clear, because only android would have supported that.

They are using Chrome's FileSystem Api which makes their application Chrome specific. In this case even data channels could have been used, as it negates the previous argument. I think the reason for not using WebRtc based data channel is to avoid difficulty of setting up the initial connection, which websockets are solving by putting a server in between.

They seem to be using Google Material Design principles.


So, I see they have modified form of XMPP present in there chat protocol and they are forwarding stanzas which there phone receives to the webclient. So, to use the webclient phone should be on and working. And every communication that happens on webclient actually would go via your phone. So, webclient is a just a proxy  UI  Remote Client for your phone.

What does this means?
  • More data transfer over phone. Check your data usage.
  • More  battery consumption because of data transfer.
Though the web-client of whatsapp makes our life easier, it does comes at a cost.

Going ahead I would try to see if I can write some sort of chrome plugin which can get me some data out of Wa object of js and store the data on my server. Keeping my fingers crossed. Though i think i can still write a dumb plugin to parse html and get me the data, but let me first attempt a more elegant solution if possible.


Edit: How does initial handshake takes place?


So you open the webclient and you see a qr code, how does that happen? What happens in the background?


See the above image, it would explain the steps:


  1. It first sent the details of the current client, os, browser and session id. 
  2. Then it sent the stored session details about the connected client.
  3. It got 401 unauthorized request from the server saying that current session is logged out and it needs to create a new one.
  4. I think the the third frame is the ttl frame.
When using your client you scan the QR code, the mobile client connects over websocket to the same channel as specified by the qr code and then sends its initial info.
See the frames recieved on the webclient below:




The selected frame is the most interesting one as it has all the data from the mobile client to the web client.

s1,["Conn",{"ref":"@4O46ffWiLT9bwxmLw4ilte86YFX6TKe+lCpNmN3J9bPQcc7/1Va2tr86","wid":"919844186612@c.us","connected":true,"isResponse":"false","serverToken":"GBH8CFMxtifHo2C6aFZN52C55HWRpALj+n/H4GQs/27y9okIPaCwIClP/M4rJe0ntzHY/fYAZYsIlnzxcu06qDGvve+o6W++FzHlrZb07SYko6wFcDAy6YRQSOm3w6zf","browserToken":"9qy+sI5tqMlxnbViLjET9gM/tt/wOzB23nHlySDPvn6RGFe6G4vj//ItYnU76gHTBPYx88oulI9ggI55L3XH7kpXarbYT1wNgUCMbUnRigTC7EdnfgUDMIFxbcy+rc/DxLe4pIl7cE9wQZV4V1WFeA==","clientToken":"RUZB+rzOCWc5TlxBgIUut5ligZSxKR99eJmtIxfrpFk=","lc":"US","lg":"en","is24h":true,"secret":"vDHtvSzOHNYp0luwrnnV6ycc50luz2sLCM7SDcCNyBZ+aUIQNHh80s6dePcFhfO1QTkYC2dZT9BmZ/GGCsT4NSbP3zdoZCqB3oLrCNbsi0PHGWx/jxuyr2qgrvpxxCcH+O/gqo5S5N356f6icOpuSjZfZDKZ+DbT28/pfycG0qAFaIZ2sDAorHendgtfVk6y","protoVersion":[0,3],"battery":42,"plugged":false,"platform":"android"}]

As you can see the info also has battery state and is the phone charging or not also sent in this frame.
I hope, I answered your question.

Popular posts from this blog

Why India Hasn’t Built Its GPT Moment (Yet)

India has the world’s third-largest startup ecosystem, a thriving developer base, and a mobile-first population larger than the US and Europe combined. Yet, no GPT-4. No DeepMind. No Amazon-style platform. Why? Innovation Isn’t Accidental—It’s Engineered The Zerodha Daily Brief recently asked why India hasn’t built a global product company like Apple. The key argument: India isn’t building for the world. It’s solving for local constraints, scale, and affordability—but global scale requires deep IP, design, and tech differentiation. It’s not just about software, it’s about systems thinking. More importantly, it answers the question: Why do countries innovate? The answer isn’t just genius or ambition—it’s incentives and ecosystems. The U.S. Defense Department, for example, accounted for nearly 70% of federal R&D funding during the Cold War. China has pumped billions into semiconductors and AI with long-term national alignment. These aren’t short-term bets—they are strategic, delibe...
Read more

The Death of the Stubborn PM

Product Management is undergoing a seismic shift, much like programming did when compilers replaced assembly language or when Agile dismantled waterfall dogma. Stubborn PMs who cling to outdated rituals—like treating PRDs as sacred texts—will fade into irrelevance. The future belongs to those who embrace AI as a collaborator, not a threat.   AI Will Disrupt the Tactics, Not the Thinking   Historically, tools abstracted manual work: compilers automated code translation, A/B testing replaced gut-driven debates. Similarly, AI will automate tactical PM tasks—data aggregation, routine prioritization, even drafting specs. But this is liberating, not limiting.   The stubborn PM obsesses over *how* to write a PRD; the adaptive PM focuses on *why* a product should exist. AI can’t replicate judgment calls that demand intuition: interpreting unmet customer needs, balancing ethics with growth, or navigating ambiguity when data is sparse. As AI handles execution, the PM...
Read more

From Stubborn to Smart: How I Learned to Use AI as a PM

Listen to the article in podcast format on PM-AI Diaries channel on Spotify! Ever since I published "The Death of the Stubborn PM" back in February, my inbox has been buzzing with one big question: “Okay, I get that AI is the future for product managers—but how do I actually use it?” It’s a fair ask. In that piece, I argued that PMs who resist AI are doomed to fade away, like dinosaurs refusing to evolve. As I wrote, “The stubborn PM who clings to old ways will die out, replaced by those who harness AI’s power while leaning into what makes us human.” Now, people want the playbook. So, let’s walk through it with a story—my own journey of figuring this out, backed by some sharp insights from MIT Sloan’s "When Humans and AI Work Best Together—and When Each Is Better Alone" . The Wake-Up Call Picture me a few months back: a PM buried in work, juggling a dozen tasks, and feeling like there weren’t enough hours in the day. Writing user stories, sketching ideas, track...
Read more