# 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) · 🇰🇷 [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 ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಾಪಿಸಬಹುದಾದ ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಆ್ಯಪ್ ಆಗಿ ಒದಗಿಸಲಾಗಿದೆ. ನೀವು ಯಾವುದೇ ಮೊಬೈಲ್ ಬ್ರೌಸರ್ನಿಂದ — Android (Chrome) ಅಥವಾ iOS (Safari) — ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನ್ನು ಪ್ರವೇಶಿಸಿದಾಗ, "ಹೋಮ್ ಸ್ಕ್ರೀನ್ಗೆ ಸೇರಿಸಿ" ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು, ಯಾವುದೇ ಆ್ಯಪ್ ಸ್ಟೋರ್ ಅಗತ್ಯವಿಲ್ಲದೆ ಸ್ಥಳೀಯ ಆ್ಯಪ್ನಂತಹ ಅನುಭವವನ್ನು ಪಡೆಯಬಹುದು.

## PWA ಎಂದರೇನು?

ಪ್ರೋಗ್ರೆಸಿವ್ ವೆಬ್ ಆ್ಯಪ್, 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`)

`src/app/manifest.ts` ಮೂಲಕ Next.js ನಿಂದ ರಚಿಸಲಾಗಿದೆ:

```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 ಆಗಿ ಇನ್ಸ್ಟಾಲ್ ಮಾಡಿ
- **ಬ್ರೌಸರ್ ಹೊಂದಿರುವ ಸ್ಮಾರ್ಟ್ ಟಿವಿ**: ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನ್ನು ಪೂರ್ಣಪರದೆಯಲ್ಲಿ ಪ್ರವೇಶಿಸಿ

## ಕಸ್ಟಮೈಸೇಶನ್

### ಇನ್ಸ್ಟನ್ಸ್ ಹೆಸರು

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 ಫಾಲ್ಬ್ಯಾಕ್)                                        |