# 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) · 🇮🇳 [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 מופצת כיישום אינטרנט מתקדם (PWA) שניתן להתקנה מלאה. כאשר ניגשים ללוח הבקרה מכל דפדפן במכשיר נייד — Android ‏(Chrome) או iOS ‏(Safari) — ניתן לבחור באפשרות "הוספה למסך הבית" ולקבל חוויה דמוית יישום מקורי, ללא צורך בחנות יישומים. ## מהו PWA? יישום אינטרנט מתקדם הופך את לוח הבקרה האינטרנטי של OmniRoute למשהו שנראה ומתנהג כמו יישום מקורי למכשירים ניידים. לאחר ההתקנה, הוא: - מופעל ממסך הבית עם סמל משלו - נפתח במסך מלא — ללא שורת הכתובת או ממשק הלשוניות של הדפדפן - פועל במצב לא מקוון באמצעות דף קישוריות ייעודי - שומר נכסים סטטיים במטמון לטעינה מהירה יותר - תומך הן בכיוון לאורך והן בכיוון לרוחב ## התקנה ### Android ‏(Chrome) 1. פתחו את לוח הבקרה של OmniRoute ב-Chrome: `http://YOUR_IP:20128` 2. Chrome יציג באופן אוטומטי כרזה של **"הוספת OmniRoute למסך הבית"**, או: - הקישו על תפריט **⋮** (שלוש נקודות) ← **"הוספה למסך הבית"** או **"התקנת האפליקציה"** 3. אשרו את ההודעה 4. OmniRoute יופיע במסך הבית כיישום עצמאי ### iOS ‏(Safari) 1. פתחו את לוח הבקרה של OmniRoute ב-Safari: `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`, הכינויים של ה-API ללקוח `/v1`, `/v1beta`, `/models`, `/chat`, `/responses`, `/codex`, וכן `/callback`, `/login`; ההתאמה אינה תלויה באותיות רישיות) | עקיפה (לעולם אינם נשמרים במטמון) | עוברים תמיד ישירות לשרת — ולעולם אינם מיורטים על ידי ה-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 נרשם אוטומטית באמצעות הרכיב `` בפריסת השורש. לא נדרשת כל פעולה מצד המשתמש — ניתן להתקין את היישום ברגע שהדפדפן מזהה את המניפסט ואת ה-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" } ] } ``` ### Service Worker (`public/sw.js`) Service Worker בסיסי (ללא תלויות במסגרת עבודה) הכולל: - **שלב ההתקנה**: שומר מראש במטמון את מעטפת היישום (שורש, דף לא מקוון, מניפסט וסמלים) - **שלב ההפעלה**: מנקה גרסאות ישנות של המטמון ומשייך את כל הלקוחות - **שלב האחזור**: ניתוב חכם המבוסס על סוג הבקשה (ניווט, משאב סטטי, API) - **ניהול גרסאות המטמון**: `omniroute-pwa-v3` — הגדילו ערך זה כדי לאלץ יצירת מטמון חדש בעת עדכון ### מטא-נתונים של הפריסה (`src/app/layout.tsx`) פריסת השורש מספקת את כל תגי המטא הנדרשים לתאימות PWA: - קישור `manifest` אל `/manifest.webmanifest` - `apple-web-app-capable: true` עבור מצב עצמאי ב-iOS - `apple-web-app-status-bar-style: black-translucent` - `mobile-web-app-capable: yes` עבור Chrome ב-Android - `theme-color: #0b0f1a` - `viewport-fit: cover` עבור עיבוד מקצה לקצה ### רכיב: `PwaRegister` רכיב לקוח זה, הממוקם ב-`src/shared/components/PwaRegister.tsx`: 1. מופעל בעת הטעינה הראשונית (בצד הלקוח בלבד) 2. בודק אם הדפדפן תומך ב-`serviceWorker` 3. רושם את `/sw.js` באופן שקט (מתעלמים משגיאות כדי שלא לחסום את היישום) 4. אינו מעבד דבר (`return null`) — זהו רכיב המיועד לתופעות לוואי בלבד ## שימוש עם Termux (Android) בעת הפעלת OmniRoute ב-Android באמצעות Termux, ה-PWA פועל באופן חלק: 1. הפעילו את OmniRoute ב-Termux: `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 שולחני - **טלוויזיה חכמה עם דפדפן**: גשו ללוח הבקרה במסך מלא ## התאמה אישית ### שם המופע כותרת ה-PWA מכבדת את ההגדרה **שם המופע** מתוך `Dashboard → Settings`. אם תשנו את שם המופע שלכם ל-"שער ה-AI שלי", ה-PWA המותקן יציג שם זה. ### סמל אתר מותאם אישית אם תעלו סמל אתר מותאם אישית דרך `Dashboard → Settings`, סמל ה-PWA במחשב ישקף את הסמל המותאם אישית. סמלים במסך הבית במכשירים ניידים משתמשים בקבצים המוכנים מראש `icon-512.png` ו-`apple-touch-icon.png`. ## מגבלות - **אין התראות דחיפה** — ה-service worker אינו מממש את Push API. במקום זאת, ההתראות מטופלות על ידי אפליקציית Electron. - **אין סנכרון ברקע** — פעולות לא מקוונות אינן מוכנסות לתור להפעלה חוזרת. ה-PWA מיועד בעיקר להצגת לוח מחוונים. - **הגבלות iOS** — Safari ב-iOS אינו תומך בכל תכונות ה-PWA (לדוגמה, בקשות ההתקנה הן ידניות, ופעילותם של service workers ברקע מוגבלת). - **גודל המטמון** — ה-service worker שומר במטמון נכסים סטטיים בלבד. מטעני תגובה גדולים מנתיבי `/api/` לעולם אינם נשמרים במטמון. - **סמלים מותאמים אישית בנייד** — שינוי ה-favicon בהגדרות אינו מעדכן את סמל מסך הבית בנייד (לשם כך יש ליצור מחדש את סמלי ה-PWA). ## עיון בקבצים | קובץ | מטרה | | --------------------------------------- | -------------------------------------------------------------- | | `src/app/manifest.ts` | נתיב manifest של Next.js (יוצר את `manifest.webmanifest`) | | `public/sw.js` | Service worker עם לוגיקת שמירה במטמון | | `src/shared/components/PwaRegister.tsx` | רכיב לקוח שרושם את ה-service worker | | `src/app/offline/page.tsx` | דף חלופי למצב לא מקוון עם מחוון מצב בזמן אמת | | `src/app/layout.tsx` | פריסת שורש עם מטא-נתוני PWA‏ (apple-web-app, theme-color וכו') | | `public/icon-512.png` | סמל PNG בגודל 512×512 (Android, מסך פתיחה) | | `public/apple-touch-icon.png` | סמל PNG בגודל 180×180 (מסך הבית של iOS) | | `public/icon-192.svg` | סמל SVG בגודל 192×192 (סמל מותאם של Android) | | `public/apple-touch-icon.svg` | סמל SVG בגודל 180×180 (חלופה עבור Apple) |