প্রগতিশীল ওয়েব অ্যাপস: প্রম্পটিং & পরিমাপ ইনস্টল

1. স্বাগতম

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

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

• একটি কাস্টম ইন-অ্যাপ PWA ইনস্টল বোতাম তৈরি করুন

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

• জাভাস্ক্রিপ্ট

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

• একটি ব্রাউজার যা পরিষেবা কর্মীদের সমর্থন করে

2. সেট আপ করুন

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

রেপো ক্লোন করুন

জিপ ডাউনলোড করুন

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

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

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

কী ফাইল

• js/main.js - প্রধান অ্যাপ্লিকেশন জাভাস্ক্রিপ্ট ফাইল

3. ইনস্টল বোতাম সেট আপ করুন৷

ইনস্টল প্রম্পট যোগ করার আগে এবং ইনস্টল ইভেন্টগুলি ক্যাপচার করার আগে, কিছু সেটআপ করা দরকার। প্রথমে, একটি js/lib/install.js ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

তারপর, DOMContentLoaded ইভেন্টের নীচে js/main.js এ, নিম্নলিখিত কোড যোগ করুন:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

ব্যাখ্যা

এই কোডটি একটি ইনস্টল ক্লাস সেট আপ করে যা পরবর্তী ধাপে ব্যবহার করা হবে এবং এটি চলমান অ্যাপ্লিকেশনের সাথে সংযুক্ত করে।

4. প্রম্পট শ্রোতা ইনস্টল করুন

আপনার পিডব্লিউএ ইনস্টল করার জন্য প্রকৃতপক্ষে ট্রিগার করার জন্য ইনস্টল বোতাম ট্রিগার ব্যবহার করার জন্য, আপনাকে ইনস্টল প্রম্পট ক্যাপচার করতে হবে। এটি ইনস্টল হয়ে গেলে, আপনাকে ক্যাপচার করা ইনস্টল প্রম্পটটি পুনরায় সেট করতে হবে। এটি করার জন্য, js/lib/install.js এ Install ক্লাসে constructor নিম্নলিখিতগুলি করার জন্য কোড লিখুন:

ইনস্টল প্রম্পট ক্যাপচার

• window beforeinstallprompt ইভেন্টের জন্য শুনুন।
• গুলি চালানো থেকে ইভেন্ট প্রতিরোধ করুন
• প্রম্পট ক্যাপচার
• ইনস্টল বোতাম ট্রিগার দেখান

ইনস্টলে প্রম্পট রিসেট করুন

• window appinstalled ইভেন্টের জন্য শুনুন।
• ক্যাপচার করা প্রম্পট রিসেট করুন
• ইনস্টল বোতাম ট্রিগার লুকান

5. ইন-অ্যাপ বোতাম থেকে ট্রিগার ইনস্টল করুন

একবার প্রম্পট ক্যাপচার করা হলে, PWA এর ইনস্টল বোতামটি এটিকে ট্রিগার করতে সক্ষম হতে হবে। এটি করতে, js/lib/install.js এ Install ক্লাসে নিম্নলিখিত যোগ করুন:

• এটি ইনস্টল করার জন্য একটি async পদ্ধতি
  • ইনস্টল করার জন্য প্রম্পট করার জন্য ক্যাপচার করা প্রম্পট ব্যবহার করে
  • প্রম্পটের ব্যবহারকারীর পছন্দের জন্য await
  • প্রম্পট রিসেট করুন
  • ব্যবহারকারী ইনস্টল প্রম্পট গ্রহণ করলে ইনস্টল বোতামটি লুকান
• ক্লাসের constructor ইনস্টল বোতামে একটি click ইভেন্ট লিসেনার যোগ করুন যা ইনস্টলেশন ট্রিগারকে কল করে।

6. অভিনন্দন!

আপনি এইমাত্র শিখেছেন কিভাবে আপনার নিজের ইন-অ্যাপ ইনস্টল বোতাম থেকে PWA ইনস্টলেশন ট্রিগার করতে হয়।

সিরিজের পরবর্তী কোডল্যাব হল আপনার PWA ক্ষমতায়ন