About This App

This tutorial chat application demonstrates how to build resilient real-time communication web clients using Advanced Web APIs (WebSockets, Service Workers, Web Push and IndexedDB). It is designed as a responsive Progressive Web App (PWA) that functions on desktop and mobile devices.

Core Features:

Stateful WebSockets: Instead of short-lived HTTP requests, uses WebSockets for long-lived, bidirectional communication, while gracefully managing lifecycle events like offline drops, network restorations, and server outages.
App Shell Caching: Using a Service Worker with a Network-First/Cache-Fallback strategy for offline app loading (App UI is shown to user even when offline).
IndexedDB Message Queueing: Acting as a reliable, offline-capable write-ahead log and persistent chat history store.
Foreground Sync: Automatically sending pending client messages to the server when the open application regains connectivity with the server (using WebSocket auto reconnect with exponential backoff).
Background Sync: Sending pending client messages when the network returns, even if the application has been closed by the user.
Web Push Notifications: Subscribing to push notifications on user request and handling server push notification responses.
Cloud Deployment Workarounds: Overcoming real-world hosting quirks, such as server cold starts, ephemeral disk wipes, load balancer proxy masking, and delayed socket closures.

To maximize educational value, this client is coded in plain JavaScript and avoids heavy abstractions like Socket.IO or Google Workbox, as well as UI frameworks like React. It interacts directly with raw browser APIs, with the single exception of the lightweight idb library (used primarily to enable modern async/await syntax for IndexedDB). This "zero-magic" approach exposes the exact underlying mechanics of modern web capabilities.

All Advanced Web APIs used in this app are documented as fully supported by Chromium-based browsers (like Chrome and Edge), and the app has been validated using Google Chrome on Windows 11 desktop PC and Android 12 mobile (Samsung M21). With the exception of the Background Sync API, all other Advanced Web APIs used by the app are documented as being fully supported by other major browsers like Firefox and Safari.

The app can be installed as a standalone full-screen Progressive Web App (PWA) on mobile (verified on Android) and as a standalone PWA app on desktop as well (verified on Windows 11).

The Vite build tool is used only for environment variable support and JavaScript minification.

The backend is an intentionally minimal "delayed uppercase echo server" developed using node.js and libraries like express and ws. Its sole purpose is to easily test the above client's features. With a server-side artificial 5 seconds delay, the app does not show real-time communication. But if the artificial delay of 5 seconds is removed then the client-server send and receive messages are in real-time. So the client code is as needed for real-time communication with a server over WebSockets.

Note: For instructions on how to test these offline, background, and push features of the app, and how to install it as a standalone PWA app, please see the companion blog post section ↗ . (Requires an active internet connection—the blog post is not cached for offline viewing).