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

يتم تلقائيًا تضمين بيان تطبيق ويب في 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) لفتح "أدوات مطوري البرامج".
• انقر على علامة التبويب التطبيق.
• في لوحة التطبيق، انقر على علامة التبويب البيان.

الخاتمة

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