Traditional Server vs.
Server-Client Architecture

// api-server.js
// Server-Client Architecture: static assets are cached aggressively,
// and only a lightweight JSON API is called on subsequent visits.

const express = require('express');
const cors    = require('cors');
const app     = express();
const PORT    = 3000;

app.use(cors());
app.use(express.json());

// ── Step 1: Serve static assets ONCE with aggressive caching ──
// After the first visit the browser (or Service Worker) serves
// these from the local cache — zero network traffic. ✅
app.use('/static', express.static('public', {
  maxAge:    '365d',  // Cache for one year
  immutable: true,   // Content won't change (use versioned filenames)
  etag:      true    // Enable conditional validation
}));

// ── Step 2: API endpoints — only JSON data, no markup ──
// Response size: ~1–3 KB vs 1,402 KB for traditional
app.get('/api/page/:id', async (req, res) => {
  const data = await db.getPage(req.params.id);

  res.json({             // ~2 KB JSON payload ✅
    title:     data.title,
    content:   data.body,
    author:    data.author,
    timestamp: new Date().toISOString()
  });
  // Total network: ~2 KB instead of 1,402 KB — 700× reduction!
});

app.listen(PORT, () =>
  console.log(`API server → http://localhost:${PORT}`)
);

// sw.js — Service Worker
// Intercepts all network requests.
// Static assets → served from local cache (0ms network).
// API requests  → always fetched fresh from the server.

const CACHE = 'app-v1.0.0';

// All static assets to pre-cache on install (~1,402 KB total, cached ONCE)
const ASSETS = [
  '/',
  '/static/css/styles.css',
  '/static/css/bootstrap.css',
  '/static/js/app.js',
  '/static/js/jquery.min.js',
  '/static/images/hero.jpg',
  '/static/images/bg.webp',
  '/static/fonts/regular.woff2',
  '/static/fonts/bold.woff2'
];

// Install: pre-cache all static assets
self.addEventListener('install', evt => {
  evt.waitUntil(
    caches.open(CACHE)
      .then(cache => cache.addAll(ASSETS))
      .then(() => self.skipWaiting())
  );
});

// Fetch: cache-first for static assets, network-first for API
self.addEventListener('fetch', evt => {
  const url = new URL(evt.request.url);

  // API routes: always fetch fresh data from the network
  if (url.pathname.startsWith('/api/')) {
    evt.respondWith(fetch(evt.request));
    return;
  }

  // Static assets: serve from cache — instant, zero network ⚡
  evt.respondWith(
    caches.match(evt.request).then(hit => {
      if (hit) {
        console.log(`⚡ Cache HIT [0ms]: ${url.pathname}`);
        return hit;
      }
      // Fallback to network if not in cache
      return fetch(evt.request).then(res => {
        const copy = res.clone();
        caches.open(CACHE).then(c => c.put(evt.request, copy));
        return res;
      });
    })
  );
});

// app.js — Client-side application
// HTML shell + all CSS + JS + Images → already cached by Service Worker.
// This file only fetches page-specific JSON data from the API.

// ── Register Service Worker (runs once on first ever visit) ──
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw.js')
    .then(reg => console.log('✅ Service Worker registered', reg.scope))
    .catch(err => console.error('SW failed:', err));
}

// ── Fetch only JSON data — ~2 KB over the network ──
async function loadPage(pageId) {
  const t0 = performance.now();

  try {
    const res  = await fetch(`/api/page/${pageId}`);
    const data = await res.json();

    console.log(`⚡ Data loaded in ${(performance.now()-t0).toFixed(1)}ms`);

    // Update the DOM with fresh data — assets are already present ✅
    updateDOM(data);

  } catch (err) {
    console.error('Failed to fetch data:', err);
    showOfflineFallback();  // Cached assets still render the shell!
  }
}

// ── Update DOM in-place — no page reload needed ──
function updateDOM(data) {
  document.querySelector('#page-title').textContent   = data.title;
  document.querySelector('#page-content').innerHTML  = data.content;
  document.querySelector('#last-updated').textContent =
    new Date(data.timestamp).toLocaleString();
}

// Load on first render
document.addEventListener('DOMContentLoaded', () => loadPage(1));