# 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) · 🇧🇦 [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) · 🇮🇳 [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"` দিয়ে কনফিগার করা হয়েছে, যার অর্থ ইনস্টল করা অ্যাপটি সম্পূর্ণ স্ক্রিন ব্যবহার করে — কোনো ব্রাউজার UI বা স্ট্যাটাস বার ওভারল্যাপ থাকে না। এর ফলে ড্যাশবোর্ডটি সত্যিকার অর্থেই নেটিভ বলে মনে হয়।

### অফলাইন সমর্থন

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`          | একাধিক আকার      | পুরোনো ব্রাউজার                           |

### স্বয়ংক্রিয় রেজিস্ট্রেশন

root layout-এর `<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** সেটিং অনুসরণ করে। আপনি যদি আপনার ইনস্ট্যান্সের নাম পরিবর্তন করে "My AI Gateway" রাখেন, ইনস্টল করা 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 ফলব্যাক)                              |