যেহেতু আমরা প্রথমবার হোম স্ক্রীন ব্যানারে অ্যাড চালু করেছি, তাই আমরা প্রগতিশীল ওয়েব অ্যাপগুলিকে আরও স্পষ্টভাবে লেবেল করার জন্য কাজ করছি এবং ব্যবহারকারীরা কীভাবে সেগুলি ইনস্টল করতে পারে সেগুলিকে সহজ করে তুলছি৷ আমাদের চূড়ান্ত লক্ষ্য হল সমস্ত প্ল্যাটফর্ম জুড়ে অম্নিবক্সে একটি ইনস্টল বোতাম প্রদান করা এবং Chrome 68-এ আমরা সেই লক্ষ্যে পরিবর্তন আনছি।
কি পরিবর্তন হচ্ছে?
Android-এ Chrome 68 থেকে শুরু করে (জুলাই 2018 সালে স্থিতিশীল), Chrome আর হোম স্ক্রিনে ব্যানারে অ্যাড দেখাবে না। যদি সাইটটি হোম স্ক্রীনে যোগ করার মানদণ্ড পূরণ করে, Chrome মিনি-ইনফোবার দেখাবে৷ তারপর, ব্যবহারকারী যদি মিনি-ইনফোবারে ক্লিক করেন, অথবা আপনি ব্যবহারকারীর অঙ্গভঙ্গির মধ্যে থেকে beforeinstallprompt ইভেন্টে prompt() কল করেন, Chrome হোম স্ক্রীন ডায়ালগে একটি মডেল অ্যাড দেখাবে।
A2HS ব্যানার Chrome 67 এবং তার আগে
সাইট যখন হোম স্ক্রীনে যোগ করার মানদণ্ড পূরণ করে তখন স্বয়ংক্রিয়ভাবে দেখানো হয়, এবং সাইটটি beforeinstallprompt ইভেন্টে preventDefault() কল করে না
বা
beforeinstallprompt ইভেন্টে prompt() কল করে দেখানো হয়েছে।
Mini-infobar Chrome 68 এবং পরবর্তী
কোনো ব্যবহারকারীর দ্বারা বরখাস্ত হলে, পর্যাপ্ত সময় (~3 মাস) অতিক্রান্ত না হওয়া পর্যন্ত এটি দেখানো হবে না।
beforeinstallprompt ইভেন্টে preventDefault() কল করা হয়েছে তা নির্বিশেষে দেখানো হয়েছে।
যখন omnibox ইনস্টল বোতামটি চালু করা হবে তখন এই UI ট্রিটমেন্টটি Chrome-এর ভবিষ্যতের সংস্করণে সরিয়ে দেওয়া হবে।
A2HS ডায়ালগ
Chrome 68 এবং পরবর্তীতে beforeinstallprompt ইভেন্টে ব্যবহারকারীর অঙ্গভঙ্গির মধ্যে থেকে prompt() কল করার মাধ্যমে দেখানো হয়েছে।
বা
যখন একজন ব্যবহারকারী Chrome 68 এবং পরবর্তীতে মিনি-ইনফোবারে ট্যাপ করে তখন দেখানো হয়।
বা
সমস্ত Chrome সংস্করণে ক্রোম মেনু থেকে ব্যবহারকারী 'হোম স্ক্রীনে যোগ করুন' ক্লিক করার পরে দেখানো হয়৷
মিনি-ইনফোবার
মিনি-ইনফোবার একটি Chrome UI উপাদান এবং সাইট দ্বারা নিয়ন্ত্রিত নয়, তবে ব্যবহারকারী সহজেই বরখাস্ত করতে পারেন৷ ব্যবহারকারীর দ্বারা একবার বরখাস্ত করা হলে, পর্যাপ্ত পরিমাণ সময় (বর্তমানে 3 মাস) অতিবাহিত না হওয়া পর্যন্ত এটি আর প্রদর্শিত হবে না। মিনি-ইনফোবার প্রদর্শিত হবে যখন সাইটটি হোম স্ক্রীনে যোগ করার মানদণ্ড পূরণ করবে, আপনি beforeinstallprompt ইভেন্টে preventDefault() বা না করুন।
পৃষ্ঠা লোড করার জন্য ব্যবহারকারীকে অনুরোধ করার পরিবর্তে ( অনুমতি অনুরোধের জন্য একটি অ্যান্টি-প্যাটার্ন ), আপনি নির্দেশ করতে পারেন আপনার অ্যাপটি কিছু UI এর সাথে ইনস্টল করা যেতে পারে, যা তারপরে মডেল ইনস্টল প্রম্পট দেখাবে। উদাহরণস্বরূপ এই ডেস্কটপ PWA ব্যবহারকারীর প্রোফাইল নামের ঠিক উপরে একটি 'অ্যাপ ইনস্টল করুন' বোতাম যোগ করে।
ব্যবহারকারীর অঙ্গভঙ্গিতে আপনার অ্যাপ ইনস্টল করার অনুরোধ জানানো ব্যবহারকারীর কাছে কম স্প্যামি বোধ করে এবং তারা 'বাতিল'-এর পরিবর্তে 'যোগ'-এ ক্লিক করার সম্ভাবনা বাড়ায়। আপনার অ্যাপ্লিকেশানে একটি ইনস্টল বোতাম অন্তর্ভুক্ত করার অর্থ হল যে ব্যবহারকারী যদি আজ আপনার অ্যাপটি ইনস্টল না করার সিদ্ধান্ত নেন, তবুও বাটনটি আগামীকাল বা যখনই তারা ইনস্টল করার জন্য প্রস্তুত হবে তখনও সেখানে থাকবে৷
beforeinstallprompt ইভেন্টের জন্য শুনছি
যদি আপনার সাইট হোম স্ক্রীনে যোগ করার মানদণ্ড পূরণ করে, তাহলে Chrome একটি beforeinstallprompt ইভেন্টের আগে ফায়ার করবে, ইভেন্টের একটি রেফারেন্স সংরক্ষণ করবে এবং ব্যবহারকারী আপনার অ্যাপটি তাদের হোম স্ক্রিনে যোগ করতে পারবে তা নির্দেশ করার জন্য আপনার ইউজার ইন্টারফেস আপডেট করবে।
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
অ্যাপটি ইতিমধ্যেই ইনস্টল করা থাকলে beforeinstallprompt ইভেন্টটি বরখাস্ত করা হবে না ( হোম স্ক্রিনে যোগ করার মানদণ্ড দেখুন)। কিন্তু ব্যবহারকারী যদি পরে অ্যাপটি আনইনস্টল করেন, তাহলে beforeinstallprompt ইভেন্টটি প্রতিটি পৃষ্ঠা নেভিগেশনে আবার চালু করা হবে।
prompt() সহ ডায়ালগ দেখানো হচ্ছে
হোম স্ক্রীন ডায়ালগে যুক্ত দেখানোর জন্য, ব্যবহারকারীর অঙ্গভঙ্গির মধ্যে থেকে সংরক্ষিত ইভেন্টে prompt() কল করুন। Chrome মডেল ডায়ালগ দেখাবে, ব্যবহারকারীকে তাদের হোম স্ক্রিনে আপনার অ্যাপ যোগ করার জন্য অনুরোধ করবে। তারপর, beforeinstallprompt ইভেন্টের userChoice সম্পত্তি দ্বারা প্রত্যাবর্তিত প্রতিশ্রুতির কথা শুনুন। প্রম্পট দেখানোর পরে এবং ব্যবহারকারী এটিতে সাড়া দেওয়ার পরে প্রতিশ্রুতিটি outcome বৈশিষ্ট্য সহ একটি বস্তু ফেরত দেয়।
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
আপনি স্থগিত ইভেন্টে শুধুমাত্র একবার prompt() কল করতে পারেন, যদি ব্যবহারকারী ডায়ালগে বাতিল ক্লিক করেন, তাহলে পরবর্তী পৃষ্ঠা নেভিগেশনে beforeinstallprompt ইভেন্টটি চালু না হওয়া পর্যন্ত আপনাকে অপেক্ষা করতে হবে। প্রথাগত অনুমতি অনুরোধের বিপরীতে, বাতিল ক্লিক করা ভবিষ্যতের কলগুলিকে prompt() এ ব্লক করবে না কারণ এটি অবশ্যই একটি ব্যবহারকারীর অঙ্গভঙ্গির মধ্যে কল করতে হবে।
অতিরিক্ত সম্পদ
আরও তথ্যের জন্য অ্যাপ ইনস্টল ব্যানারগুলি দেখুন, সহ:
-
beforeinstallpromptইভেন্টের বিশদ বিবরণ - অ্যাড হোম স্ক্রীন প্রম্পটে ব্যবহারকারীর প্রতিক্রিয়া ট্র্যাক করা
- অ্যাপটি ইনস্টল করা আছে কিনা তা ট্র্যাক করা
- আপনার অ্যাপ ইনস্টল করা অ্যাপ হিসেবে চলছে কিনা তা নির্ধারণ করা