প্রতিক্রিয়া অ্যাপ তৈরি করে একটি ওয়েব অ্যাপ ম্যানিফেস্ট যোগ করুন

একটি ওয়েব অ্যাপ ম্যানিফেস্ট ডিফল্টভাবে Create 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 দিয়ে তৈরি একটি অ্যাপ্লিকেশনের একটি উদাহরণ রয়েছে যার একটি পরিবর্তিত ম্যানিফেস্ট ফাইল রয়েছে:

এই উদাহরণে সমস্ত বৈশিষ্ট্য সঠিকভাবে কাজ করছে কিনা তা খুঁজে বের করতে:

  • সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন পূর্ণ পর্দা .
  • DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
  • অ্যাপ্লিকেশন ট্যাবে ক্লিক করুন।
  • অ্যাপ্লিকেশন প্যানেলে, ম্যানিফেস্ট ট্যাবে ক্লিক করুন।

DevTool এর ম্যানিফেস্ট ট্যাব অ্যাপ ম্যানিফেস্ট ফাইল থেকে বৈশিষ্ট্য দেখায়।

উপসংহার

  1. আপনি যদি এমন একটি সাইট তৈরি করেন যা আপনার মনে হয় কোনো ডিভাইসে ইনস্টল করার প্রয়োজন নেই, তাহলে ম্যানিফেস্ট এবং HTML ফাইলের <link> উপাদানটি সরান যা এটিকে নির্দেশ করে।
  2. আপনি যদি চান যে ব্যবহারকারীরা তাদের ডিভাইসে অ্যাপ্লিকেশনটি ইনস্টল করুক, আপনার পছন্দের কোনো বৈশিষ্ট্য সহ ম্যানিফেস্ট ফাইলটি পরিবর্তন করুন (বা আপনি যদি CRA ব্যবহার না করেন তবে একটি তৈরি করুন)। MDN ডকুমেন্টেশন সমস্ত প্রয়োজনীয় এবং ঐচ্ছিক বৈশিষ্ট্য ব্যাখ্যা করে।