Progressive Web Apps: From Zero to Production | DevPrep

Progressive Web Apps: From Zero to Production | DevPrep

{
  "name": "DevPrep - Interview Preparation",
  "short_name": "DevPrep",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1a1a2e",
  "theme_color": "#0f3460",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

// IndexedDB for offline data
import { openDB } from "idb";

const db = await openDB("app", 1, {
  upgrade(db) {
    db.createObjectStore("articles", { keyPath: "id" });
  }
});

// Save for offline
await db.put("articles", article);

// Read offline
const cached = await db.get("articles", articleId);

// Request permission
const permission = await Notification.requestPermission();

// Subscribe to push
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: vapidPublicKey
});

// Send subscription to server
await fetch("/api/push/subscribe", {
  method: "POST",
  body: JSON.stringify(subscription)
});