Day 53

Progressive Web Apps (PWA)

13 min

JavaScript 100 Days

PWA (Progressive Web App) ek web app hai jo native app jaisi feel deti hai — install ho sakti hai, offline kaam kari hai, push notifications bhejti hai. Web aur native ka best combination.

Web App Manifest

manifest.json se app installable banao.

manifest.json

json

{
  "name": "CodingSkillUp",
  "short_name": "CSU",
  "description": "JavaScript 100 Days Course",
  "start_url": "/",
  "display": "standalone",
  "background_color": "var(--bg)",
  "theme_color": "#caff46",
  "orientation": "portrait",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Making it Installable

beforeinstallprompt event handle karo.

install.js

javascript

let deferredPrompt;

window.addEventListener("beforeinstallprompt", e => {
  e.preventDefault();
  deferredPrompt = e;
  
  // Show install button
  document.getElementById("installBtn").style.display = "block";
});

document.getElementById("installBtn").addEventListener("click", async () => {
  if (!deferredPrompt) return;
  
  deferredPrompt.prompt();
  const result = await deferredPrompt.userChoice;
  
  console.log(result.outcome === "accepted" ? "Installed!" : "Dismissed");
  deferredPrompt = null;
  document.getElementById("installBtn").style.display = "none";
});

🎯 Practice Challenge

CodingSkillUp ko PWA banao — manifest add karo, Service Worker se cache karo, install button add karo.

Service WorkersIndexedDB