ওয়েব অ্যাপ ম্যানিফেস্ট গাইড
একটি ওয়েব অ্যাপ ম্যানিফেস্ট (site.webmanifest) হল একটি JSON ফাইল যা ইনস্টলযোগ্য ব্রাউজারকে আপনার অ্যাপের নাম, রঙ, ডিসপ্লে মোড এবং হোম স্ক্রিনে কোন আইকন আকার ব্যবহার করতে হবে তা বলে। এটিকে `<link rel='manifest' href='/site.webmanifest'>` এর সাথে লিঙ্ক করা ডেস্কটপ এবং Android-এ Chrome এবং Edge PWA ইনস্টল প্রম্পট সক্ষম করে৷ এটিকে 192×192 এবং 512×512 PNG আইকনগুলির সাথে যুক্ত করুন — উভয়ই favicon generator দ্বারা রপ্তানি করা হয়েছে — একটি সম্পূর্ণ PWA ফ্যাভিকন সেটআপের জন্য৷
ওয়েব অ্যাপ ম্যানিফেস্ট হল একটি JSON টেক্সট ফাইল যা `application/manifest+json` MIME টাইপের সাথে পরিবেশিত হয়। এটি আপনার চয়ন করা যেকোনো URL-এ বাস করে, কিন্তু ডোমেন রুটে কনভেনশনটি হল /site.webmanifest৷ আপনি `<head>` উপাদানের ভিতরে `<link rel='manifest' href='/site.webmanifest'>` ব্যবহার করে আপনার HTML থেকে এটি লিঙ্ক করেন। ব্রাউজারটি ম্যানিফেস্টটি পড়ে যখন এটি একটি ইনস্টল প্রম্পট দেখাতে হবে কিনা বা ইনস্টলেশনের পরে আপনার অ্যাপকে কীভাবে রেন্ডার করতে হবে তা মূল্যায়ন করছে৷
আইকন অ্যারে ম্যানিফেস্টের সবচেয়ে ফেভিকন-প্রাসঙ্গিক অংশ। প্রতিটি এন্ট্রি একটি src (ছবির URL), আকার (পিক্সেল মাত্রা), টাইপ (MIME প্রকার), এবং ঐচ্ছিকভাবে উদ্দেশ্য (হয় 'যেকোন', 'মাস্কেবল', বা 'যে কোনো মাস্কেবল') নির্দিষ্ট করে। সর্বনিম্ন, লঞ্চার আইকনের জন্য একটি 192×192 PNG এবং স্প্ল্যাশ স্ক্রিনের জন্য একটি 512×512 PNG প্রদান করুন৷ এগুলি ছাড়া, Chrome একটি ইনস্টল প্রম্পট দেখাবে না।
192×192 আইকনটি Android Chrome অ্যাপ লঞ্চার, সাম্প্রতিক অ্যাপ্লিকেশান সুইচার এবং বিজ্ঞপ্তি শেড ব্যবহার করে যখন আপনার PWA একটি ওয়েব পুশ বিজ্ঞপ্তি পাঠায়৷ এটি অবশ্যই একটি PNG হতে হবে, পুনঃনির্দেশ ছাড়াই এটির ঘোষিত URL-এ অ্যাক্সেসযোগ্য এবং সঠিক CORS শিরোনামগুলির সাথে পরিবেশন করা হবে যদি এটি আপনার ম্যানিফেস্ট থেকে আলাদা ডোমেনে থাকে৷ favicon generator সরাসরি ব্যবহারের জন্য প্রস্তুত android-chrome-192x192.png রপ্তানি করে৷
512×512 আইকনটি PWA স্প্ল্যাশ স্ক্রিনের জন্য ব্যবহৃত হয় যখন অ্যাপটি হোম-স্ক্রীন লঞ্চের পরে লোড হয়, ডেস্কটপে Chrome এবং Edge-এ ইনস্টল ডায়ালগ প্রিভিউ এবং Chrome OS অ্যাপ লঞ্চার। ম্যানিফেস্টে একটি অনুপস্থিত 512×512 এন্ট্রি ইনস্টলেশনকে ব্লক করে না তবে স্প্ল্যাশ স্ক্রিনে একটি জেনেরিক ব্রাউজার আইকনে পরিণত হয়৷ একটি পালিশ ইনস্টল অভিজ্ঞতার জন্য সর্বদা এটি অন্তর্ভুক্ত করুন।
মাস্কেবল আইকন হল একটি Android-নির্দিষ্ট বর্ধন। Android অভিযোজিত আইকন সিস্টেম অ্যাপ আইকনগুলিতে জ্যামিতিক মুখোশ (বৃত্ত, কাঠবিড়ালি, টিয়ারড্রপ, গোলাকার আয়তক্ষেত্র) প্রয়োগ করে এবং ডিভাইস প্রস্তুতকারকের দ্বারা আকৃতি পরিবর্তিত হয়। একটি আদর্শ 'যেকোনো' আইকনের প্রান্তগুলি এই মুখোশগুলি দ্বারা ক্লিপ করা থাকতে পারে। একটি 'মাস্কেবল' আইকনে সেফ-জোন প্যাডিং রয়েছে — প্রয়োজনীয় আর্টওয়ার্কটিকে ছবির 80% কেন্দ্রের মধ্যে রাখুন (সেফ জোন সার্কেল) — যাতে লোগো ক্লিপ না করেই যেকোনো মাস্ক প্রয়োগ করা যায়।
ম্যানিফেস্টে একটি মাস্কযোগ্য আইকন ঘোষণা করতে, `'purpose': 'maskable'`: `{ "src": "/android-chrome-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }` এর সাথে একই আকারের জন্য একটি দ্বিতীয় এন্ট্রি যোগ করুন। আপনি একত্রিত করতে পারেন: একটি এন্ট্রিতে `'purpose': 'any maskable'`। জেনারেটরের মাস্কেবল এক্সপোর্ট বিকল্প ব্যবহার করে অতিরিক্ত প্যাডিং সহ আপনার মুখোশযোগ্য আইকন তৈরি করুন।
নাম এবং সংক্ষিপ্ত_নাম ক্ষেত্রগুলি নিয়ন্ত্রণ করে যে কীভাবে আপনার অ্যাপ হোম স্ক্রিনে এবং অ্যাপ ড্রয়ারে লেবেল করা হয়। `name` হল ইনস্টল প্রম্পটের সময় দেখানো সম্পূর্ণ অ্যাপের নাম। `short_name` হল হোম স্ক্রিনে আইকনের নীচে লেবেল — ছোট পর্দায় কাটা এড়াতে এটিকে 12 অক্ষরের নিচে রাখুন। ইনস্টল প্রম্পট প্রদর্শিত হওয়ার জন্য উভয় ক্ষেত্রই প্রয়োজন।
থিম_রং ক্ষেত্রটি ব্রাউজার অ্যাড্রেস বারের রঙ Android Chrome এ সেট করে যখন ব্যবহারকারী আপনার সাইটে নেভিগেট করে (শুধু যখন PWA ইনস্টল করা হয় তখন নয়)। এটি স্বতন্ত্র PWA মোডে টুলবারের রঙও সেট করে। হেক্স মান হিসাবে আপনার প্রাথমিক ব্র্যান্ডের রঙ ব্যবহার করুন। ম্যানিফেস্টের থিম_রঙ পড়ে না এমন ব্রাউজারগুলির জন্য আপনার HTML-এ একটি মিলে যাওয়া `<meta name='theme-color' content='#YOUR_COLOR'>` যোগ করুন।
background_color ক্ষেত্র PWA লঞ্চ এবং আপনার অ্যাপের সামগ্রীর প্রথম পেইন্টের মধ্যে দেখানো স্প্ল্যাশ স্ক্রীনের পটভূমির রঙ নিয়ন্ত্রণ করে। একটি ঝাঁকুনি ফ্ল্যাশ প্রতিরোধ করতে আপনার অ্যাপের পটভূমি (সাধারণত সাদা বা প্রাথমিক ব্র্যান্ডের রঙ) মেলে এটি সেট করুন। ব্যাকগ্রাউন্ড_রঙ আপনার প্রকৃত অ্যাপের ব্যাকগ্রাউন্ডের সাথে মেলে না, ব্যবহারকারীরা স্টার্টআপের সময় একটি রঙের লাফ দেখতে পান।
প্রদর্শন ক্ষেত্র নির্ধারণ করে কিভাবে ইনস্টলেশনের পরে PWA প্রদর্শিত হবে। `standalone` ব্রাউজার অ্যাড্রেস বার এবং নেভি বোতাম লুকিয়ে রাখে, অ্যাপটিকে একটি নেটিভ অ্যাপের মতো দেখায়। `minimal-ui` একটি ন্যূনতম নেভিগেশন বার রাখে। `fullscreen` স্ট্যাটাস বার সহ সবকিছু সরিয়ে দেয়। `browser` সম্পূর্ণ ব্রাউজার UI দেখায়। বেশিরভাগ PWA-এর জন্য, `standalone` হল সঠিক পছন্দ৷ প্রদর্শন `browser` এ সেট করা থাকলে ইনস্টল প্রম্পট প্রদর্শিত হবে না।
start_url ক্ষেত্রটি নির্দিষ্ট করে যে ব্যবহারকারী হোম স্ক্রীন থেকে ইনস্টল করা PWA চালু করলে কোন URLটি খুলবে৷ সর্বদা এটি অন্তর্ভুক্ত করুন — এটি ছাড়া, Android সেই URLটি খোলে যেখানে ম্যানিফেস্টটি আবিষ্কৃত হয়েছিল, যা আপনার হোম পৃষ্ঠার পরিবর্তে একটি গভীর-লিঙ্ক পৃষ্ঠা হতে পারে৷ বেশিরভাগ সাইটের জন্য `'start_url': '/'` ব্যবহার করুন, অথবা যদি আপনার অ্যাপকে একটি নির্দিষ্ট রুটে শুরু করতে হয় তাহলে একটি নির্দিষ্ট URL ব্যবহার করুন।
Chrome DevTools-এ ম্যানিফেস্ট সমস্যা ডিবাগ করা সহজ। DevTools (F12) খুলুন, অ্যাপ্লিকেশন ট্যাবে নেভিগেট করুন এবং বাম প্যানেলে ম্যানিফেস্টে ক্লিক করুন। Chrome আপনার ম্যানিফেস্টের একটি পার্স করা ভিউ, কোনো পার্স ত্রুটি, আইকন আনয়ন ব্যর্থতা এবং একটি 'ইনস্টলযোগ্যতা' চেকলিস্ট দেখায় যা ব্যাখ্যা করে যে কেন ইনস্টল প্রম্পট দেখানো হচ্ছে না। সাধারণ সমস্যাগুলির মধ্যে আইকন পাওয়া যায়নি (404), ভুল MIME প্রকার, বা 192×192 আইকন অনুপস্থিত।
ম্যানিফেস্টটি সঠিকভাবে পরিবেশন করার জন্য দুটি সার্ভার-সাইড কনফিগারেশন প্রয়োজন৷ প্রথমত, ফাইলটি অবশ্যই `Content-Type: application/manifest+json` দিয়ে পরিবেশন করতে হবে। দ্বিতীয়ত, যদি আপনার আইকনগুলি একটি CDN-এ থাকে বা ম্যানিফেস্ট থেকে ভিন্ন উৎসের হয়, তাহলে আইকনের প্রতিক্রিয়াগুলিতে অবশ্যই উপযুক্ত CORS হেডার (`Access-Control-Allow-Origin: *` বা আপনার ডোমেন) অন্তর্ভুক্ত থাকতে হবে। আইকন ফাইলগুলিতে CORS শিরোনাম অনুপস্থিত ব্রাউজার ম্যানিফেস্টটিকে অবৈধ হিসাবে বিবেচনা করবে৷
ফ্রেমওয়ার্কের জন্য যেগুলি স্বয়ংক্রিয়ভাবে ম্যানিফেস্ট তৈরি করে, জেনারেট হওয়া ফাইলে আপনার প্রকৃত আইকনের আকার এবং রঙ অন্তর্ভুক্ত রয়েছে তা যাচাই করুন৷ Next.js আপনার /app/manifest.ts এক্সপোর্ট থেকে একটি ম্যানিফেস্ট তৈরি করে৷ React অ্যাপ তৈরি করুন একটি /public/manifest.json তৈরি করে। Vite ডিফল্টরূপে একটি ম্যানিফেস্ট তৈরি করে না — একটি ম্যানুয়ালি তৈরি করুন। সমস্ত ক্ষেত্রে, ডিফল্ট স্থানধারক আইকনগুলির পরিবর্তে আপনার প্রকৃত ব্র্যান্ডেড আইকন ফাইলগুলি উল্লেখ করতে আইকন অ্যারে আপডেট করুন৷
এটি কিভাবে কাজ করে
- 1
192×192 এবং 512×512 PNG আইকন তৈরি করুন
আপনার 512×512 লোগো PNG বা SVG [favicon generator](tool:favicon-generator) এ আপলোড করুন৷ ডাউনলোড প্যাকেজে রয়েছে android-chrome-192x192.png এবং android-chrome-512x512.png সরাসরি ব্যবহারের জন্য প্রস্তুত।
- 2
site.webmanifest তৈরি করুন
ন্যূনতম: `name`, `short_name`, `icons` (192 এবং 512 এন্ট্রি), `theme_color`, `background_color`, এবং `display: 'standalone'` দিয়ে একটি JSON ফাইল তৈরি করুন৷ জেনারেটর প্যাকেজে একটি প্রাক-ভরা ম্যানিফেস্ট টেমপ্লেট রয়েছে।
- 3
সঠিক MIME প্রকারের সাথে ম্যানিফেস্ট পরিবেশন করুন৷
`Content-Type: application/manifest+json` এর সাথে .webmanifest ফাইল পরিবেশন করতে আপনার সার্ভার কনফিগার করুন। Apache-এ, .htaccess-এ `AddType application/manifest+json .webmanifest` যোগ করুন। Nginx-এ, mime.types-এ MIME প্রকার যোগ করুন।
- 4
HTML-এ ম্যানিফেস্ট লিঙ্ক করুন
আপনার `<head>` এর ভিতরে `<link rel='manifest' href='/site.webmanifest'>` যোগ করুন। এছাড়াও ম্যানিফেস্ট theme_color পড়ে না এমন ব্রাউজারগুলির জন্য `<meta name='theme-color' content='#YOUR_COLOR'>` যোগ করুন।
- 5
Chrome DevTools দিয়ে যাচাই করুন
Chrome DevTools > Application > Manifest খুলুন। নিশ্চিত করুন যে কোনও ত্রুটি দেখানো হয়নি এবং সমস্ত আইকন সমাধান হয়। PWA ইন্সটল প্রম্পটের জন্য সঠিক মানদণ্ড পূরণ বা অপূরণের জন্য ইনস্টলেবিলিটি বিভাগটি দেখুন।
- 6
ইনস্টল প্রম্পট পরীক্ষা করুন
Android Chrome-এ, আপনার সাইটে নেভিগেট করুন। যদি সমস্ত মানদণ্ড পূরণ করা হয়, Chrome ব্রাউজার মেনুতে একটি ইনস্টল ব্যানার বা 'হোম স্ক্রীনে যোগ করুন' বিকল্প দেখায়। ইনস্টলেশনের পরে, স্প্ল্যাশ স্ক্রিনের পটভূমির রঙ এবং হোম-স্ক্রীন আইকন সঠিকভাবে রেন্ডার যাচাই করুন।
এখনই চেষ্টা করুন
আপনার PWA আইকন প্যাকেজ তৈরি করুন৷
ফেভিকন জেনারেটরসাধারণ প্রশ্ন
একটি বেসিক ওয়েবসাইটের জন্য একটি ওয়েব অ্যাপ ম্যানিফেস্ট প্রয়োজন?+
না — যদি আপনি Android এবং ডেস্কটপ Chrome/Edge-এ PWA ইনস্টল-টু-হোম-স্ক্রীন প্রম্পট চান। favicon.ico একাই ব্রাউজার ট্যাবগুলি পরিচালনা করে৷ আপনি যখন সমৃদ্ধ মোবাইল এবং ডেস্কটপ ইনস্টল অভিজ্ঞতা সক্ষম করতে চান তখন ম্যানিফেস্ট যোগ করুন।
ওয়েব অ্যাপ ম্যানিফেস্টে কোন আইকন আকারগুলি যায়?+
সর্বনিম্ন: 192×192 (Android লঞ্চার) এবং 512×512 (স্প্ল্যাশ স্ক্রিন এবং পূর্বরূপ ইনস্টল করুন)। অভিযোজিত Android আইকন সমর্থনের জন্য উভয় আকারের মাস্কযোগ্য ভেরিয়েন্ট যোগ করুন এবং আপনি অতিরিক্ত ঘনত্বের কভারেজ চাইলে 384×384।
ম্যানিফেস্টে theme_color এবং background_color এর মধ্যে পার্থক্য কি?+
theme_color ব্রাউজার অ্যাড্রেস বার এবং টুলবারের রঙ সেট করে। background_color আপনার অ্যাপের প্রথম পেইন্টের আগে দেখানো স্প্ল্যাশ স্ক্রিনের পটভূমির রঙ সেট করে। একটি নির্বিঘ্ন ইনস্টল এবং লঞ্চ অভিজ্ঞতার জন্য আপনার ব্র্যান্ডের সাথে মেলে উভয় সেট করুন।
কেন Chrome আমার PWA এর জন্য একটি ইনস্টল প্রম্পট দেখাচ্ছে না?+
সবচেয়ে সাধারণ কারণগুলি হল: অনুপস্থিত বা অবৈধ ম্যানিফেস্ট, 192×192 আইকন অনুপস্থিত, 404 রিটার্ন করা আইকন, সঠিক MIME প্রকারের সাথে ম্যানিফেস্ট পরিবেশিত হয়নি, বা HTTPS-এর মাধ্যমে সাইটটি পরিবেশিত হচ্ছে না৷ সঠিক ইনস্টলেবিলিটি ব্যর্থতার কারণ দেখতে Chrome DevTools > Application > Manifest ব্যবহার করুন।
একটি মুখোশযোগ্য আইকন কি এবং আমার কি একটি প্রয়োজন?+
একটি মুখোশযোগ্য আইকনে নিরাপদ-জোন প্যাডিং অন্তর্ভুক্ত থাকে যাতে Android আপনার লোগো ক্লিপ না করেই বৃত্তাকার বা স্কুইরাকল মাস্ক প্রয়োগ করতে পারে। আপনার হোম-স্ক্রীন আইকনের জন্য একটি প্রয়োজন Android ডিভাইসগুলিতে সঠিক দেখাতে যা অ-বর্গাকার অভিযোজিত আইকন আকার ব্যবহার করে। ম্যানিফেস্ট আইকন অ্যারেতে `'purpose': 'maskable'` দিয়ে এটি ঘোষণা করুন।
আমি কি ওয়েব অ্যাপ ম্যানিফেস্টে SVG আইকন ব্যবহার করতে পারি?+
কিছু ম্যানিফেস্ট আইকন প্রসঙ্গে Chromium SVG সমর্থন করে, কিন্তু PNG হল ক্রস-ব্রাউজার ইনস্টল UI-এর জন্য সর্বজনীনভাবে নিরাপদ ডিফল্ট। সর্বদা PNG 192 এবং 512 এন্ট্রি অন্তর্ভুক্ত করুন। আপনি কোন ক্ষতি ছাড়াই তাদের পাশাপাশি একটি SVG এন্ট্রি যোগ করতে পারেন।
আমার ওয়েব ম্যানিফেস্ট বৈধ কিনা আমি কিভাবে পরীক্ষা করব?+
Chrome DevTools (F12) > অ্যাপ্লিকেশন > ম্যানিফেস্ট খুলুন। Chrome পার্স ত্রুটি, আইকন আনয়ন ব্যর্থতা, এবং একটি সম্পূর্ণ ইনস্টলেবিলিটি চেকলিস্ট দেখায়। রিপোর্ট করা কোনো সমস্যা সমাধান করুন, তারপর Chrome-এর ঠিকানা বার থেকে 'অ্যাড টু হোম স্ক্রীন' বিকল্পটি ব্যবহার করে ইনস্টল প্রম্পটটি পুনরায় পরীক্ষা করুন।