با 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 است که دارای یک فایل مانیفست اصلاح شده است:

برای اینکه بفهمید آیا همه ویژگی ها در این مثال به درستی کار می کنند:

• برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
• «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
• روی تب Application کلیک کنید.
• در پنل برنامه ، روی تب Manifest کلیک کنید.

نتیجه

1. اگر در حال ساختن سایتی هستید که فکر می کنید نیازی به نصب روی دستگاه نیست، مانیفست و عنصر <link> را در فایل HTML که به آن اشاره می کند حذف کنید.
2. اگر می‌خواهید کاربران برنامه را روی دستگاه خود نصب کنند، فایل مانیفست را تغییر دهید (یا اگر از CRA استفاده نمی‌کنید، یکی را با هر ویژگی که دوست دارید ایجاد کنید). مستندات MDN تمام ویژگی های مورد نیاز و اختیاری را توضیح می دهد.