# Progressive Web App (PWA) Guide (हिन्दी)

🌐 **Languages:** 🇺🇸 [English](../../../../guides/PWA_GUIDE.md) · 🇪🇹 [am](../../../am/docs/guides/PWA_GUIDE.md) · 🇸🇦 [ar](../../../ar/docs/guides/PWA_GUIDE.md) · 🇦🇿 [az](../../../az/docs/guides/PWA_GUIDE.md) · 🇧🇬 [bg](../../../bg/docs/guides/PWA_GUIDE.md) · 🇧🇩 [bn](../../../bn/docs/guides/PWA_GUIDE.md) · 🇧🇦 [bs](../../../bs/docs/guides/PWA_GUIDE.md) · 🇨🇿 [cs](../../../cs/docs/guides/PWA_GUIDE.md) · 🇩🇰 [da](../../../da/docs/guides/PWA_GUIDE.md) · 🇩🇪 [de](../../../de/docs/guides/PWA_GUIDE.md) · 🇬🇷 [el](../../../el/docs/guides/PWA_GUIDE.md) · 🇪🇸 [es](../../../es/docs/guides/PWA_GUIDE.md) · 🇪🇪 [et](../../../et/docs/guides/PWA_GUIDE.md) · 🇮🇷 [fa](../../../fa/docs/guides/PWA_GUIDE.md) · 🇫🇮 [fi](../../../fi/docs/guides/PWA_GUIDE.md) · 🇫🇷 [fr](../../../fr/docs/guides/PWA_GUIDE.md) · 🇮🇪 [ga](../../../ga/docs/guides/PWA_GUIDE.md) · 🇮🇳 [gu](../../../gu/docs/guides/PWA_GUIDE.md) · 🇳🇬 [ha](../../../ha/docs/guides/PWA_GUIDE.md) · 🇮🇱 [he](../../../he/docs/guides/PWA_GUIDE.md) · 🇭🇷 [hr](../../../hr/docs/guides/PWA_GUIDE.md) · 🇭🇺 [hu](../../../hu/docs/guides/PWA_GUIDE.md) · 🇦🇲 [hy](../../../hy/docs/guides/PWA_GUIDE.md) · 🇮🇩 [id](../../../id/docs/guides/PWA_GUIDE.md) · 🇳🇬 [ig](../../../ig/docs/guides/PWA_GUIDE.md) · 🇮🇹 [it](../../../it/docs/guides/PWA_GUIDE.md) · 🇯🇵 [ja](../../../ja/docs/guides/PWA_GUIDE.md) · 🇬🇪 [ka](../../../ka/docs/guides/PWA_GUIDE.md) · 🇰🇭 [km](../../../km/docs/guides/PWA_GUIDE.md) · 🇮🇳 [kn](../../../kn/docs/guides/PWA_GUIDE.md) · 🇰🇷 [ko](../../../ko/docs/guides/PWA_GUIDE.md) · 🇱🇹 [lt](../../../lt/docs/guides/PWA_GUIDE.md) · 🇱🇻 [lv](../../../lv/docs/guides/PWA_GUIDE.md) · 🇮🇳 [ml](../../../ml/docs/guides/PWA_GUIDE.md) · 🇮🇳 [mr](../../../mr/docs/guides/PWA_GUIDE.md) · 🇲🇾 [ms](../../../ms/docs/guides/PWA_GUIDE.md) · 🇲🇹 [mt](../../../mt/docs/guides/PWA_GUIDE.md) · 🇲🇲 [my](../../../my/docs/guides/PWA_GUIDE.md) · 🇳🇵 [ne](../../../ne/docs/guides/PWA_GUIDE.md) · 🇳🇱 [nl](../../../nl/docs/guides/PWA_GUIDE.md) · 🇳🇴 [no](../../../no/docs/guides/PWA_GUIDE.md) · 🇮🇳 [or](../../../or/docs/guides/PWA_GUIDE.md) · 🇮🇳 [pa](../../../pa/docs/guides/PWA_GUIDE.md) · 🇵🇭 [phi](../../../phi/docs/guides/PWA_GUIDE.md) · 🇵🇱 [pl](../../../pl/docs/guides/PWA_GUIDE.md) · 🇵🇹 [pt](../../../pt/docs/guides/PWA_GUIDE.md) · 🇧🇷 [pt-BR](../../../pt-BR/docs/guides/PWA_GUIDE.md) · 🇷🇴 [ro](../../../ro/docs/guides/PWA_GUIDE.md) · 🇷🇺 [ru](../../../ru/docs/guides/PWA_GUIDE.md) · 🇱🇰 [si](../../../si/docs/guides/PWA_GUIDE.md) · 🇸🇰 [sk](../../../sk/docs/guides/PWA_GUIDE.md) · 🇸🇮 [sl](../../../sl/docs/guides/PWA_GUIDE.md) · 🇷🇸 [sr](../../../sr/docs/guides/PWA_GUIDE.md) · 🇸🇪 [sv](../../../sv/docs/guides/PWA_GUIDE.md) · 🇰🇪 [sw](../../../sw/docs/guides/PWA_GUIDE.md) · 🇮🇳 [ta](../../../ta/docs/guides/PWA_GUIDE.md) · 🇮🇳 [te](../../../te/docs/guides/PWA_GUIDE.md) · 🇹🇭 [th](../../../th/docs/guides/PWA_GUIDE.md) · 🇹🇷 [tr](../../../tr/docs/guides/PWA_GUIDE.md) · 🇺🇦 [uk-UA](../../../uk-UA/docs/guides/PWA_GUIDE.md) · 🇵🇰 [ur](../../../ur/docs/guides/PWA_GUIDE.md) · 🇺🇿 [uz](../../../uz/docs/guides/PWA_GUIDE.md) · 🇻🇳 [vi](../../../vi/docs/guides/PWA_GUIDE.md) · 🇳🇬 [yo](../../../yo/docs/guides/PWA_GUIDE.md) · 🇨🇳 [zh-CN](../../../zh-CN/docs/guides/PWA_GUIDE.md) · 🇹🇼 [zh-TW](../../../zh-TW/docs/guides/PWA_GUIDE.md)

---

OmniRoute एक पूर्णतः इंस्टॉल किए जा सकने वाले Progressive Web App के रूप में उपलब्ध है। जब आप किसी भी मोबाइल ब्राउज़र — Android (Chrome) या iOS (Safari) — से डैशबोर्ड खोलते हैं, तो आप "होम स्क्रीन पर जोड़ें" विकल्प का उपयोग करके बिना किसी ऐप स्टोर के मूल ऐप जैसा अनुभव प्राप्त कर सकते हैं।

## PWA क्या है?

Progressive Web App, OmniRoute वेब डैशबोर्ड को ऐसे ऐप में बदल देता है जो दिखने और उपयोग करने में मूल मोबाइल ऐप जैसा लगता है। इंस्टॉल होने के बाद, यह:

- अपने स्वयं के आइकन के साथ आपकी होम स्क्रीन से लॉन्च होता है
- फ़ुलस्क्रीन में खुलता है — इसमें ब्राउज़र का एड्रेस बार या टैब UI नहीं होता
- समर्पित कनेक्टिविटी पेज के साथ ऑफ़लाइन काम करता है
- तेज़ लोडिंग के लिए स्थिर एसेट कैश करता है
- पोर्ट्रेट और लैंडस्केप, दोनों ओरिएंटेशन का समर्थन करता है

## इंस्टॉलेशन

### Android (Chrome)

1. Chrome में OmniRoute डैशबोर्ड खोलें: `http://YOUR_IP:20128`
2. Chrome स्वचालित रूप से **"OmniRoute को होम स्क्रीन पर जोड़ें"** बैनर दिखाएगा, या:
   - **⋮** मेन्यू (तीन बिंदु) पर टैप करें → **"होम स्क्रीन पर जोड़ें"** या **"ऐप इंस्टॉल करें"**
3. प्रॉम्प्ट की पुष्टि करें
4. OmniRoute आपकी होम स्क्रीन पर एक स्वतंत्र ऐप के रूप में दिखाई देगा

### iOS (Safari)

1. Safari में OmniRoute डैशबोर्ड खोलें: `http://YOUR_IP:20128`
2. **शेयर** बटन (तीर वाला बॉक्स) पर टैप करें
3. नीचे स्क्रॉल करें और **"होम स्क्रीन पर जोड़ें"** पर टैप करें
4. इसे नाम दें (डिफ़ॉल्ट नाम "OmniRoute" है) और **जोड़ें** पर टैप करें
5. OmniRoute ऐप आइकन के साथ आपकी होम स्क्रीन पर दिखाई देगा

### डेस्कटॉप (Chrome / Edge)

1. OmniRoute डैशबोर्ड खोलें
2. एड्रेस बार में **इंस्टॉल आइकन** पर क्लिक करें (या ⋮ → "OmniRoute इंस्टॉल करें...")
3. प्रॉम्प्ट की पुष्टि करें
4. OmniRoute एक स्वतंत्र विंडो के रूप में खुलेगा — कोई टैब या एड्रेस बार नहीं होगा

## विशेषताएँ

### फ़ुलस्क्रीन अनुभव

मैनिफ़ेस्ट को `display: "fullscreen"` के साथ कॉन्फ़िगर किया गया है, जिसका अर्थ है कि इंस्टॉल किया गया ऐप पूरी स्क्रीन का उपयोग करता है — कोई ब्राउज़र क्रोम या स्टेटस बार ओवरलैप नहीं होता। इससे डैशबोर्ड वास्तव में मूल ऐप जैसा अनुभव देता है।

### ऑफ़लाइन समर्थन

OmniRoute में एक सर्विस वर्कर (`sw.js`) शामिल है, जो बुद्धिमत्तापूर्ण कैशिंग प्रदान करता है:

| एसेट प्रकार                                            | रणनीति                               | व्यवहार                                                                                                         |
| ------------------------------------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| **ऐप शेल**                                             | पहले कैश                             | `/`, `/offline`, मैनिफ़ेस्ट और आइकन इंस्टॉलेशन के समय पहले से कैश किए जाते हैं                                  |
| **स्थिर एसेट** (CSS, JS, इमेज, फ़ॉन्ट)                 | कैश फ़ॉलबैक के साथ पहले नेटवर्क      | नेटवर्क से नवीनतम सामग्री प्राप्त करता है; ऑफ़लाइन होने पर कैश का उपयोग करता है                                 |
| **Next.js बंडल** (`/_next/`)                           | कैश अपडेट के साथ पहले नेटवर्क        | नेटवर्क से सामग्री प्राप्त करके कैश अपडेट करता है; ऑफ़लाइन होने पर कैश किया गया संस्करण प्रदान करता है          |
| **नेविगेशन अनुरोध**                                    | बायपास (कभी इंटरसेप्ट नहीं किए जाते) | ब्राउज़र HTTP/3→HTTP/2 फ़ॉलबैक को नियंत्रित करता है; निष्क्रिय QUIC सॉकेट को `Response.error()` नहीं बनना चाहिए |
| **API / डैशबोर्ड रूट** (`/api/`, `/a2a`, `/dashboard`) | बायपास (कभी कैश नहीं किए जाते)       | हमेशा सीधे सर्वर पर जाते हैं — सर्विस वर्कर द्वारा कभी इंटरसेप्ट नहीं किए जाते                                  |

### ऑफ़लाइन पेज

जब नेटवर्क उपलब्ध नहीं होता और उपयोगकर्ता किसी नए पेज पर जाता है, तो सर्विस वर्कर एक समर्पित `/offline` पेज दिखाता है, जो:

- एक स्पष्ट **"कनेक्टिविटी समस्या"** संदेश दिखाता है
- रीयल टाइम में अपडेट होने वाला लाइव **ऑनलाइन/ऑफ़लाइन स्थिति संकेतक** दिखाता है
- कनेक्टिविटी वापस आने पर पेज को पुनः लोड करने के लिए **"कनेक्शन का पुनः प्रयास करें"** बटन प्रदान करता है
- निदान के लिए **स्थिति पेज** का लिंक देता है

### ऐप आइकन

OmniRoute प्रत्येक प्लेटफ़ॉर्म के लिए अनुकूलित आइकन प्रदान करता है:

| फ़ाइल                  | आकार             | इनके द्वारा उपयोग किया जाता है             |
| ---------------------- | ---------------- | ------------------------------------------ |
| `icon-512.png`         | 512×512          | Android इंस्टॉल प्रॉम्प्ट, स्प्लैश स्क्रीन |
| `apple-touch-icon.png` | 180×180          | iOS होम स्क्रीन आइकन                       |
| `icon-192.svg`         | 192×192 (वेक्टर) | Android अडैप्टिव आइकन                      |
| `apple-touch-icon.svg` | 180×180 (वेक्टर) | Apple फ़ॉलबैक                              |
| `favicon.svg`          | वेक्टर           | ब्राउज़र टैब                               |
| `favicon.ico`          | बहु-आकार         | पुराने ब्राउज़र                            |

### स्वचालित पंजीकरण

सर्विस वर्कर को रूट लेआउट में मौजूद `<PwaRegister />` कंपोनेंट के माध्यम से स्वचालित रूप से पंजीकृत किया जाता है। उपयोगकर्ता को कोई कार्रवाई करने की आवश्यकता नहीं होती — जैसे ही ब्राउज़र मान्य मैनिफ़ेस्ट और सर्विस वर्कर का पता लगाता है, ऐप इंस्टॉल करने योग्य हो जाता है।

## तकनीकी आर्किटेक्चर

### वेब ऐप मैनिफ़ेस्ट (`manifest.webmanifest`)

Next.js द्वारा `src/app/manifest.ts` के माध्यम से जनरेट किया गया:

```json
{
  "name": "OmniRoute",
  "short_name": "OmniRoute",
  "description": "OmniRoute is an AI gateway for multi-provider LLMs. One endpoint for all your AI providers.",
  "start_url": "/",
  "scope": "/",
  "display": "fullscreen",
  "orientation": "any",
  "background_color": "#0b0f1a",
  "theme_color": "#0b0f1a",
  "icons": [
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    },
    { "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
  ]
}
```

### सर्विस वर्कर (`public/sw.js`)

एक सामान्य सर्विस वर्कर (बिना किसी फ़्रेमवर्क निर्भरता के), जिसमें शामिल हैं:

- **इंस्टॉल चरण**: ऐप शेल (रूट, ऑफ़लाइन पेज, मैनिफ़ेस्ट, आइकन) को पहले से कैश करता है
- **सक्रियण चरण**: पुराने कैश संस्करणों को हटाता है और सभी क्लाइंट्स पर नियंत्रण प्राप्त करता है
- **फ़ेच चरण**: अनुरोध के प्रकार (नेविगेशन, स्टैटिक एसेट, API) के आधार पर बुद्धिमत्तापूर्ण रूटिंग
- **कैश संस्करण प्रबंधन**: `omniroute-pwa-v3` — अपडेट पर नया कैश लागू करने के लिए इसे बढ़ाएँ

### लेआउट मेटाडेटा (`src/app/layout.tsx`)

रूट लेआउट PWA अनुपालन के लिए आवश्यक सभी मेटा टैग प्रदान करता है:

- `/manifest.webmanifest` के लिए `manifest` लिंक
- iOS स्टैंडअलोन मोड के लिए `apple-web-app-capable: true`
- `apple-web-app-status-bar-style: black-translucent`
- Android Chrome के लिए `mobile-web-app-capable: yes`
- `theme-color: #0b0f1a`
- किनारे-से-किनारे तक रेंडरिंग के लिए `viewport-fit: cover`

### कंपोनेंट: `PwaRegister`

`src/shared/components/PwaRegister.tsx` में स्थित यह क्लाइंट कंपोनेंट:

1. माउंट होने पर चलता है (केवल क्लाइंट-साइड)
2. ब्राउज़र में `serviceWorker` समर्थन की जाँच करता है
3. `/sw.js` को बिना किसी सूचना के रजिस्टर करता है (ऐप को ब्लॉक होने से बचाने के लिए त्रुटियों को अनदेखा किया जाता है)
4. कुछ भी रेंडर नहीं करता (`return null`) — यह केवल साइड-इफ़ेक्ट वाला कंपोनेंट है

## Termux (Android) के साथ उपयोग

Android पर Termux के माध्यम से OmniRoute चलाते समय, PWA निर्बाध रूप से काम करता है:

1. Termux में OmniRoute शुरू करें: `npx omniroute`
2. उसी फ़ोन पर Chrome खोलें: `http://localhost:20128`
3. "होम स्क्रीन पर जोड़ें" के माध्यम से PWA इंस्टॉल करें
4. PWA स्थानीय Termux सर्वर से कनेक्ट होता है — सब कुछ डिवाइस पर ही चलता है

इस संयोजन का अर्थ है कि आपका Android फ़ोन **सर्वर** (Termux) और **क्लाइंट** (PWA), दोनों है — एक पूर्णतः स्व-निहित AI गेटवे।

## अन्य डिवाइसों से उपयोग

PWA को ऐसे किसी भी डिवाइस पर इंस्टॉल करें, जिसके ब्राउज़र से आपके OmniRoute सर्वर तक पहुँच हो:

- **अन्य फ़ोन/टैबलेट**: `http://PHONE_IP:20128` पर जाएँ और PWA इंस्टॉल करें
- **लैपटॉप**: Chrome/Edge खोलें और इसे डेस्कटॉप PWA के रूप में इंस्टॉल करें
- **ब्राउज़र वाला स्मार्ट TV**: डैशबोर्ड को फ़ुलस्क्रीन में एक्सेस करें

## अनुकूलन

### इंस्टेंस का नाम

PWA का शीर्षक `Dashboard → Settings` में मौजूद **Instance Name** सेटिंग का पालन करता है। यदि आप अपने इंस्टेंस का नाम बदलकर "मेरा AI गेटवे" रखते हैं, तो इंस्टॉल किया गया PWA वही नाम दिखाएगा।

### कस्टम फ़ेविकॉन

यदि आप `Dashboard → Settings` के माध्यम से कस्टम फ़ेविकॉन अपलोड करते हैं, तो डेस्कटॉप पर PWA आइकन उस कस्टम आइकन को दर्शाएगा। मोबाइल होम स्क्रीन आइकन पहले से निर्मित `icon-512.png` और `apple-touch-icon.png` फ़ाइलों का उपयोग करते हैं।

## सीमाएँ

- **कोई पुश नोटिफ़िकेशन नहीं** — सर्विस वर्कर Push API को लागू नहीं करता। इसके बजाय नोटिफ़िकेशन Electron ऐप द्वारा प्रबंधित किए जाते हैं।
- **कोई बैकग्राउंड सिंक नहीं** — ऑफ़लाइन कार्रवाइयों को दोबारा चलाने के लिए कतारबद्ध नहीं किया जाता। PWA मुख्य रूप से एक डैशबोर्ड व्यूअर है।
- **iOS प्रतिबंध** — iOS पर Safari सभी PWA सुविधाओं का समर्थन नहीं करता (जैसे, इंस्टॉल प्रॉम्प्ट मैन्युअल होते हैं और बैकग्राउंड सर्विस वर्कर सीमित होते हैं)।
- **कैश आकार** — सर्विस वर्कर केवल स्थिर एसेट्स को कैश करता है। `/api/` रूट्स से मिलने वाले बड़े रिस्पॉन्स पेलोड कभी कैश नहीं किए जाते।
- **मोबाइल पर कस्टम आइकन** — सेटिंग्स में फ़ेविकॉन बदलने से मोबाइल पर होम स्क्रीन आइकन अपडेट नहीं होता (इसके लिए PWA आइकनों को फिर से जनरेट करना आवश्यक है)।

## फ़ाइल संदर्भ

| फ़ाइल                                   | उद्देश्य                                                      |
| --------------------------------------- | ------------------------------------------------------------- |
| `src/app/manifest.ts`                   | Next.js मैनिफ़ेस्ट रूट (`manifest.webmanifest` जनरेट करता है) |
| `public/sw.js`                          | कैशिंग लॉजिक वाला सर्विस वर्कर                                |
| `src/shared/components/PwaRegister.tsx` | सर्विस वर्कर को रजिस्टर करने वाला क्लाइंट कंपोनेंट            |
| `src/app/offline/page.tsx`              | लाइव स्थिति संकेतक वाला ऑफ़लाइन फ़ॉलबैक पेज                   |
| `src/app/layout.tsx`                    | PWA मेटाडेटा वाला रूट लेआउट (apple-web-app, theme-color आदि)  |
| `public/icon-512.png`                   | 512×512 PNG आइकन (Android, स्प्लैश स्क्रीन)                   |
| `public/apple-touch-icon.png`           | 180×180 PNG आइकन (iOS होम स्क्रीन)                            |
| `public/icon-192.svg`                   | 192×192 SVG आइकन (Android अडैप्टिव)                           |
| `public/apple-touch-icon.svg`           | 180×180 SVG आइकन (Apple फ़ॉलबैक)                              |