PWACcompat - সমস্ত ব্রাউজারগুলির জন্য ওয়েব অ্যাপ ম্যানিফেস্ট৷

আপনি একটি ওয়েব অ্যাপ ডিজাইন করেছেন, এর কোড এবং পরিষেবা কর্মী লিখেছেন, এবং ব্যবহারকারীর ডিভাইসে 'ইনস্টল' করার সময় এটি কীভাবে আচরণ করা উচিত তা বর্ণনা করতে অবশেষে ওয়েব অ্যাপ ম্যানিফেস্ট যুক্ত করেছেন৷ এর মধ্যে রয়েছে উচ্চ-রেজোলিউশনের আইকন যেমন মোবাইল ফোনের লঞ্চার বা অ্যাপ সুইচার, অথবা ব্যবহারকারীর হোম স্ক্রীন থেকে খোলা হলে আপনার ওয়েব অ্যাপ কীভাবে শুরু হবে।

এবং যখন অনেক ব্রাউজার ওয়েব অ্যাপ ম্যানিফেস্টকে সম্মান করবে, প্রতিটি ব্রাউজার আপনার নির্দিষ্ট করা প্রতিটি মান লোড করবে না বা সম্মান করবে না। PWACompat লিখুন, একটি লাইব্রেরি যা আপনার ওয়েব অ্যাপ ম্যানিফেস্ট নেয় এবং স্বয়ংক্রিয়ভাবে বিভিন্ন আকারের আইকন, ফেভিকন, স্টার্টআপ মোড, রঙ ইত্যাদির জন্য প্রাসঙ্গিক meta বা link ট্যাগ সন্নিবেশ করে।

PWACompat একটি ওয়েব অ্যাপ ম্যানিফেস্ট নেয় এবং স্ট্যান্ডার্ড এবং নন-স্ট্যান্ডার্ড মেটা, লিঙ্ক, ইত্যাদি ট্যাগ যোগ করে।

এর মানে আপনাকে আর আপনার পৃষ্ঠাগুলিতে অসংখ্য, মানক এবং অ-মানক ট্যাগ (যেমন <link rel="icon" ... /> বা <meta name="orientation" ... /> ) যোগ করতে হবে না। এবং iOS হোম স্ক্রীন অ্যাপ্লিকেশনগুলির জন্য, PWACompat এমনকি গতিশীলভাবে স্প্ল্যাশ স্ক্রিন তৈরি করবে যাতে আপনাকে প্রতিটি ভিন্ন স্ক্রীন আকারের জন্য একটি তৈরি করতে হবে না।

ইমোজিটিপারের জন্য iOS স্প্ল্যাশ স্ক্রিন, PWACcompat দ্বারা তৈরি

PWACcompat ব্যবহার করে

PWACompat ব্যবহার করতে, আপনার সমস্ত পৃষ্ঠাগুলিতে আপনার ওয়েব অ্যাপ ম্যানিফেস্টের সাথে লিঙ্ক করতে ভুলবেন না:

<link rel="manifest" href="manifest.webmanifest" />

এবং তারপর হয় এই স্ক্রিপ্টটি অন্তর্ভুক্ত করুন, অথবা এটিকে একটি অ্যাসিঙ্ক লোড বান্ডেলে যুক্ত করুন :

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

PWACcompat আপনার ম্যানিফেস্ট ফাইল আনবে এবং আপনার ব্যবহারকারীর ব্রাউজারের জন্য প্রয়োজনীয় কাজ করবে, তারা মোবাইল ডিভাইস বা ডেস্কটপে থাকুক না কেন।

অনুসন্ধান সূচীকরণের জন্য আমরা এখনও অন্তত একটি উচ্চ-মানের শর্টকাট আইকন যোগ করার পরামর্শ দিই:

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

আরও তথ্যের জন্য, সেরা অনুশীলনগুলি দেখুন।

দ্রষ্টব্য: বিকল্পভাবে, আপনার জন্য গুরুত্বপূর্ণ প্ল্যাটফর্মগুলিতে ডায়নামিক import() স্টেমেন্ট সহ আপনার প্রধান বান্ডেলের পরে লাইব্রেরি লোড করার কথা বিবেচনা করুন। স্প্ল্যাশ স্ক্রিন থাকা দুর্দান্ত হলেও, সেগুলি আপনার সাইটের বাকি কোডের মতো গুরুত্বপূর্ণ নয়!

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

গভীরতায়

সমর্থিত ব্রাউজারগুলির জন্য, PWACompat আসলে কী করে? PWACcompat আপনার ওয়েব অ্যাপ ম্যানিফেস্ট লোড করবে এবং:

• ম্যানিফেস্টের সমস্ত আইকনের জন্য মেটা আইকন ট্যাগ তৈরি করুন (যেমন একটি ফেভিকন, পুরানো ব্রাউজারগুলির জন্য)
• বিভিন্ন ব্রাউজারগুলির জন্য ফলব্যাক মেটা ট্যাগ তৈরি করুন (যেমন iOS, ওয়েবকিট/ক্রোমিয়াম ফর্ক, ইত্যাদি) একটি ওয়েব অ্যাপ কীভাবে খোলা উচিত তা বর্ণনা করে
• ম্যানিফেস্টের উপর ভিত্তি করে থিমের রঙ সেট করে

সাফারির জন্য, PWACcompat এছাড়াও:

• apple-mobile-web-app-capable (একটি ব্রাউজার ক্রোম ছাড়া খোলা) ডিসপ্লে মোড standalone , fullscreen বা minimal-ui সেট করে
• apple-touch-icon ইমেজ তৈরি করে, স্বচ্ছ আইকনে ম্যানিফেস্ট ব্যাকগ্রাউন্ড যোগ করে: অন্যথায়, iOS স্বচ্ছতাকে কালো হিসেবে রেন্ডার করে
• ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলির জন্য তৈরি করা স্প্ল্যাশ চিত্রগুলির সাথে ঘনিষ্ঠভাবে মেলে, গতিশীল স্প্ল্যাশ চিত্র তৈরি করে

আপনি যদি আরও বেশি অবদান রাখতে চান বা অতিরিক্ত ব্রাউজার সমর্থনে সাহায্য করতে চান, PWACompat GitHub-এ রয়েছে ।

চেষ্টা কর

PWACcompat Airhorner , v8.dev এবং Emojityper- এ লাইভ। আপনার সাইটের হেডার HTML সহজ হতে পারে: শুধু ম্যানিফেস্ট নির্দিষ্ট করুন এবং PWACompat কে বাকিটা পরিচালনা করতে দিন।

📢🤣🎉