এই সমস্যাটিতে একটি ওয়েব অ্যাপ ইনস্টলযোগ্য করার জন্য প্রয়োজনীয় ক্ষেত্রগুলির সাথে ওয়েব ম্যানিফেস্ট রয়েছে৷
এটিতে একটি ইনস্টল বোতামও রয়েছে যা ডিফল্টরূপে লুকানো থাকে।
পূর্বে ইনস্টল প্রম্পট ইভেন্টের জন্য শুনুন
যখন ব্রাউজার beforeinstallprompt ইভেন্টটি ফায়ার করে, তখন এটি ইঙ্গিত দেয় যে ওয়েব অ্যাপ ইনস্টল করা যেতে পারে এবং একটি ইনস্টল বোতাম ব্যবহারকারীকে দেখানো যেতে পারে। অ্যাপটি ইনস্টল করার মানদণ্ড পূরণ করলে beforeinstallprompt ইভেন্টটি চালু করা হয়।
ইভেন্টটি ক্যাপচার করা ডেভেলপারদের ইনস্টলেশনটি কাস্টমাইজ করতে সক্ষম করে এবং ব্যবহারকারীকে যখন তারা এটিকে সেরা সময় মনে করে তখন ইনস্টল করার জন্য অনুরোধ করে৷
- প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
-
windowঅবজেক্টে একটিbeforeinstallpromptইভেন্ট হ্যান্ডলার যোগ করুন। - একটি গ্লোবাল ভেরিয়েবল হিসাবে
eventসংরক্ষণ করুন; আমাদের প্রম্পট দেখানোর জন্য পরে এটির প্রয়োজন হবে। - ইনস্টল বোতামটি আড়াল করুন।
কোড:
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent the mini-infobar from appearing on mobile.
event.preventDefault();
console.log('👍', 'beforeinstallprompt', event);
// Stash the event so it can be triggered later.
window.deferredPrompt = event;
// Remove the 'hidden' class from the install button container.
divInstall.classList.toggle('hidden', false);
});
ইনস্টল বাটন ক্লিক পরিচালনা করুন
ইন্সটল প্রম্পট দেখাতে, সংরক্ষিত beforeinstallprompt ইভেন্টে prompt() কল করুন। কলিং prompt() ইনস্টল বোতাম ক্লিক হ্যান্ডলারে করা হয় কারণ prompt() একটি ব্যবহারকারীর অঙ্গভঙ্গি থেকে কল করতে হবে।
- ইনস্টল বোতামের জন্য একটি ক্লিক ইভেন্ট হ্যান্ডলার যোগ করুন।
- ইন্সটল প্রম্পট ইভেন্টের
beforeinstallpromptসংরক্ষিত কলprompt()। - প্রম্পটের ফলাফল লগ করুন।
- ইন্সটল প্রম্পট ইভেন্টের
beforeinstallpromptসংরক্ষিত ইভেন্টটিকে নাল এ সেট করুন। - ইনস্টল বোতামটি লুকান।
কোড:
butInstall.addEventListener('click', async () => {
console.log('👍', 'butInstall-clicked');
const promptEvent = window.deferredPrompt;
if (!promptEvent) {
// The deferred prompt isn't available.
return;
}
// Show the install prompt.
promptEvent.prompt();
// Log the result
const result = await promptEvent.userChoice;
console.log('👍', 'userChoice', result);
// Reset the deferred prompt variable, since
// prompt() can only be called once.
window.deferredPrompt = null;
// Hide the install button.
divInstall.classList.toggle('hidden', true);
});
ইনস্টল ইভেন্ট ট্র্যাক
একটি ইনস্টল বোতামের মাধ্যমে একটি ওয়েব অ্যাপ ইনস্টল করা ব্যবহারকারীদের এটি ইনস্টল করার একমাত্র উপায়। তারা Chrome-এর মেনু, মিনি-ইনফোবার এবং বহুমুখীক্ষেত্রে একটি আইকনের মাধ্যমেও ব্যবহার করতে পারে৷ আপনি appinstalled ইভেন্টের জন্য শুনে ইনস্টলেশনের এই সমস্ত উপায়গুলি ট্র্যাক করতে পারেন।
-
windowঅবজেক্টে একটিappinstalledইভেন্ট হ্যান্ডলার যোগ করুন। - বিশ্লেষণ বা অন্যান্য পদ্ধতিতে ইনস্টল ইভেন্ট লগ করুন.
কোড:
window.addEventListener('appinstalled', (event) => {
console.log('👍', 'appinstalled', event);
// Clear the deferredPrompt so it can be garbage collected
window.deferredPrompt = null;
});
আরও পড়া
অভিনন্দন, আপনার অ্যাপ এখন ইনস্টলযোগ্য!
এখানে কিছু অতিরিক্ত জিনিস রয়েছে যা আপনি করতে পারেন: