# 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) · 🇮🇳 [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) · 🇮🇳 [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 நுண்ணறிவுமிக்க தேக்ககச் சேமிப்பை வழங்கும் ஒரு 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`          | பல அளவுகள்        | பழைய உலாவிகள்                               |

### தானியங்கு பதிவு

ரூட் லேஅவுட்டில் உள்ள `<PwaRegister />` கூறின் வழியாக service worker தானாகப் பதிவு செய்யப்படுகிறது. பயனர் எந்த நடவடிக்கையும் எடுக்கத் தேவையில்லை — செல்லுபடியாகும் மேனிஃபெஸ்ட் மற்றும் service worker ஆகியவற்றை உலாவி கண்டறிந்தவுடன் செயலியை நிறுவ முடியும்.

## தொழில்நுட்பக் கட்டமைப்பு

### வலைப் பயன்பாட்டு மேனிஃபெஸ்ட் (`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)

Termux வழியாக Android-இல் 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 அறிவிப்புகள் இல்லை** — Service worker ஆனது Push API-ஐச் செயல்படுத்தவில்லை. அதற்குப் பதிலாக அறிவிப்புகளை Electron செயலி கையாளுகிறது.
- **பின்னணித் தரவு ஒத்திசைவு இல்லை** — இணையமில்லா நிலையில் மேற்கொள்ளப்படும் செயல்கள், பின்னர் மீண்டும் செயல்படுத்துவதற்காக வரிசைப்படுத்தப்படுவதில்லை. PWA முதன்மையாக ஒரு கட்டுப்பாட்டுப் பலகைப் பார்வையாளர் ஆகும்.
- **iOS கட்டுப்பாடுகள்** — iOS-இல் உள்ள Safari அனைத்து PWA அம்சங்களையும் ஆதரிப்பதில்லை (எ.கா., நிறுவல் அறிவுறுத்தல்கள் கைமுறையானவை, மேலும் பின்னணி service worker-களின் செயல்பாடு வரம்புக்குட்பட்டது).
- **தற்காலிகச் சேமிப்பக அளவு** — Service worker நிலையான வளங்களை மட்டுமே தற்காலிகமாகச் சேமிக்கிறது. `/api/` வழித்தடங்களிலிருந்து வரும் பெரிய பதில் தரவுத் தொகுப்புகள் ஒருபோதும் தற்காலிகமாகச் சேமிக்கப்படுவதில்லை.
- **மொபைலில் தனிப்பயன் ஐகான்கள்** — அமைப்புகளில் favicon-ஐ மாற்றுவது மொபைலின் முகப்புத் திரை ஐகானைப் புதுப்பிக்காது (இதற்கு PWA ஐகான்களை மீண்டும் உருவாக்க வேண்டும்).

## கோப்புகளின் குறிப்பு

| கோப்பு                                  | நோக்கம்                                                                  |
| --------------------------------------- | ------------------------------------------------------------------------ |
| `src/app/manifest.ts`                   | Next.js manifest வழித்தடம் (`manifest.webmanifest`-ஐ உருவாக்குகிறது)     |
| `public/sw.js`                          | தற்காலிகச் சேமிப்பு தர்க்கத்தைக் கொண்ட service worker                    |
| `src/shared/components/PwaRegister.tsx` | Service worker-ஐப் பதிவுசெய்யும் client component                        |
| `src/app/offline/page.tsx`              | நேரலை நிலைக் குறிகாட்டியுடன் கூடிய இணையமில்லா நிலைக்கான மாற்றுப் பக்கம்  |
| `src/app/layout.tsx`                    | PWA metadata-வுடன் கூடிய மூல layout (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 adaptive)                                     |
| `public/apple-touch-icon.svg`           | 180×180 SVG ஐகான் (Apple fallback)                                       |