Progressive Web Apps: Offline-First with Service Workers

Progressive Web Apps: Offline-First with Service Workers

Progressive Web Apps (PWAs) are web applications that work offline, load instantly, and feel like native apps. Service Workers are scripts running in background that intercept network requests, enabling offline functionality, push notifications, and background sync. PWAs combine responsive design, HTTPS, Service Workers, Web App Manifests, and app-like user experience.

Service Worker Basics

Service Worker is a JavaScript file running in separate thread, independent of web page. It acts as proxy between app and network. When network request made, Service Worker intercepts it and can: serve from cache (offline), fetch from network (online), serve hybrid response combining both. Service Worker persists between page reloads and browser sessions. Install and activate only once per version. Updates checked automatically on each page load.

Service Worker Lifecycle

Registration: navigator.serviceWorker.register('sw.js'). Browser downloads and parses service worker script. Install event fires: sw.addEventListener('install', event => { event.waitUntil(caches.open('v1').then(...)); }). App can cache resources during install. Activate event fires: sw.addEventListener('activate', event => { event.waitUntil(/* cleanup */ ); }). Remove old cache versions. Fetch event: sw.addEventListener('fetch', event => { event.respondWith(/* serve response */ ); }). Intercepts network requests and serves responses.

Caching Strategies

Cache First: Check cache first; if found, return cached version. Only fetch from network if not cached. Fast but may serve stale data. Use for static assets. Network First: Try network first; if fails, fallback to cache. Always fresh data if online; works offline with stale data. Use for dynamic content. Stale While Revalidate: Return cached version immediately; simultaneously fetch fresh version in background and update cache. Best user experience. Use for frequently changing content. Cache Only: Always serve from cache; never fetch from network. Use for assets guaranteed to be in cache.

Implementation Example

Register service worker: if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js'); }. Service worker file (sw.js): const CACHE_NAME = 'v1'; const urlsToCache = ['/', '/index.html', '/styles.css', '/script.js']; self.addEventListener('install', event => { event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))); }); self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request).then(response => response || fetch(event.request))); }); This implements cache-first strategy for all resources.

Offline Functionality

With proper caching, entire app works offline. User navigates to cached pages; views previously loaded content. Background sync queues user actions (form submissions, data creation) when offline. When connection restored, queued actions automatically sync: navigator.serviceWorker.ready.then(reg => reg.sync.register('tag-name')); self.addEventListener('sync', event => { if (event.tag === 'tag-name') { event.waitUntil(syncDataWithServer()); } }); Push notifications work offline too: self.addEventListener('push', event => { const notification = event.data.json(); self.registration.showNotification(notification.title, notification.options); }).

Web App Manifest

Create manifest.json: { "name": "My App", "short_name": "App", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }] }. Link in HTML: . Enables: Install app to home screen, full-screen launch without browser chrome, splash screen during startup, theme colors. On Android, PWA installs like native app.

Advanced Caching

Cache versioning: Use CACHE_NAME = 'v1', 'v2', etc. On new deployment, update version number. Old caches cleared in activate event: self.addEventListener('activate', event => { event.waitUntil(caches.keys().then(names => Promise.all(names.map(name => name !== CACHE_NAME && caches.delete(name))))); }). Selective cache deletion: Delete specific resources when stale. Pre-cache critical resources for instant load on first visit. Post-cache non-critical resources on-demand as users browse.

Performance Metrics

First Contentful Paint (FCP): Time to show first content. Service Worker caching dramatically reduces FCP. Largest Contentful Paint (LCP): Time to show main content. Offline-first eliminates network latency. Time to Interactive (TTI): Time until page responds to input. Pre-cached CSS and JavaScript enable instant interactivity. Cumulative Layout Shift (CLS): Measure visual stability. Pre-load resources to prevent layout shifts.

Debugging and Monitoring

Chrome DevTools: Applications tab → Service Workers shows registered workers, cache contents, and storage. Network tab shows which requests hit cache vs network. Test offline: mark "Offline" checkbox to simulate offline state. In production, monitor Service Worker errors with error logging. Track cache hit rates; high hit rate indicates good performance. Monitor push notification delivery rates. Test on real 3G/4G networks to verify offline experience. Set up monitoring alerts for Service Worker failures.

From Concept to Reality: Progressive Web Apps: Offline-First with Service Workers

In the professional world, the difference between a good engineer and a great one often comes down to understanding fundamentals deeply. Anyone can copy code from Stack Overflow. But when that code breaks at 2 AM and your application is down — affecting millions of users — only someone who truly understands the underlying concepts can diagnose and fix the problem.

Progressive Web Apps: Offline-First with Service Workers is one of those fundamentals. Whether you end up working at Google, building your own startup, or applying CS to solve problems in agriculture, healthcare, or education, these concepts will be the foundation everything else is built on. Indian engineers are known globally for their strong fundamentals — this is why companies worldwide recruit from IITs, NITs, IIIT Hyderabad, and BITS Pilani. Let us make sure you have that same strong foundation.

How the Web Request Cycle Works

Every time you visit a website, a precise sequence of events occurs. Here is the flow:

    You (Browser)          DNS Server          Web Server
        |                      |                    |
        |---[1] bharath.ai --->|                    |
        |                      |                    |
        |<--[2] IP: 76.76.21.9|                    |
        |                      |                    |
        |---[3] GET /index.html ----------------->  |
        |                      |                    |
        |                      |    [4] Server finds file,
        |                      |        runs server code,
        |                      |        prepares response
        |                      |                    |
        |<---[5] HTTP 200 OK + HTML + CSS + JS --- |
        |                      |                    |
   [6] Browser parses HTML                          |
       Loads CSS (styling)                          |
       Executes JS (interactivity)                  |
       Renders final page                           |

Step 1-2 is DNS resolution — converting a human-readable domain name to a machine-readable IP address. Step 3 is the HTTP request. Step 4 is server-side processing (this is where frameworks like Node.js, Django, or Flask operate). Step 5 is the HTTP response. Step 6 is client-side rendering (this is where React, Angular, or Vue operate).

In a real-world scenario, this cycle also involves CDNs (Content Delivery Networks), load balancers, caching layers, and potentially microservices. Indian companies like Jio use this exact architecture to serve 400+ million subscribers.

Real-World System Design: Swiggy's Architecture

When you order food on Swiggy, here is what happens behind the scenes in about 2 seconds: your location is geocoded (algorithms), nearby restaurants are queried from a spatial index (data structures), menu prices are pulled from a database (SQL), delivery time is estimated using ML models trained on historical data (AI), the order is placed in a distributed message queue (Kafka), a delivery partner is assigned using a matching algorithm (optimization), and real-time tracking begins using WebSocket connections (networking). EVERY concept in your CS curriculum is being used simultaneously to deliver your biryani.

Object-Oriented Programming: Modelling the Real World

OOP lets you model real-world entities as code "objects." Each object has properties (data) and methods (behaviour). Here is a practical example:

class BankAccount:
    """A simple bank account — like what SBI or HDFC uses internally"""

    def __init__(self, holder_name, initial_balance=0):
        self.holder = holder_name
        self.balance = initial_balance    # Private in practice
        self.transactions = []            # History log

    def deposit(self, amount):
        if amount <= 0:
            raise ValueError("Deposit must be positive")
        self.balance += amount
        self.transactions.append(f"+₹{amount}")
        return self.balance

    def withdraw(self, amount):
        if amount > self.balance:
            raise ValueError("Insufficient funds!")
        self.balance -= amount
        self.transactions.append(f"-₹{amount}")
        return self.balance

    def statement(self):
        print(f"
--- Account Statement: {self.holder} ---")
        for t in self.transactions:
            print(f"  {t}")
        print(f"  Balance: ₹{self.balance}")

# Usage
acc = BankAccount("Rahul Sharma", 5000)
acc.deposit(15000)      # Salary credited
acc.withdraw(2000)      # UPI payment to Swiggy
acc.withdraw(500)       # Metro card recharge
acc.statement()

This is encapsulation — bundling data and behaviour together. The user of BankAccount does not need to know HOW deposit works internally; they just call it. Inheritance lets you extend this: a SavingsAccount could inherit from BankAccount and add interest calculation. Polymorphism means different account types can respond to the same .withdraw() method differently (savings accounts might check minimum balance, current accounts might allow overdraft).

Production Engineering: Progressive Web Apps: Offline-First with Service Workers at Scale

Understanding progressive web apps: offline-first with service workers at an academic level is necessary but not sufficient. Let us examine how these concepts manifest in production environments where failure has real consequences.

Consider India's UPI system processing 10+ billion transactions monthly. The architecture must guarantee: atomicity (a transfer either completes fully or not at all — no half-transfers), consistency (balances always add up correctly across all banks), isolation (concurrent transactions on the same account do not interfere), and durability (once confirmed, a transaction survives any failure). These are the ACID properties, and violating any one of them in a payment system would cause financial chaos for millions of people.

At scale, you also face the thundering herd problem: what happens when a million users check their exam results at the same time? (CBSE result day, anyone?) Without rate limiting, connection pooling, caching, and graceful degradation, the system crashes. Good engineering means designing for the worst case while optimising for the common case. Companies like NPCI (the organisation behind UPI) invest heavily in load testing — simulating peak traffic to identify bottlenecks before they affect real users.

Monitoring and observability become critical at scale. You need metrics (how many requests per second? what is the 99th percentile latency?), logs (what happened when something went wrong?), and traces (how did a single request flow through 15 different microservices?). Tools like Prometheus, Grafana, ELK Stack, and Jaeger are standard in Indian tech companies. When Hotstar streams IPL to 50 million concurrent users, their engineering team watches these dashboards in real-time, ready to intervene if any metric goes anomalous.

The career implications are clear: engineers who understand both the theory (from chapters like this one) AND the practice (from building real systems) command the highest salaries and most interesting roles. India's top engineering talent earns ₹50-100+ LPA at companies like Google, Microsoft, and Goldman Sachs, or builds their own startups. The foundation starts here.

Key Vocabulary

Here are important terms from this chapter that you should know:

💡 Interview-Style Problem

Here is a problem that frequently appears in technical interviews at companies like Google, Amazon, and Flipkart: "Design a URL shortener like bit.ly. How would you generate unique short codes? How would you handle millions of redirects per second? What database would you use and why? How would you track click analytics?"

Think about: hash functions for generating short codes, read-heavy workload (99% redirects, 1% creates) suggesting caching, database choice (Redis for cache, PostgreSQL for persistence), and horizontal scaling with consistent hashing. Try sketching the system architecture on paper before looking up solutions. The ability to think through system design problems is the single most valuable skill for senior engineering roles.

Where This Takes You

The knowledge you have gained about progressive web apps: offline-first with service workers is directly applicable to: competitive programming (Codeforces, CodeChef — India has the 2nd largest competitive programming community globally), open-source contribution (India is the 2nd largest contributor on GitHub), placement preparation (these concepts form 60% of technical interview questions), and building real products (every startup needs engineers who understand these fundamentals).

India's tech ecosystem offers incredible opportunities. Freshers at top companies earn ₹15-50 LPA; experienced engineers at FAANG companies in India earn ₹50-1 Cr+. But more importantly, the problems being solved in India — digital payments for 1.4 billion people, healthcare AI for rural areas, agricultural tech for 150 million farmers — are some of the most impactful engineering challenges in the world. The fundamentals you are building will be the tools you use to tackle them.

Crafted for Class 7–9 • Programming & Coding • Aligned with NEP 2020 & CBSE Curriculum