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

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

כדי לבדוק אם כל הנכסים פועלים באופן תקין בדוגמה הזו:

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

סיכום

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