Using WebSocket, Service Worker, Push and Background Sync Advanced Web APIs in a Plain JavaScript Tutorial Echo Chat Client App

Recently, through a tutorial echo chat client app I developed, I was pleasantly surprised to experience the features of advanced web API of WebSockets, Service Workers & IndexedDB, Background Sync API and Web Push API available in Chromium based browsers like Chrome and Edge. Note that these features are provided directly by the browser and accessible via plain HTML and JavaScript. We do not need external libraries and frameworks to access them.

The advanced web API features mentioned above, with the exception of WebSockets, are considered to be part of Progressive Web Apps (PWAs).

I need to mention here that I got back to industry-level software development in 2024 after a gap of over 20 years and my first very limited exposure to developing a minimal PWA app with PWA functionality provided by default by Create React App tool, was in March 2024. Details

So when I developed this tutorial echo chat client app, I was quite astonished to see how many device platform capabilities were available to the web developer to use through browser level Web APIs! Further, all of these device platform capabilities with sole exception of Background Sync API which is limited to Chromium based browsers, are said to be available in all major browsers (Chrome, Edge, Firefox, Safari etc.) on desktop computers and on mobile, across a variety of operating systems. The browser seems to have become a cross-platform virtual operating system and web developers have access to immense capabilities of modern client devices through modern browsers and their features of various workers like Web Workers and Service Workers (separate threads from main thread) with sophisticated communication and data sharing mechanisms between them (including simple messaging and structured cloning, broadcast channels, transferrable objects, shared memory and atomics API to handle thread concurrency issues). WebSockets bringing bidirectional long-lived communication (like BSD sockets) and sophisticated Push notifications with lot of infrastructure support for it being provided free by Big Tech companies add to these great features available to web developers.

The tutorial echo chat client app leverages:

  • WebSockets for seamless bidirectional communication.
  • Service Workers & IndexedDB for robust offline caching and message queueing.
  • Background Sync API to transmit messages even after the app is closed.
  • Web Push API for system-level notifications.

The backend for this app 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.

If you are interested, you can check out the tutorial echo chat client app.

My return to industry software dev after 20 years and my first exposure to PWA dev

I started my journey back to industry-level software development work in June 2023 after a gap of over 20 years, with the first industry-level software project starting in October 2024. My last industry stint ended in Sept. 2002. I did teach programming courses at M.Sc. and M.Tech. level from 2003 to 2011 but that did not need me to delve much into Web API enhancements. From 2012 onwards I was not doing any programming related activity till June 2023.

My first exposure to Progressive Web Apps (PWAs) was in March 2024 through a React app created with CRA. It automatically included some boilerplate PWA configurations that I was not interested in learning about at that stage. But I noted that entering the app URL in Chrome on Android, resulted in Chrome providing me an install option. Choosing that option resulted in the app being added in App folder. The standout feature was that tapping the app-icon in App folder or Home screen, would open the app as a standalone full screen app without Chrome browser address bar. However, IIRC, it completely lacked true offline caching, background synchronization, or push notifications. I did do some quick reading up on PWA then but did not get into details and did not do any PWA related programming then. My related March 2024 blog post

I must also mention that later, CRA seems to have stopped providing PWA support by default in React apps. I believe PWA support had to be specifically requested through a command line argument. Now anyway CRA itself is deprecated for React apps. Vite does not seem to provide PWA support by default.

My first exposure to developing an app that supported web notifications was in December 2024 using Firebase Cloud Messaging, but that implementation relied on Firebase-specific wrappers and had limited exposure to the native browser Push API. I also had to rely on a Firebase project for VAPID keys setup and testing sending notifications to a web client. I came under the wrong impression that Web Push notifications needed a project on a cloud provider (like the Firebase project I created). I did not know about the standard open-source web-push package which could be used to generate VAPID keys and, when used with a simple node express server, send notifications to a web client. My related Dec 2024 blog post

Comments

Post a Comment