חזרה לגלריהאימות והתחברות
הפיכה של המערכת לאפליקציה
איך בעצם אנחנו הופכים את המערכת לאפליקיית PWA( לא אנדרויד ולא IOS) שגם יתן לו המלצה להורדה מיד אחרי שנכנס לאפליקציה בעזרת POPUP
י
יונתן ליבשיץטקסט הפרומפט
אני רוצה להוסיף POPUP של "התקנת אפליקציה" שיוצג למשתמש בפעם הראשונה
שהוא פותח את האפליקציה בטלפון. הנה המפרט המדויק:
## התנהגות:
1. ה-POPUP יוצג רק במכשירים ניידים (mobile) - לא בדסקטופ.
2. ה-POPUP יוצג רק אם האפליקציה לא מותקנת כבר כ-PWA
(בדיקה: window.matchMedia('(display-mode: standalone)').matches === false
וגם navigator.standalone !== true ב-iOS).
3. ה-POPUP יוצג עם השהייה של 3 שניות אחרי טעינת האפליקציה.
4. אם המשתמש סגר את ה-POPUP - לשמור ב-localStorage מפתח
"install_prompt_dismissed" עם timestamp, ולא להציג אותו שוב
במשך 7 ימים.
5. לזהות את סוג המכשיר:
- iOS (iPhone/iPad): להציג הוראות ידניות (Safari → כפתור שיתוף →
"הוסף למסך הבית").
- Android/Chrome: להשתמש ב-event 'beforeinstallprompt' של הדפדפן
ולהציג כפתור "התקן עכשיו" שמפעיל את prompt() המקורי.
## עיצוב (RTL, עברית):
- POPUP במרכז המסך עם רקע כהה שקוף מאחור (overlay).
- כרטיס לבן עם פינות מעוגלות (rounded-2xl) וצל בולט.
- אייקון של האפליקציה (לוגו) למעלה במרכז, בגודל 64x64.
- כותרת: "התקן את האפליקציה" - גופן bold גדול.
- תת-כותרת: "קבל גישה מהירה ישירות ממסך הבית של המכשיר שלך"
בצבע אפור.
- ב-Android: כפתור ראשי כחול (bg-primary) "התקן עכשיו" עם
אייקון Download מ-lucide-react.
- ב-iOS: 3 שלבים מצויירים עם אייקונים:
שלב 1: לחץ על כפתור השיתוף (אייקון Share).
שלב 2: גלול ובחר "הוסף למסך הבית" (אייקון Plus).
שלב 3: לחץ "הוסף" בפינה הימנית העליונה (אייקון Check).
- כפתור "אולי בפעם אחרת" טקסטואלי באפור למטה.
- כפתור X לסגירה בפינה השמאלית-עליונה.
## מבנה טכני:
- קומפוננטה נפרדת בשם InstallPrompt.jsx תחת components/.
- שימוש ב-shadcn/ui Dialog או Card.
- אייקונים מ-lucide-react: Download, Share, Plus, Check, X,
Smartphone.
- אנימציה עדינה של כניסה (fade + slide up) באמצעות framer-motion.
- לכלול את הקומפוננטה ב-AppLayout או ב-App.jsx ברמה הגבוהה ביותר
כך שתוצג בכל עמוד.
## טקסטים בעברית:
- "התקן את האפליקציה"
- "קבל גישה מהירה ישירות ממסך הבית"
- "התקן עכשיו"
- "אולי בפעם אחרת"
- "כדי להתקין באייפון:"
- "1. לחץ על כפתור השיתוף בתחתית הדפדפן"
- "2. בחר 'הוסף למסך הבית'"
- "3. לחץ 'הוסף' בפינה העליונה"
צור את הקומפוננטה במלואה והוסף אותה לאפליקציה.