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

يتم تلقائيًا تضمين بيان تطبيق الويب في Create React App ويتيح لأي مستخدم تثبيت تطبيق React الخاص بك على جهازه.

Houssein Djirdeh

يتضمن Create React App (CRA) بيان تطبيق ويب تلقائيًا. تعديل هذا تغيير طريقة عرض تطبيقك عند تثبيته على جهاز المستخدم.

لماذا يُعدّ ذلك مفيدًا؟

توفر ملفات بيان تطبيق الويب القدرة على تغيير طريقة تثبيت التطبيق على سطح المكتب أو الجهاز المحمول للمستخدم. من خلال تعديل الخاصة بـ في ملف جسون، يمكنك تعديل عدد من التفاصيل في التطبيق، بما في ذلك:

• الاسم
• الوصف
• رمز التطبيق
• لون المظهر

وثائق 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 جميع السمات المطلوبة والاختيارية.