Tutorial Chat Web App Client (PWA) Demonstrating Advanced Web APIs (WebSockets, Service Workers, Web Push, and IndexedDB)

Quick Info

Live Demo: Tutorial Chat Web App (PWA) ↗ (Deployed on free tier Netlify)

Contents

Introduction

This tutorial chat app 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 strictly 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 Vite build tool is used only for environment variable support and JavaScript minification.

The backend is an intentionally minimal "delayed 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 programming part of the client is as needed for real-time communication with a server over WebSockets.

Instructions To Test Offline, Background, And Push Features Of App

This section is to be done.

Author

Author: Ravi S. Iyer with assistance from Gemini 3.1 Pro
Date: 23 June 2026

Comments

Post a Comment