WhatsApp is one of the most popular messaging apps in the world, with over 2 billion users. The app allows users to send messages, photos, videos, documents and make voice and video calls for free. While WhatsApp started as a mobile app, desktop versions were later developed for macOS and Windows operating systems to provide a seamless experience across devices.
What is WhatsApp Desktop?
WhatsApp Desktop is the desktop client for the WhatsApp messaging service. It allows users to send and receive WhatsApp messages right from their computer. The desktop application mirrors conversations and messages from the user’s mobile device. This enables users to continue conversations seamlessly between their phone and computer.
Some key features of WhatsApp Desktop include:
- Send and receive messages
- Send photos, videos, documents, and Voice Messages
- Make WhatsApp Calls
- Notifications and pop-up messages
- Synced chats from mobile device
- Desktop specific features like keyboard shortcuts
WhatsApp Desktop is available for Windows 10 64 bit version 1903 and macOS 10.13 and newer versions. It is synchronized with the mobile app and requires a QR code scan to link the desktop app to the user’s WhatsApp account.
What programming language is WhatsApp Desktop written in?
WhatsApp Desktop applications for both Windows and macOS are built using Electron framework. Electron allows creating cross-platform desktop applications using web technologies like JavaScript, HTML and CSS. Many popular desktop apps like Visual Studio Code, Slack, Discord etc. are also built with Electron.
Specifically, WhatsApp Desktop is written in JavaScript, HTML and CSS.
JavaScript
JavaScript is the core language used to build the functionality and business logic of WhatsApp Desktop. JavaScript interacts with the Electron framework to handle desktop specific features and access operating system APIs. Popular libraries like React and Redux are used for building the UI components in WhatsApp Desktop.
HTML
HTML provides the structure and content of UI elements in WhatsApp Desktop. HTML documents are rendered using Chromium engine to display the chat interfaces, menus, settings and other components.
CSS
CSS (Cascading Style Sheets) is used for styling the HTML content and building responsive UI components in WhatsApp Desktop. CSS defines the visual layout – colors, fonts, spacing for chat bubbles, menus and other design elements.
Why Electron framework is used for WhatsApp Desktop?
WhatsApp chose Electron framework to build the desktop apps for several key reasons:
- Cross-platform support – Electron apps can be built for Windows, macOS and Linux using JavaScript. This allowed WhatsApp to build both Windows and macOS apps with a shared codebase.
- Native experience – Electron uses Chromium and Node.js to provide fast, fluid experience on the desktop platforms.
- Reuse web skills – WhatsApp web developers could leverage their existing knowledge of web technologies like JavaScript, CSS and HTML.
- Sync with mobile – The messaging sync between mobile and desktop is handled seamlessly with Electron.
- Active community – Electron has a large open source community continuously improving the framework.
Additionally, Electron provided the performance, capabilities and flexibility needed for building a robust desktop messaging app while reusing existing web development skills.
What are the benefits of using JavaScript, HTML and CSS?
Building WhatsApp Desktop with JavaScript, HTML and CSS provided several advantages:
- Faster development – The developers were already familiar with these web technologies, allowing faster iteration.
- Cross-browser compatibility – HTML, CSS and JavaScript work consistently across different desktop browsers like Chrome, Edge, Firefox etc.
- Vibrant ecosystem – Many reusable libraries for UI, graphics, animations are available for web technologies.
- Dynamic and responsive UI – JavaScript enables creating interactive interfaces that adapt to different desktop screen sizes.
- Full customization – The developers had finer control over UI by manipulating the DOM through JavaScript.
- High performance – JavaScript engines like V8 provide near native code execution speeds.
Overall, the combination of proven web technologies and access to OS functionality through Electron framework was optimal for delivering a high quality WhatsApp Desktop app.
How WhatsApp Desktop syncs chats from mobile?
A key feature of WhatsApp Desktop is that it seamlessly syncs all chats and messages from the user’s mobile app. This allows users to continue conversations across devices.
The chat sync works through the following process:
- User scans the QR code on WhatsApp Desktop using their mobile app to link the devices.
- This establishes end-to-end encryption keys to secure the communication between the devices.
- Once linked, the desktop app contacts the WhatsApp servers to retrieve the chat history and contact list for the user.
- The desktop app maintains a real-time WebSocket connection with the mobile app.
- As the user sends and receives new messages on mobile, they are synced to the desktop app over the WebSocket.
- Similarly, any messages sent from desktop are synced to the mobile client.
- This bidirectional sync allows the user to seamlessly switch between devices.
The WhatsApp desktop engineers used the sync technology in Electron and customized it to build synchronization suitable for messaging. The combination of desktop app, mobile app and WhatsApp servers enables robust and secure sync across platforms.
How WhatsApp Desktop handles notifications?
WhatsApp Desktop provides notifications to stay on top of new messages even when the app window is not focused. The notifications appear as pop-ups, banner alerts and are well integrated into the desktop platforms.
On Windows, WhatsApp desktop notifications use the built-in Windows notification system through the Electron framework.
On macOS, they leverage the Apple Notification Center to display native notifications.
When the desktop app receives new messages from the sync, it triggers these notification platforms to display an alert to the user. The notifications are configured to not disrupt the user from another active desktop app.
From a technical perspective, the WhatsApp engineers handle notifications through these steps:
- Register the desktop app to receive message sync events from WebSocket.
- Detect new messages and format the content into a notification payload.
- Check if Windows or macOS to select the notification platform.
- Display the native notification using Electron’s or macOS’s notification APIs.
- Allow user to click notifications to open chat or dismiss them.
Well integrated notifications are critical for any messaging app and WhatsApp’s use of native desktop notifications provides a seamless experience.
How does WhatsApp handle multimedia on Desktop?
WhatsApp allows sending and receiving diverse media like photos, videos, documents and voice messages. WhatsApp Desktop fully supports all these multimedia capabilities.
For media sent from mobile devices, they are seamlessly synced to the desktop app over WebSocket connection. The desktop app detects the type of media and renders it appropriately.
For media sent from desktop, WhatsApp Desktop offers native operating system dialogs for uploading files. It sends the multimedia payload to the WhatsApp backend infrastructure which relays it to the recipient mobile device.
Some technical capabilities include:
- Photo viewer – Displays high resolution images with zooming and pan capabilities.
- Document renderer – Supports viewing DOC, PDF, PPT and other documents formats natively.
- Audio player – Plays voice messages recorded on WhatsApp.
- Video player – Streams and renders MP4 and other video files.
- File uploader – Sends any file type after user selects through OS file picker.
WhatsApp leverages Chromium, HTML5 APIs and other OS capabilities to handle multimedia without requiring external apps or plug-ins. This provides a fast and integrated desktop experience.
How does WhatsApp implement encryption on desktop?
End-to-end encryption is an essential feature to secure user chats and media. WhatsApp implements encryption across both mobile and desktop clients.
The encryption workflow is:
- When desktop app is linked by scanning QR code, encryption keys are exchanged with mobile app.
- This establishes unique user keys for the desktop-mobile pair.
- Messages sent from mobile are already encrypted. Desktop receives and decrypts them.
- For outgoing desktop messages, they are encrypted using the user keys before syncing to mobile.
- The encrypted payload is decrypted by the recipient’s mobile app only.
- Media like photos and videos are also encrypted end-to-end in the same way.
All encryption is handled at the application layer by WhatsApp software. The underlyingsync uses TLS connections for transport security.
User keys are stored securely and not backed up by WhatsApp. If desktop app is reinstalled, a new QR code scan reestablishes encryption keys.
This combination of encryption domains, software and transport security provides robust end-to-end protection of messages.
How WhatsApp Desktop is updated?
WhatsApp frequently rolls out new features and updates to the Desktop app. There are two mechanisms used for updates:
- Auto-updates – For small bug fixes and security patches, WhatsApp Desktop apps automatically update themselves in the background.
- Manual updates – For bigger feature updates, users are notified to manually download and install the latest version.
The auto-update capability is powered by a framework called Electron Builder which packages and distributes the update files. When the desktop app is running, it periodically checks with the update server for any new releases.
If available, it downloads the update, checks its integrity, replaces the current executable and dynamic libraries with the latest files seamlessly.
For major updates, full new app installers are offered to avoid in-place upgrade failures. The update notification leads the user to download the latest full installer.
Using a combination of auto-updates and manual installs provides reliable and secure app upgrades.
What are the main user interface components?
WhatsApp desktop UI is designed to mirror mobile experience while adapting to desktop platforms. Some key UI components are:
- Chat screen – Shows message timeline, input box, emoji picker similar to mobile.
- Sidebar – Displays contacts list, settings, and other menus.
- Notification pop-ups – Notifies new messages outside the chat screen.
- Multimedia viewers – Renders images, videos and files in separate windows.
- Desktop menus – Provides app menus for preferences and OS specific options.
- Context menus – Right click menus for chat list and messages.
WhatsApp engineers leverage CSS frameworks, custom components and operating system UI widgets to build an intuitive interface. HTML and JavaScript power the responsive front-end.
How does WhatsApp optimize desktop performance?
WhatsApp Desktop is optimized extensively to provide a smooth and speedy experience even on low powered PCs. Some performance techniques used are:
- Disk I/O optimization using IndexedDB instead of local files.
- Message archiving to restrict memory usage.
- DOM manipulation optimization and virtual scrolling.
- JavaScript execution optimization and caching.
- Debugging, profiling and fixing performance bottlenecks.
- Third party library optimization and lazy loading.
- Limiting battery usage and background resource utilization.
In addition to app optimization, the underlying Chromium engine and Node.js runtime provides native accelerated execution.
WhatsApp keeps improving performance with each release by adopting new technologies like WebAssembly and WebCodecs.
Conclusion
WhatsApp Desktop leverages proven web technologies – JavaScript, HTML and CSS to deliver a fast, consistent and native messaging experience across Windows and macOS. The use of Electron framework and encrypted chat synchronization allows WhatsApp to reuse their mobile development efforts while providing key desktop capabilities. Performance is continually improved to make WhatsApp Desktop feel light, responsive and instantly accessible. The multiplication of platforms serves to bring users across the globe closer together through seamless messaging.