पाठ 1 / 29

Progressive Web Apps क्या हैं?

PWAs की core concept, उनके benefits और web तथा native apps के बीच gap को समझें।

मुख्य विचार

Progressive Web Apps web और native applications के best features को combine करते हैं। वे offline काम करते हैं, instantly load होते हैं, और native apps जैसा लगते हैं। PWAs service workers, manifest files और modern web APIs का उपयोग करके browser में सीधे app-like experiences देते हैं।

PWA architecture का overview

यह visual दिखाता है कि PWAs कैसे browser capabilities, service workers और app shell को connect करके seamless experiences बनाते हैं।

PWA architecture diagram जो browser, service worker, app shell और native-like features दिखाता है। — चित्र 1.1 — Progressive Web Apps architecture layers।

Minimal PWA setup

यह foundation है: एक HTML page जो manifest को reference करता है और service worker को register करता है।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My PWA</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <h1>Welcome to My PWA</h1>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js');
    }
  </script>
</body>
</html>

Output:

Page loads with service worker registered and manifest linked.

एक आम गलती

यह assume न करें कि PWAs सभी browsers पर समान रूप से काम करते हैं। Real devices पर test करें और capabilities को gracefully degrade करने के लिए feature detection का उपयोग करें।

त्वरित जाँच

त्वरित जाँच: PWA के तीन pillars कौन से हैं?

Reliable (offline), Fast (instant load), Engaging (app-like)
Server-side rendering, database, API
JavaScript, CSS, HTML

Answer

Reliable (offline), Fast (instant load), Engaging (app-like) — PWAs को reliability, speed और engagement से define किया जाता है—वे offline काम करते हैं, instantly load होते हैं और native लगते हैं।

Practice Exercise

सीखी गई concepts का उपयोग करके एक simple PWA checklist app बनाएँ।