מניפסט של אפליקציית אינטרנט נכלל ב-Create React App כברירת מחדל, ומאפשר לכל אחד להתקין את אפליקציית React במכשיר שלו.
כברירת מחדל, Create React App (CRA) כוללת קובץ מניפסט של אפליקציית אינטרנט. שינוי הטקסט הזה יאפשר לך לשנות את האופן שבו האפליקציה מוצגת כאשר היא מותקנת במכשיר של המשתמש.
למה זה שימושי?
קובצי מניפסט של אפליקציית אינטרנט מאפשרים לשנות את האופן שבו מותקנת האפליקציה תיראה כמו במחשב או במכשיר הנייד של המשתמש. על ידי שינוי את המאפיינים בקובץ ה-JSON, אפשר לשנות כמה פרטים כולל:
- שם
- תיאור
- סמל האפליקציה
- צבע עיצוב
מסמכי התיעוד של MDN כוללת את כל המאפיינים שאפשר לשנות בפירוט.
שינוי של ברירת המחדל למניפסט
ב-CRA, קובץ מניפסט ברירת מחדל, /public/manifest.json נכלל באופן אוטומטי כאשר נוצרת אפליקציה חדשה:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
כך כל אחד יכול להתקין את האפליקציה במכשיר שלו ולראות
פרטי ברירת המחדל של האפליקציה. קובץ ה-HTML, public/index.html, גם
כולל רכיב <link> לטעינת המניפסט.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
דוגמה לאפליקציה שפותחה באמצעות CRA עם מניפסט שעבר שינוי file:
כדי לבדוק אם כל הנכסים פועלים כראוי בדוגמה הזו:
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על
מסך מלא
. - מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Application.
- בחלונית Application, לוחצים על הכרטיסייה Manifest.
סיכום
- אם אתם בונים אתר ולדעתכם אין צורך להתקין אותו
מסירים את המניפסט ואת הרכיב
<link>מקובץ ה-HTML מצביע עליה. - אם ברצונך שהמשתמשים יתקינו את האפליקציה במכשיר שלהם, עליך לשנות את את קובץ המניפסט (או ליצור קובץ אם אתם לא משתמשים ב-CRA) עם הנכסים האהובים עליכם. מסמכי תיעוד של MDN תקבלו הסבר על כל המאפיינים הנדרשים והאופציונליים.