أضِف بيان تطبيق ويب باستخدام ميزة "إنشاء تطبيق React".

يتم تلقائيًا تضمين بيان تطبيق الويب في تطبيق "إنشاء تطبيق React" ويتيح لأي مستخدم تثبيت تطبيق React على جهازه.

حسين جردية

يتضمّن خيار "إنشاء تطبيق React" (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) لفتح "أدوات مطوّري البرامج".
• انقر على علامة التبويب التطبيق.
• في لوحة التطبيق، انقر على علامة التبويب البيان.

الخلاصة

1. إذا كنت تنشئ موقعًا إلكترونيًا لا تحتاج إلى تثبيته على جهاز، يمكنك إزالة البيان والعنصر <link> من ملف HTML الذي يشير إليه.
2. إذا كنت تريد من المستخدمين تثبيت التطبيق على أجهزتهم، عدِّل ملف البيان (أو أنشئ ملفًا إذا كنت لا تستخدم CRA) باستخدام أي خصائص تريدها. تشرح وثائق MDN جميع السمات المطلوبة والاختيارية.