নতুন HTML ইনস্টল এলিমেন্ট ব্যবহার করে ওয়েব অ্যাপ ইনস্টল করুন।

Patrick Brosset

প্রকাশিত: ১২ মে, ২০২৬

ওয়েব অ্যাপ ইনস্টল করার জন্য সবসময়ই জাভাস্ক্রিপ্টের প্রয়োজন হতো। যখন আপনি beforeinstallprompt ইভেন্টটি ব্যবহার করেন, তখন ইনস্টলেশন প্রক্রিয়াটি সম্পূর্ণরূপে স্ক্রিপ্টের মাধ্যমে সম্পন্ন হয়। নতুন <install> এলিমেন্টটি এই অবস্থার পরিবর্তন এনেছে: আপনার পেজে শুধু একটি HTML এলিমেন্ট যুক্ত করলেই ব্রাউজার আপনার জন্য একটি নির্ভরযোগ্য ইনস্টল বাটন রেন্ডার করে দেবে, যার জন্য কোনো জাভাস্ক্রিপ্টের প্রয়োজন হবে না।

মাইক্রোসফট এজ টিম, ক্রোম টিমের সহযোগিতায়, ক্রোমিয়ামে <install> এলিমেন্টটি বাস্তবায়ন করেছে। এটি এখন ক্রোম বা এজ-এর ১৪৮ সংস্করণ থেকে একটি ফ্ল্যাগের মাধ্যমে পরীক্ষা করার জন্য উপলব্ধ। এছাড়া, এটি একটি অরিজিন ট্রায়াল হিসেবেও পাওয়া যাচ্ছে, যা আপনি উভয় ব্রাউজারের ১৪৮ থেকে ১৫৩ পর্যন্ত সংস্করণে ব্যবহার করতে পারবেন।

এটি ব্যবহার করে দেখুন এবং জেনে নিন, এটি ইম্পারেটিভ ওয়েব ইনস্টল এপিআই ( navigator.install() )-এর সাথে কীভাবে তুলনীয়, যার নিজস্ব অরিজিন ট্রায়াল রয়েছে।

সমস্যাটি

ওয়েব অ্যাপ ইনস্টলেশন প্রক্রিয়াটি খণ্ডিত। প্রতিটি ব্রাউজারের নিজস্ব কিছু প্রবেশপথ থাকে, যেমন—অ্যাড্রেস-বার আইকন, মেনু আইটেম এবং প্রম্পট। ইনস্টলেশন প্রক্রিয়াটি কখন এবং কীভাবে প্রদর্শিত হবে, তার ওপর ডেভেলপারদের নিয়ন্ত্রণ সীমিত।

অ্যাপ-স্টোরের মতো একটি অভিজ্ঞতা তৈরি করা, যা ব্যবহারকারীদের আপনার সাইট থেকে অন্যান্য অ্যাপ ইনস্টল করার সুযোগ দেয়, তা আরও কঠিন, কারণ ঐতিহাসিকভাবে ইনস্টলেশন শুধুমাত্র বর্তমান পৃষ্ঠাতেই সীমাবদ্ধ ছিল।

<install> উপাদান

নতুন <install> HTML এলিমেন্টটির বিষয়বস্তু এবং উপস্থাপনা ব্রাউজার দ্বারা নিয়ন্ত্রিত হয়। <geolocation> এর মতো অন্যান্য পারমিশন এলিমেন্টের মতোই, বাটনটির লেবেল টেক্সট, ভাষা এবং চেহারার উপর ব্রাউজারের নিয়ন্ত্রণ থাকার অর্থ হলো, এটি ব্যবহারকারীর ক্লিককে অভিপ্রায়ের একটি প্রকৃত সংকেত হিসেবে বিশ্বাস করতে পারে।

কোনো ব্যবহারকারী যখন "বিস্ময়কর অ্যাপ্লিকেশন ইনস্টল করুন" লেখা কোনো বোতামে ক্লিক করেন, তখন ইনস্টল করার জন্য প্রম্পট এলে তিনি অবাক হবেন এমন সম্ভাবনা কম।

যেহেতু ব্রাউজার বাটনটি রেন্ডার করে, তাই আপনি ন্যূনতম কোডের মাধ্যমেই একটি নির্ভরযোগ্য ইনস্টল সুবিধা পান এবং জাভাস্ক্রিপ্টে beforeinstallprompt প্রক্রিয়াটি পরিচালনা করার কোনো প্রয়োজন হয় না।

বর্তমান অ্যাপটি ইনস্টল করুন

বর্তমান পৃষ্ঠাটি যদি এমন কোনো ম্যানিফেস্টের সাথে লিঙ্ক করা থাকে যেখানে একটি id ফিল্ড আছে, তাহলে একটিমাত্র এলিমেন্টই যথেষ্ট:

<install></install>

ব্রাউজারটি প্রমিত লেখা ও আইকনসহ বাটনটি প্রদর্শন করে এবং ব্যবহারকারী যখন তাতে ক্লিক করেন, তখন ব্রাউজারের স্বাভাবিক ইনস্টলেশন প্রক্রিয়াটি চালু হয়।

অন্য একটি অ্যাপ ইনস্টল করুন

বর্তমান পৃষ্ঠা থেকে ভিন্ন অরিজিনে থাকা কোনো ওয়েব অ্যাপ ইনস্টল করতে, অন্য ওয়েব অ্যাপটিকে নির্দেশ করার জন্য installurl অ্যাট্রিবিউটটি ব্যবহার করুন:

<install installurl="https://awesome-app.com/"></install>

যদি https://awesome-app.com পেজটি এমন কোনো ম্যানিফেস্টের সাথে লিঙ্ক করা থাকে যেখানে একটি id ফিল্ড সংজ্ঞায়িত করা আছে, তাহলে আপনার আর কিছু করার প্রয়োজন নেই।

যদি কোনো id ফিল্ড না থাকে, তাহলে একটি গণনাকৃত ম্যানিফেস্ট id প্রদান করতে manifestid অ্যাট্রিবিউটটি ব্যবহার করুন:

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

গণনাকৃত ম্যানিফেস্ট id পেতে:

1. ডেভটুলস খুলুন।
2. অ্যাপ্লিকেশন ট্যাবে যান।
3. আইডেন্টিটি সেকশনের অধীনে, কম্পিউটেড অ্যাপ আইডি ভ্যালুটি কপি করুন।

<install> বাটন ব্যবহার করে অন্যান্য অরিজিন অ্যাপ ইনস্টল করার সুবিধা হলো, আপনি এমন একটি ক্যাটালগ পেজ তৈরি করতে পারবেন যা ব্যবহারকারীদের একাধিক অ্যাপ ইনস্টল করার সুযোগ দেবে, এবং প্রতিটি অ্যাপের জন্য নিজস্ব <install> বাটন থাকবে।

বিকল্প বিষয়বস্তু সরবরাহ করুন

যদি ব্রাউজার <install> এলিমেন্টটি সাপোর্ট না করে, তাহলে আপনি এলিমেন্টটির ভেতরে যে HTML-ই রাখুন না কেন, তা-ই প্রদর্শিত হবে:

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

সমর্থন সনাক্ত করুন

যদি ফলব্যাক কন্টেন্ট আপনার ব্যবহারের জন্য যথেষ্ট না হয় এবং আপনি এমন ব্রাউজারগুলিতে একটি ভিন্ন ব্যবহারকারীর অভিজ্ঞতা প্রয়োগ করতে চান যেগুলি <install> এলিমেন্ট সমর্থন করে না, তাহলে সমর্থন শনাক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করুন:

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

ইভেন্টগুলি পরিচালনা করুন

<install> এলিমেন্টটি সফলতা, বাতিলকরণ এবং বৈধতা ত্রুটির জন্য ইভেন্ট ফায়ার করে, যেগুলো আপনি শুনতে পারেন:

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

আজই চেষ্টা করে দেখুন

আজ <install> এলিমেন্টটি ব্যবহার করে দেখতে, আপনার কাছে দুটি বিকল্প আছে:

• উপাদানটি শুধুমাত্র আপনার ডিভাইসে স্থানীয়ভাবে পরীক্ষা করুন।
• অরিজিন ট্রায়ালের জন্য নিবন্ধন করে আপনার ব্যবহারকারীদের সাথে বাস্তব পরিস্থিতিতে উপাদানটি পরীক্ষা করুন।

স্থানীয়ভাবে পরীক্ষা করুন

আজই আপনার নিজের ডিভাইসে উপাদানটি পরীক্ষা করতে:

1. ক্রোম বা এজ সংস্করণ ১৪৮ বা তার পরবর্তী সংস্করণ ব্যবহার করুন।
2. একটি নতুন ট্যাবে about://flags/#web-app-install-element এ যান।
3. ওয়েব অ্যাপ ইনস্টল এলিমেন্টকে সক্রিয় করুন ।
4. ব্রাউজারটি পুনরায় চালু করুন।

অরিজিন ট্রায়াল ব্যবহার করে আপনার লাইভ সাইটে পরীক্ষা করুন।

অরিজিন ট্রায়াল আপনার প্রোডাকশন সাইটের প্রকৃত ব্যবহারকারীদের প্রথমে ফ্ল্যাগটি সক্রিয় না করেই ফিচারটি ব্যবহার করার সুযোগ দেয়।

1. <install> এলিমেন্টের অরিজিন ট্রায়াল রেজিস্ট্রেশন পেজটি খুলুন।
2. সাইন ইন করুন।
3. রেজিস্টার-এ ক্লিক করুন।
4. আপনার সাইটের উৎস লিখুন এবং ফর্মের বাকি অংশ পূরণ করুন।
5. ফর্মটি জমা দেওয়ার পর আপনি একটি টোকেন স্ট্রিং পাবেন।
6. আপনার সাইটের পেজগুলিতে একটি <meta> ট্যাগ ব্যবহার করে টোকেনটি যোগ করুন:

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

বিকল্পভাবে, আপনি টোকেনটি একটি HTTP রেসপন্স হেডার হিসেবেও পাঠাতে পারেন:

Origin-Trial: YOUR_TOKEN_HERE

অরিজিন ট্রায়ালটি ক্রোম এবং এজ উভয়ের ১৪৮ থেকে ১৫৩ ভার্সনের জন্য উপলব্ধ, এবং একই টোকেন উভয় ব্রাউজারেই কাজ করবে। অরিজিন ট্রায়াল সম্পর্কে আরও জানতে দেখুন:

• ক্রোমের জন্য অরিজিন ট্রায়াল শুরু করুন ।
• Edge-এর জন্য origin trials ব্যবহার করে পরীক্ষামূলক API এবং ফিচারগুলো পরীক্ষা করুন ।

এটি বাস্তবে দেখুন

<install> এলিমেন্ট স্টোর ডেমোটি দেখুন, এটি একটি PWA ক্যাটালগ যা আপনাকে বেশ কয়েকটি নমুনা অ্যাপ ইনস্টল করার সুযোগ দিতে <install> এলিমেন্ট ব্যবহার করে।

ওয়েব ইনস্টল এপিআই-এর সাথে তুলনা

ওয়েবে অ্যাপ ইনস্টলেশন উন্নত করার জন্য আমরা শুধু <install> এলিমেন্ট নিয়েই পরীক্ষা-নিরীক্ষা করছি না।

পূর্বে, আমরা ওয়েব ইনস্টল এপিআই ( navigator.install() ) নিয়ে পরীক্ষা করেছিলাম, যা একটি ইম্পারেটিভ জাভাস্ক্রিপ্ট এপিআই এবং এটি আপনার সাইটকে সেম-অরিজিন বা ক্রস-অরিজিন ওয়েব অ্যাপ ইনস্টল করার সুযোগ দেয়। আরও জানতে, “ওয়েব ইনস্টল এপিআই পরীক্ষার জন্য প্রস্তুত” দেখুন।

ওয়েব ইনস্টল এপিআই-এরও নিজস্ব অরিজিন ট্রায়াল রয়েছে।

পদ্ধতি দুটির মধ্যে তুলনা নিচে দেওয়া হলো:

আপনার মতামত জানান।

আমরা উভয় পদ্ধতি সম্পর্কেই সক্রিয়ভাবে মতামত জানতে চাইছি। আপনার প্রয়োজন অনুসারে, আমরা <install> এলিমেন্ট, অথবা navigator.install() API, কিংবা উভয়ের জন্যই সাপোর্ট যোগ করতে পারি।

<install> এলিমেন্টটি সম্পর্কে মতামত জানাতে, এই প্রস্তাবনার জন্য নির্ধারিত WICG রিপোতে একটি ইস্যু খুলুন ।

navigator.install() API সম্পর্কে মতামত জানাতে, "Developer Feedback: navigator.install versus <install> element issue" অংশে একটি মন্তব্য যোগ করুন।

সম্পদ

• ব্যাখ্যা: <install> এলিমেন্ট
• ডেমো: <install> এলিমেন্ট স্টোর
• ব্যবহারের নির্দেশাবলী এবং ডেমো উৎস
• ক্রোম প্ল্যাটফর্ম স্ট্যাটাস এন্ট্রি
• ওয়েব ইনস্টল এপিআই পরীক্ষার জন্য প্রস্তুত (এজ ব্লগ)
• ওয়েব ইনস্টল এপিআই ব্যাখ্যা