এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

প্রগতিশীল ওয়েব অ্যাপস: ট্যাব থেকে টাস্কবার পর্যন্ত

1. স্বাগতম

এই ল্যাবে, আপনি একটি বিদ্যমান ওয়েব অ্যাপ্লিকেশন নেবেন এবং এটিকে ইনস্টলযোগ্য করে তুলবেন৷ প্রোগ্রেসিভ ওয়েব অ্যাপ ওয়ার্কশপের জন্য সহচর কোডল্যাবগুলির একটি সিরিজের মধ্যে এটি চতুর্থ ৷ আগের কোডল্যাবটি ছিল IndexedDB । এই সিরিজে আরও চারটি কোডল্যাব রয়েছে।

আপনি কি শিখবেন

হাতে একজন সেবা কর্মী লিখুন
একটি বিদ্যমান ওয়েব অ্যাপ্লিকেশনে একজন পরিষেবা কর্মী যোগ করুন
অফলাইনে সংস্থানগুলি উপলব্ধ করতে পরিষেবা কর্মী এবং ক্যাশে স্টোরেজ API ব্যবহার করুন৷

আপনি কি জানতে হবে

বেসিক এইচটিএমএল এবং জাভাস্ক্রিপ্ট

আপনি কি প্রয়োজন হবে

একটি ব্রাউজার যা PWA ইনস্টলেশন সমর্থন করে

2. সেট আপ করুন

এই কোডল্যাবটি সম্পূর্ণ করার জন্য প্রয়োজনীয় স্টার্টার কোডটি ক্লোনিং বা ডাউনলোড করে শুরু করুন:

আপনি যদি রেপো ক্লোন করেন, নিশ্চিত করুন যে আপনি pwa04--tab-to-taskbar শাখায় আছেন। জিপ ফাইলটিতে সেই শাখার কোডও রয়েছে।

এই কোডবেসের জন্য Node.js 14 বা উচ্চতর প্রয়োজন। কোডটি উপলব্ধ হয়ে গেলে, আপনার প্রয়োজনীয় সমস্ত নির্ভরতা ইনস্টল করার জন্য কোডের ফোল্ডারে কমান্ড লাইন থেকে npm ci চালান। তারপর, কোডল্যাবের জন্য ডেভেলপমেন্ট সার্ভার শুরু করতে npm start চালান।

সোর্স কোডের README.md ফাইলটি সমস্ত বিতরণ করা ফাইলের জন্য একটি ব্যাখ্যা প্রদান করে। এছাড়াও, এই কোডল্যাব জুড়ে আপনি যে মূল বিদ্যমান ফাইলগুলির সাথে কাজ করবেন তা নিম্নরূপ:

কী ফাইল

index.html - প্রধান অ্যাপ্লিকেশন HTML

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

ওয়েব অ্যাপ ম্যানিফেস্ট ফাইলগুলি আপনার পিডব্লিউএ বর্ণনা করে যাতে, একটি কার্যকরী পরিষেবা কর্মী সহ, একটি ব্রাউজার জানে যে আপনার ওয়েব অ্যাপটি ইনস্টলযোগ্য এবং গুরুত্বপূর্ণভাবে, এটি যে ডিভাইসে ইনস্টল করা হবে তাতে কীভাবে উপস্থাপন করা যায়। প্রথমত, যদিও, এটি তৈরি করা প্রয়োজন। আপনার ওয়েব অ্যাপের public ফোল্ডারে manifest.json নামে একটি ফাইল যুক্ত করুন এবং এতে নিম্নলিখিতগুলি যুক্ত করুন:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

iOS ডিভাইসের জন্য একটি অ্যাপল টাচ আইকন অন্তর্ভুক্ত করতে ভুলবেন না। index.html এ <head> এ <title> ট্যাগের ঠিক পরে কোডের নিচের লাইনটি যোগ করুন

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

ব্যাখ্যা

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

4. PWA-তে ম্যানিফেস্ট সংযুক্ত করুন

তৈরি করা ম্যানিফেস্ট ফাইলের সাথে, এটি PWA এর সাথে যুক্ত হওয়ার জন্য এটি সংযুক্ত করা প্রয়োজন। এটি করার জন্য, index.html খুলুন এবং <head> এ <title> ট্যাগের ঠিক নীচে নিম্নলিখিতটি যোগ করুন:

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

যে বিল্ড টুল ব্যবহার করা হচ্ছে তা public ডিরেক্টরীতে সমস্ত ফাইলকে এমনভাবে প্রকাশ করবে যেন সেগুলি প্রোজেক্টের মূলে রয়েছে, যখন সাইটটি উত্পাদনের জন্য তৈরি করা হয় তখন সেগুলি পরিবর্তন ছাড়াই সরানো হয়েছে তা নিশ্চিত করে৷ public ডিরেক্টরীতে থাকা একটি ফাইলের ইউআরএলটিকে আপনার সার্ভার রুটে এমনভাবে ব্যবহার করতে ভুলবেন না, যেমন আমরা এখানে করি।

ব্যাখ্যা

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

5. শর্টকাট যোগ করুন

আপনার পিডব্লিউএকে একটি ডিভাইসের সাথে আরও গভীরভাবে একীভূত করার একটি দুর্দান্ত উপায় হল আপনার অ্যাপে নির্দিষ্ট কার্যকারিতার জন্য প্রসঙ্গ মেনু শর্টকাটগুলি প্রদান করা। PWA-তে নাইট মোড টগল night বা day একটি mode কোয়েরি প্যারামিটার সেট করে মোড বেছে নেওয়ার অনুমতি দেয়। manifest.json এ দুটি শর্টকাট সেট আপ করুন যা নিম্নলিখিতগুলি করে:

night বা day মোডে PWA শুরু করে
একটি আইকনের জন্য 150x150 আকারে /images/logo.svg ব্যবহার করে

6. অভিনন্দন!

আপনি এইমাত্র শিখেছেন কিভাবে একটি ওয়েব অ্যাপ ম্যানিফেস্ট ফাইল তৈরি করতে হয়, এটিকে একটি ওয়েব পৃষ্ঠায় সংযুক্ত করতে হয় এবং এটি ইনস্টল হয়ে গেলে অ্যাপ শর্টকাট যোগ করতে হয়।

সিরিজের পরবর্তী কোডল্যাব হল প্রম্পটিং এবং মেজারিং ইন্সটল