Angular CLI দিয়ে একটি প্রগতিশীল ওয়েব অ্যাপ তৈরি করুন

আপনি কি আপনার অ্যাঙ্গুলার অ্যাপটিকে ইনস্টলযোগ্য করতে চান? আর অপেক্ষা করবেন না!

Minko Gechev

এই পোস্টে আপনারা শিখবেন, কীভাবে অ্যাঙ্গুলার কমান্ড লাইন ইন্টারফেস (CLI) ব্যবহার করে একটি প্রগ্রেসিভ ওয়েব অ্যাপ (PWA) তৈরি করতে হয়।

আপনি এই গাইড থেকে কোডের নমুনাটি গিটহাবে খুঁজে পেতে পারেন।

ইনস্টলযোগ্য PWA তৈরি করুন

আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনকে PWA-তে পরিণত করতে, আপনাকে শুধু একটি কমান্ড চালাতে হবে:

ng add @angular/pwa

এই কমান্ডটি যা করবে:

• ডিফল্ট ক্যাশিং কনফিগারেশন সহ একটি সার্ভিস ওয়ার্কার তৈরি করুন।
• একটি ম্যানিফেস্ট ফাইল তৈরি করুন, যা ব্রাউজারকে বলে দেয় যে ব্যবহারকারীর ডিভাইসে আপনার অ্যাপটি ইনস্টল করা হলে এটি কীভাবে কাজ করবে।
• index.html এ ম্যানিফেস্ট ফাইলের একটি লিঙ্ক যোগ করুন।
• index.html এ theme-color <meta> ট্যাগটি যোগ করুন।
• src/assets ডিরেক্টরিতে অ্যাপ আইকনগুলো তৈরি করুন।

ডিফল্টরূপে, প্রথম পেজ লোড হওয়ার কয়েক সেকেন্ডের মধ্যেই আপনার সার্ভিস ওয়ার্কারটি রেজিস্টার হয়ে যাওয়ার কথা। যদি তা না হয়, তাহলে registrationStrategy পরিবর্তন করার কথা বিবেচনা করুন।

আপনার PWA কাস্টমাইজ করুন

" Precaching with the Angular service worker" পোস্টটিতে অ্যাঙ্গুলার সার্ভিস ওয়ার্কার কীভাবে কনফিগার করতে হয় তা ব্যাখ্যা করা হয়েছে। সেখানে আপনি জানতে পারবেন, সার্ভিস ওয়ার্কার কোন রিসোর্সগুলো ক্যাশ করবে তা কীভাবে নির্দিষ্ট করতে হয় এবং এর জন্য এটি কোন কৌশল ব্যবহার করবে।

আপনার অ্যাপের ম্যানিফেস্ট ফাইল আপনাকে অ্যাপের নাম, সংক্ষিপ্ত নাম, আইকন, থিমের রঙ এবং অন্যান্য বিবরণ নির্দিষ্ট করার সুযোগ দেয়। আপনি যে সমস্ত প্রোপার্টি সেট করতে পারেন, সে সম্পর্কে জানতে 'Add a web app manifest' পোস্টটি পড়ুন।

Angular CLI দ্বারা তৈরি ম্যানিফেস্ট ফাইলটি একবার দেখে নিন:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

আপনি manifest.webmanifest এ প্রাসঙ্গিক মান পরিবর্তন করে এই প্রপার্টিগুলোর যেকোনোটি কাস্টমাইজ করতে পারেন।

একটি PWA তার index.html ফাইলে একটি link এলিমেন্টের মাধ্যমে ম্যানিফেস্ট ফাইলকে রেফারেন্স করে। ব্রাউজারটি রেফারেন্সটি খুঁজে পেলেই, এটি 'হোম স্ক্রিনে যোগ করুন' (Add to Home screen) প্রম্পটটি দেখাবে।

যেহেতু ng-add স্কিমেটিকস আপনার অ্যাপকে ইনস্টলযোগ্য করার জন্য প্রয়োজনীয় সবকিছু যোগ করে, তাই এটি কিছু শর্টকাট আইকন তৈরি করে যা ব্যবহারকারী অ্যাপটি তাদের ডেস্কটপে যোগ করার পর দেখানো হয়:

আপনার PWA প্রোডাকশনে ডেপ্লয় করার আগে ম্যানিফেস্ট প্রোপার্টি এবং আইকনগুলো কাস্টমাইজ করে নিন!

উপসংহার

একটি ইনস্টলযোগ্য অ্যাঙ্গুলার অ্যাপ তৈরি করতে:

1. Angular CLI ব্যবহার করে আপনার প্রজেক্টে @angular/pwa যোগ করুন।
2. আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী manifest.webmanifest ফাইলের অপশনগুলো সম্পাদনা করুন।
3. আপনার প্রোজেক্টের সাথে মানানসই করে src/assets/icons ডিরেক্টরিতে থাকা আইকনগুলো আপডেট করুন।
4. ঐচ্ছিকভাবে index.html এ theme-color সম্পাদনা করুন।