הוספה של מניפסט של אפליקציית אינטרנט באמצעות Create React App

מניפסט של אפליקציית אינטרנט נכלל ב-Create React App כברירת מחדל, ומאפשר לכל אחד להתקין את אפליקציית React במכשיר שלו.

Houssein Djirdeh

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 עם קובץ מניפסט שעבר שינוי:

כדי לבדוק אם כל הנכסים פועלים כמו שצריך בדוגמה הזו:

• כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא .
• מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
• לוחצים על הכרטיסייה Application.
• בחלונית Application, לוחצים על הכרטיסייה Manifest.

סיכום

1. אם אתם בונים אתר שלדעתכם לא צריך להתקין במכשיר, תוכלו להסיר את המניפסט ואת הרכיב <link> בקובץ ה-HTML שמצביע עליו.
2. אם אתם רוצים שהמשתמשים יתקינו את האפליקציה במכשיר שלהם, תוכלו לשנות את קובץ המניפסט (או ליצור קובץ חדש אם אתם לא משתמשים ב-CRA) עם כל המאפיינים שתרצו. במסמכי העזרה של MDN מוסבר על כל המאפיינים הנדרשים והאופציונליים.