OnlineCBT Logo OnlineCBT
HTML Tutorial
HTML · LESSON 61

Progressive Web App (PWA) Essentials

By Ratan Updated: 16 Oct 2026

Configure manifest.json, theme-color meta tags, and app icons for installable web applications.

Level: Beginner to Advanced
Duration: ~60 Mins Deep-Dive

1. What is a Progressive Web App (PWA)?

A Progressive Web App (PWA) uses modern web capabilities to deliver an app-like user experience. PWAs can be installed directly onto a student's desktop or smartphone home screen, launch without browser URL bars, and function seamlessly even when offline.

2. The Web App Manifest (manifest.json)

The manifest file is a JSON document detailing application name, icons, and display parameters:

{
  "name": "Online CBT Examination Portal",
  "short_name": "OnlineCBT",
  "start_url": "/dashboard",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1e3a8a",
  "icons": [
    {
      "src": "/assets/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/assets/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3. Linking the Manifest in HTML



📝 Live Lesson Practice

HTML/CSS JavaScript Python C++ C PHP
⌨️ Practice Inputs (लाइव इनपुट भरें) (खाली होने पर RED, भरने पर GREEN underline)
💻 Code Editor (Monaco VS Code Engine)
👀 Live Preview
पता संपर्क करें

+91 7877547686

ई-मेल

onlinecbtportal@gmail.com

हेल्पलाइन नंबर

+91 7877547686


डाउनलोड करने के लिए क्लिक करें
Get it on Google Play

ऐप डाउनलोड करने
के लिए Google Play पर
उपलब्ध है

WhatsApp Chat