11.5 PWA תרגול
תרגול - PWA¶
תרגיל 1 - מניפסט מלא¶
צרו קובץ manifest.json עבור אפליקציית ניהול משימות:
- שם מלא ושם קצר בעברית
- תיאור האפליקציה
- מצב תצוגה standalone
- צבע ערכת נושא וצבע רקע
- כיוון RTL, שפה עברית
- אייקונים בגדלים: 72, 96, 128, 144, 192, 384, 512
- צילומי מסך (desktop ו-mobile)
- קיצורי דרך (shortcuts) לדף "משימות חדשה" ו"משימות היום"
הגדירו את ה-metadata המתאים ב-app/layout.tsx כולל תמיכה ב-Apple Web App.
תרגיל 2 - Service Worker בסיסי¶
כתבו Service Worker שמיישם:
- התקנה - שמירת דף הבית, דף אופליין, CSS ראשי, ואייקונים ב-cache
- הפעלה - ניקוי cache ישן (מחיקת caches עם שם שונה מהנוכחי)
- Fetch - אסטרטגיה משולבת:
- תמונות: Cache First
- בקשות API: Network First עם fallback ל-cache
- דפי HTML: Network First עם fallback לדף אופליין
- פונטים: Stale While Revalidate
תרגיל 3 - זיהוי מצב רשת ותמיכה אופליין¶
צרו מערכת תמיכה אופליין שכוללת:
א. Hook בשם useOnlineStatus שמחזיר את מצב הרשת
ב. קומפוננטת banner שמופיעה כשהמשתמש אופליין
ג. תור פעולות (action queue) שנשמר ב-localStorage:
- כשהמשתמש אופליין ומנסה לבצע פעולה (למשל יצירת משימה) - הפעולה נשמרת בתור
- כשהחיבור חוזר - כל הפעולות בתור נשלחות לשרת
ד. דף אופליין יפה עם הסבר למשתמש
תרגיל 4 - כפתור התקנה מותאם¶
צרו קומפוננטת התקנה מלאה שכוללת:
- זיהוי אם האפליקציה כבר מותקנת
- זיהוי אם הדפדפן תומך בהתקנה
- כפתור "התקן אפליקציה" שמופיע רק כשניתן להתקין
- הודעה "האפליקציה מותקנת" כשהמשתמש כבר התקין
- מודל עם הסבר על יתרונות ההתקנה
- זכירה אם המשתמש דחה את ההצעה (לא להציג שוב ל-7 ימים)
- התאמה למכשירים שונים (iOS דורש הסבר ידני, Android תומך ב-prompt)
תרגיל 5 - הגדרת next-pwa¶
הגדירו next-pwa עבור אפליקציית Next.js:
- הגדרת
next.config.jsעם next-pwa - כללי runtimeCaching מותאמים:
- Google Fonts: Cache First, שנה
- תמונות: Cache First, 30 יום, מקסימום 100 פריטים
- API: Network First, 10 דקות
- דפי HTML: Stale While Revalidate
- דף אופליין מותאם
- ביטול PWA בסביבת פיתוח
תרגיל 6 - עדכון אפליקציה¶
צרו מנגנון עדכון שמודיע למשתמש כשיש גרסה חדשה:
- זיהוי אוטומטי כשה-Service Worker מתעדכן
- הצגת banner "גרסה חדשה זמינה"
- כפתור "עדכן עכשיו" שטוען מחדש את הדף
- כפתור "אחר כך" שדוחה את העדכון
- אם המשתמש דוחה - הצגת badge קטן שמזכיר שיש עדכון
שאלות¶
- מה שלושת התנאים הבסיסיים שדפדפן דורש כדי להציע התקנת PWA?
- הסבירו את ההבדל בין אסטרטגיות המטמון: Cache First, Network First ו-Stale While Revalidate. מתי משתמשים בכל אחת?
- מה תפקיד ה-Service Worker ומה ההבדל בינו לבין Web Worker?
- מדוע חשוב לכלול אייקון בגודל 512x512 עם
purpose: "maskable"במניפסט? - כיצד מטפלים בעדכון Service Worker כשהמשתמש כבר משתמש באפליקציה?