از زمانی که ما برای اولین بار بنر افزودن به صفحه اصلی را راه اندازی کردیم، در تلاش بوده ایم تا برنامه های وب پیشرفته را با وضوح بیشتری برچسب گذاری کنیم و روش نصب کاربران را ساده کنیم. هدف نهایی ما ارائه یک دکمه نصب در omnibox در همه پلتفرم‌ها است و در Chrome 68 ما در حال ایجاد تغییراتی در راستای این هدف هستیم.
چه چیزی در حال تغییر است؟
از Chrome 68 در Android (در جولای 2018 پایدار است)، Chrome دیگر بنر افزودن به صفحه اصلی را نشان نخواهد داد. اگر سایت معیارهای افزودن به صفحه اصلی را داشته باشد، Chrome نوار اطلاعات کوچک را نشان می دهد. سپس، اگر کاربر روی نوار اطلاعات کوچک کلیک کند، یا از داخل یک ژست کاربر prompt() در رویداد beforeinstallprompt کنید، Chrome یک گفتگوی افزودن مودال به صفحه اصلی را نشان می‌دهد.
بنر A2HS Chrome 67 و قبل از آن
هنگامی که سایت معیارهای افزودن به صفحه اصلی را برآورده می‌کند، به‌طور خودکار نشان داده می‌شود و سایت preventDefault() در رویداد beforeinstallprompt فراخوانی نمی‌کند.
یا
با فراخوانی prompt() در رویداد beforeinstallprompt نشان داده می شود.
نوار اطلاعات کوچک Chrome 68 و جدیدتر
اگر توسط یک کاربر رد شود، تا زمانی که یک دوره زمانی کافی (~ 3 ماه) نگذرد، نمایش داده نخواهد شد.
صرف نظر از اینکه preventDefault() در رویداد beforeinstallprompt فراخوانی شده باشد نشان داده می شود.
با معرفی دکمه نصب omnibox، این رابط کاربری در نسخه بعدی Chrome حذف خواهد شد.
دیالوگ A2HS
با فراخوانی prompt() از داخل یک اشاره کاربر در رویداد beforeinstallprompt در Chrome 68 و جدیدتر نشان داده می شود.
یا
وقتی کاربر روی نوار اطلاعات کوچک در Chrome 68 و جدیدتر ضربه می‌زند نشان داده می‌شود.
یا
پس از کلیک کاربر روی «افزودن به صفحه اصلی» از منوی Chrome در همه نسخه‌های Chrome نشان داده می‌شود.
مینی اینفوبار
نوار اطلاعات کوچک یک جزء رابط کاربری Chrome است و توسط سایت قابل کنترل نیست، اما کاربر به راحتی می تواند آن را رد کند. پس از رد شدن توسط کاربر، تا زمانی که زمان کافی سپری نشود (در حال حاضر 3 ماه) دیگر ظاهر نمی شود. زمانی که سایت معیارهای افزودن به صفحه اصلی را برآورده می‌کند، نوار اطلاعات کوچک ظاهر می‌شود، صرف نظر از اینکه در رویداد beforeinstallprompt preventDefault() می‌کنید یا خیر.
به جای درخواست بارگذاری صفحه از کاربر (یک ضدالگو برای درخواست‌های مجوز )، می‌توانید نشان دهید که برنامه شما می‌تواند با برخی از UI نصب شود، که سپس اعلان نصب معین را نشان می‌دهد. به عنوان مثال این PWA دسکتاپ دکمه "نصب برنامه" را درست بالای نام نمایه کاربر اضافه می کند.
درخواست نصب برنامه خود بر روی ژست کاربر باعث می شود کاربر هرزنامه کمتری داشته باشد و احتمال اینکه به جای «لغو» روی «افزودن» کلیک کند، افزایش می یابد. گنجاندن دکمه Install در برنامه شما به این معنی است که حتی اگر کاربر تصمیم بگیرد برنامه شما را امروز نصب نکند، این دکمه همچنان فردا یا هر زمان که آماده نصب باشد وجود دارد.
در حال گوش دادن به رویداد 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 گفتگوی مودال را نشان می‌دهد و از کاربر می‌خواهد برنامه شما را به صفحه اصلی خود اضافه کند. سپس، به قولی که توسط ویژگی userChoice رویداد beforeinstallprompt برگردانده شده است گوش دهید. وعده پس از نشان دادن دستور و پاسخ کاربر به آن، یک شی را با ویژگی 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 - ردیابی پاسخ کاربر به درخواست افزودن صفحه اصلی
- ردیابی اگر برنامه نصب شده است
- تعیین اینکه آیا برنامه شما به عنوان یک برنامه نصب شده اجرا می شود یا خیر
از زمانی که ما برای اولین بار بنر افزودن به صفحه اصلی را راه اندازی کردیم، در تلاش بوده ایم تا برنامه های وب پیشرفته را با وضوح بیشتری برچسب گذاری کنیم و روش نصب کاربران را ساده کنیم. هدف نهایی ما ارائه یک دکمه نصب در omnibox در همه پلتفرم‌ها است و در Chrome 68 ما در حال ایجاد تغییراتی در راستای این هدف هستیم.
چه چیزی در حال تغییر است؟
از Chrome 68 در Android (در جولای 2018 پایدار است)، Chrome دیگر بنر افزودن به صفحه اصلی را نشان نخواهد داد. اگر سایت معیارهای افزودن به صفحه اصلی را داشته باشد، Chrome نوار اطلاعات کوچک را نشان می دهد. سپس، اگر کاربر روی نوار اطلاعات کوچک کلیک کند، یا از داخل یک ژست کاربر prompt() در رویداد beforeinstallprompt کنید، Chrome یک گفتگوی افزودن مودال به صفحه اصلی را نشان می‌دهد.
بنر A2HS Chrome 67 و قبل از آن
هنگامی که سایت معیارهای افزودن به صفحه اصلی را برآورده می‌کند، به‌طور خودکار نشان داده می‌شود و سایت preventDefault() در رویداد beforeinstallprompt فراخوانی نمی‌کند.
یا
با فراخوانی prompt() در رویداد beforeinstallprompt نشان داده می شود.
نوار اطلاعات کوچک Chrome 68 و جدیدتر
اگر توسط یک کاربر رد شود، تا زمانی که یک دوره زمانی کافی (~ 3 ماه) نگذرد، نمایش داده نخواهد شد.
صرف نظر از اینکه preventDefault() در رویداد beforeinstallprompt فراخوانی شده باشد نشان داده می شود.
با معرفی دکمه نصب omnibox، این رابط کاربری در نسخه بعدی Chrome حذف خواهد شد.
دیالوگ A2HS
با فراخوانی prompt() از داخل یک اشاره کاربر در رویداد beforeinstallprompt در Chrome 68 و جدیدتر نشان داده می شود.
یا
وقتی کاربر روی نوار اطلاعات کوچک در Chrome 68 و جدیدتر ضربه می‌زند نشان داده می‌شود.
یا
پس از کلیک کاربر روی «افزودن به صفحه اصلی» از منوی Chrome در همه نسخه‌های Chrome نشان داده می‌شود.
مینی اینفوبار
نوار اطلاعات کوچک یک جزء رابط کاربری Chrome است و توسط سایت قابل کنترل نیست، اما کاربر به راحتی می تواند آن را رد کند. پس از رد شدن توسط کاربر، تا زمانی که زمان کافی سپری نشود (در حال حاضر 3 ماه) دیگر ظاهر نمی شود. زمانی که سایت معیارهای افزودن به صفحه اصلی را برآورده می‌کند، نوار اطلاعات کوچک ظاهر می‌شود، صرف نظر از اینکه در رویداد beforeinstallprompt preventDefault() می‌کنید یا خیر.
به جای درخواست بارگذاری صفحه از کاربر (یک ضدالگو برای درخواست‌های مجوز )، می‌توانید نشان دهید که برنامه شما می‌تواند با برخی از UI نصب شود، که سپس اعلان نصب معین را نشان می‌دهد. به عنوان مثال این PWA دسکتاپ دکمه "نصب برنامه" را درست بالای نام نمایه کاربر اضافه می کند.
درخواست نصب برنامه خود بر روی ژست کاربر باعث می شود کاربر هرزنامه کمتری داشته باشد و احتمال اینکه به جای «لغو» روی «افزودن» کلیک کند، افزایش می یابد. گنجاندن دکمه Install در برنامه شما به این معنی است که حتی اگر کاربر تصمیم بگیرد برنامه شما را امروز نصب نکند، این دکمه همچنان فردا یا هر زمان که آماده نصب باشد وجود دارد.
در حال گوش دادن به رویداد 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 گفتگوی مودال را نشان می‌دهد و از کاربر می‌خواهد برنامه شما را به صفحه اصلی خود اضافه کند. سپس، به قولی که توسط ویژگی userChoice رویداد beforeinstallprompt برگردانده شده است گوش دهید. وعده پس از نشان دادن دستور و پاسخ کاربر به آن، یک شی را با ویژگی 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 - ردیابی پاسخ کاربر به درخواست افزودن صفحه اصلی
- ردیابی اگر برنامه نصب شده است
- تعیین اینکه آیا برنامه شما به عنوان یک برنامه نصب شده اجرا می شود یا خیر