منذ أن أطلقنا الإضافة "إضافة إلى بانر الشاشة الرئيسية"، نعمل على تصنيف "تطبيقات الويب التقدّمية" بشكل أكثر وضوحًا وتبسيط الطريقة التي يمكن للمستخدمين من خلالها تثبيتها. هدفنا النهائي هو توفير زر التثبيت في المربّع المتعدد الاستخدامات على مستوى جميع الأنظمة الأساسية، وفي الإصدار Chrome 68، نجري تغييرات لتحقيق هذا الهدف.
ما هي التغييرات التي سيتم إجراؤها؟
لن يُظهر Chrome بعد ذلك الإضافة إلى بانر الشاشة الرئيسية، بدءًا من الإصدار 68 من Chrome على نظام التشغيل Android (الإصدار الثابت في تموز (يوليو) 2018). إذا استوفى الموقع الإلكتروني
معايير الإضافة إلى الشاشة الرئيسية،
سيعرض Chrome شريط المعلومات المصغّر. بعد ذلك، إذا نقر المستخدم على
شريط المعلومات المصغّر أو اتصلت بـ prompt() في الحدث beforeinstallprompt من
داخل إيماءة المستخدم، سيعرض Chrome إضافة مشروطة إلى مربع حوار الشاشة الرئيسية.
بانر A2HS الإصدار 67 من Chrome والإصدارات الأقدم
يظهر تلقائيًا عندما يستوفي الموقع الإلكتروني معايير الإضافة إلى الشاشة الرئيسية،
ولا يستدعي الموقع الإلكتروني preventDefault() في
حدث beforeinstallprompt.
أو
يظهر من خلال الاتصال بـ prompt() في
فعالية beforeinstallprompt.
شريط المعلومات المصغّر الإصدار 68 والإصدارات الأحدث من Chrome
وإذا رفض المستخدم هذه الرسالة، فلن يتم عرضه إلا بعد مرور فترة زمنية كافية (حوالي 3 أشهر).
يتم عرضه بغض النظر عما إذا تم استدعاء preventDefault() في
حدث beforeinstallprompt.
ستتم إزالة هذه المعالجة لواجهة المستخدم في إصدار مستقبلي من Chrome عند توفير زر تثبيت المربّع المتعدد الاستخدامات.
مربّع حوار A2HS
يظهر من خلال طلب الرمز prompt() من داخل إيماءة المستخدم على الحدث beforeinstallprompt في الإصدار 68 من Chrome والإصدارات الأحدث.
أو
يظهر هذا الإشعار عندما ينقر مستخدِم على شريط المعلومات المصغّر في الإصدار 68 من Chrome والإصدارات الأحدث.
أو
يظهر هذا الإشعار بعد نقر المستخدم على "إضافة إلى الشاشة الرئيسية" من قائمة Chrome في جميع إصدارات Chrome.
شريط المعلومات المصغّر
شريط المعلومات المصغَّر هو أحد مكونات واجهة المستخدم في Chrome ولا يمكن للموقع الإلكتروني التحكّم فيه، ولكن يمكن للمستخدم إغلاقه بسهولة. وبعد أن يغلقها المستخدم، لن تظهر مرة أخرى إلا بعد مرور فترة كافية من الوقت
(حاليًا 3 أشهر). سيظهر شريط المعلومات المصغَّر عند استيفاء الموقع الإلكتروني
لمعايير الإضافة إلى الشاشة الرئيسية،
بغض النظر عمّا إذا كنت preventDefault() في حدث beforeinstallprompt أم لا.
فبدلاً من أن تطلب من المستخدم تحميل الصفحة (مع العِلم أنَّ نمط طلبات الأذونات)، يمكنك الإشارة إلى إمكانية تثبيت تطبيقك من خلال واجهة مستخدم معيّنة، والتي ستعرض بعد ذلك إشعار التثبيت المشروط. على سبيل المثال، يضيف تطبيق الويب التقدّمي (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 مربع الحوار المشروط، ويطلب من المستخدم
إضافة تطبيقك إلى شاشته الرئيسية. استمع بعد ذلك إلى الوعد الذي تم إرجاعه من خلال
السمة 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" - تتبُّع ردّ المستخدم على طلب إضافة الشاشة الرئيسية
- تتبُّع ما إذا كان التطبيق قد تم تثبيته
- تحديد ما إذا كان تطبيقك يعمل كتطبيق مثبَّت