# 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) · 🇳🇵 [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) · 🇵🇭 [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` ਵਿਚਲੀ **ਇੰਸਟੈਂਸ ਦਾ ਨਾਮ** ਸੈਟਿੰਗ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਇੰਸਟੈਂਸ ਦਾ ਨਾਮ ਬਦਲ ਕੇ "ਮੇਰਾ 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 ਫਾਲਬੈਕ)                               |