HTML Progressive Web Apps (PWA)

Introduction

Progressive Web Apps (PWAs) allow your website to behave like a native app: installable, offline-capable, fast, and with app-like UI. PWAs only require three parts: a manifest, a service worker, and HTTPS.

1. The Web App Manifest

Create manifest.json in your root:

{
  "name": "CodeTweakrs App",
  "short_name": "CTW",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#121212",
  "theme_color": "#64b5f6",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

2. Link the Manifest

<link rel="manifest" href="/manifest.json">

3. Register the Service Worker

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

4. Basic Service Worker

This file enables caching and offline support.

// sw.js

self.addEventListener("install", event => {
  event.waitUntil(
    caches.open("ct-cache").then(cache => {
      return cache.addAll([
        "/",
        "/index.html",
        "/styles.css",
        "/script.js"
      ]);
    })
  );
});

self.addEventListener("fetch", event => {
  event.respondWith(
    caches.match(event.request).then(res => res || fetch(event.request))
  );
});

5. What PWA "Install" Actually Means

6. HTTPS Required

PWA features only work on secure origins: HTTPS or localhost.

7. Add Theme & Background for Mobile Chrome

<meta name="theme-color" content="#64b5f6">

8. Offline Fallback Page

// in sw.js

event.respondWith(
  fetch(event.request).catch(() => caches.match("/offline.html"))
);

9. Update Service Worker Automatically

Browsers check for changes in sw.js and auto-update.

10. PWA Directory Structure Example

/
  index.html
  manifest.json
  sw.js
  /icons
    icon-192.png
    icon-512.png
  /assets
    script.js
    styles.css

11. Test Your PWA

12. Great Real-World PWA Use Cases

Summary