# 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) · 🇮🇳 [hi](../../../hi/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) · 🇳🇱 [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) — बाट ड्यासबोर्ड पहुँच गर्दा, "गृह स्क्रिनमा थप्नुहोस्" विकल्प प्रयोग गरेर कुनै app store आवश्यक नपर्ने नेटिभ एप-जस्तै अनुभव प्राप्त गर्न सक्नुहुन्छ।

## 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 मा बुद्धिमानी क्यासिङ प्रदान गर्ने service worker (`sw.js`) समावेश छ:

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

### अफलाइन पृष्ठ

नेटवर्क उपलब्ध नभएको बेला प्रयोगकर्ताले नयाँ पृष्ठमा नेभिगेट गर्दा, service worker ले समर्पित `/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`          | बहु-आकार         | पुराना ब्राउजरहरू                           |

### स्वचालित दर्ता

service worker लाई मूल लेआउटको `<PwaRegister />` कम्पोनेन्टमार्फत स्वचालित रूपमा दर्ता गरिन्छ। प्रयोगकर्ताले कुनै कार्य गर्न आवश्यक पर्दैन — ब्राउजरले मान्य म्यानिफेस्ट र service worker पत्ता लगाउनेबित्तिकै एप स्थापना गर्न मिल्ने हुन्छ।

## प्राविधिक आर्किटेक्चर

### वेब एप म्यानिफेस्ट (`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 गेटवे।

## अन्य डिभाइसहरूबाट प्रयोग

तपाईंको OmniRoute सर्भरमा ब्राउजरमार्फत पहुँच भएको कुनै पनि डिभाइसमा PWA इन्स्टल गर्नुहोस्:

- **अर्को फोन/ट्याब्लेट**: `http://PHONE_IP:20128` मा जानुहोस् र PWA इन्स्टल गर्नुहोस्
- **ल्यापटप**: Chrome/Edge खोल्नुहोस् र यसलाई डेस्कटप PWA का रूपमा इन्स्टल गर्नुहोस्
- **ब्राउजर भएको स्मार्ट TV**: ड्यासबोर्डलाई फुलस्क्रिनमा पहुँच गर्नुहोस्

## अनुकूलन

### इन्स्ट्यान्सको नाम

PWA शीर्षकले `Dashboard → Settings` मा रहेको **इन्स्ट्यान्सको नाम** सेटिङलाई मान्छ। यदि तपाईंले आफ्नो इन्स्ट्यान्सको नाम "मेरो AI गेटवे" राख्नुभयो भने, इन्स्टल गरिएको PWA ले सोही नाम देखाउनेछ।

### आफूअनुकूल फेभिकन

यदि तपाईंले `Dashboard → Settings` मार्फत आफूअनुकूल फेभिकन अपलोड गर्नुभयो भने, डेस्कटपमा रहेको PWA आइकनले उक्त आफूअनुकूल आइकन देखाउनेछ। मोबाइलको गृह स्क्रिनका आइकनहरूले पूर्वनिर्मित `icon-512.png` र `apple-touch-icon.png` फाइलहरू प्रयोग गर्छन्।

## सीमितताहरू

- **पुश सूचनाहरू छैनन्** — सर्भिस वर्करले Push API कार्यान्वयन गर्दैन। यसको सट्टा सूचनाहरू Electron एपद्वारा व्यवस्थापन गरिन्छन्।
- **पृष्ठभूमि सिंक छैन** — अफलाइन कार्यहरू पुनः सञ्चालनका लागि लामबद्ध गरिँदैनन्। PWA मुख्य रूपमा ड्यासबोर्ड हेर्ने माध्यम हो।
- **iOS का प्रतिबन्धहरू** — iOS को Safari ले सबै PWA सुविधाहरू समर्थन गर्दैन (जस्तै, इन्स्टल प्रम्प्टहरू म्यानुअल हुन्छन् र पृष्ठभूमि सर्भिस वर्करहरू सीमित हुन्छन्)।
- **क्यासको आकार** — सर्भिस वर्करले स्थिर एसेटहरू मात्र क्यास गर्छ। `/api/` रुटहरूबाट आउने ठूला प्रतिक्रिया पेलोडहरू कहिल्यै क्यास गरिँदैनन्।
- **मोबाइलमा आफूअनुकूल आइकनहरू** — सेटिङहरूमा favicon परिवर्तन गर्दा मोबाइलको गृह स्क्रिन आइकन अद्यावधिक हुँदैन (यसका लागि 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 फलब्याक)                              |