تغييرات على سلوك الشاشة الرئيسية

Pete LePage

منذ أن أطلقنا لأول مرة بانر "الإضافة إلى الشاشة الرئيسية"، ونحن نعمل على تصنيف تطبيقات الويب التقدّمية بشكل أكثر وضوحًا وتسهيل طريقة تثبيتها على المستخدمين. هدفنا النهائي هو توفير زر تثبيت في شريط العناوين على جميع المنصات، ونحن بصدد إجراء تغييرات في Chrome 68 لتحقيق هذا الهدف.

ما الذي سيتغيّر؟

اعتبارًا من الإصدار 68 من Chrome على Android (الإصدار الثابت في يوليو 2018)، لن يعرض Chrome بانر "الإضافة إلى الشاشة الرئيسية". إذا كان الموقع الإلكتروني يستوفي معايير الإضافة إلى الشاشة الرئيسية، سيعرض Chrome شريط المعلومات المصغّر. بعد ذلك، إذا نقر المستخدم على شريط المعلومات المصغّر، أو إذا استدعيت prompt() في الحدث beforeinstallprompt من داخل إيماءة المستخدم، سيعرض Chrome مربّع حوار مشروطًا لإضافة التطبيق إلى الشاشة الرئيسية.

بانر إضافة التطبيق إلى الشاشة الرئيسية الإصدار 67 من Chrome والإصدارات الأقدم

يتم عرضها تلقائيًا عندما يستوفي الموقع الإلكتروني معايير الإضافة إلى الشاشة الرئيسية، ولا يستدعي الموقع الإلكتروني preventDefault() في الحدث beforeinstallprompt

أو

يتم عرضها من خلال استدعاء prompt() في حدث beforeinstallprompt.

شريط المعلومات المصغّر الإصدار 68 من Chrome والإصدارات الأحدث

يظهر هذا الزر عندما يستوفي الموقع الإلكتروني معايير الإضافة إلى الشاشة الرئيسية

إذا أغلقها أحد المستخدمين، لن يتم عرضها إلا بعد مرور فترة زمنية كافية (حوالي 3 أشهر).

يتم عرضها بغض النظر عمّا إذا تم استدعاء preventDefault() في الحدث beforeinstallprompt.

ستتم إزالة طريقة عرض واجهة المستخدم هذه في إصدار مستقبلي من Chrome عند طرح زر التثبيت في المربّع المتعدد الاستخدامات.

مربّع حوار "إضافة إلى الشاشة الرئيسية"

يتم عرضها من خلال استدعاء prompt() من داخل إيماءة مستخدم في حدث beforeinstallprompt في الإصدار 68 من Chrome والإصدارات الأحدث.

أو

يظهر هذا الإشعار عندما ينقر المستخدم على شريط المعلومات المصغّر في الإصدار 68 من Chrome والإصدارات الأحدث.

أو

يتم عرضها بعد أن ينقر المستخدم على "الإضافة إلى الشاشة الرئيسية" من قائمة Chrome في جميع إصدارات Chrome.

شريط المعلومات المصغّر

شريط المعلومات المصغّر هو أحد مكونات واجهة مستخدم Chrome ولا يمكن للموقع الإلكتروني التحكّم فيه، ولكن يمكن للمستخدم إغلاقه بسهولة. وبعد أن يرفض المستخدم هذا الإذن، لن يظهر مرة أخرى إلا بعد مرور فترة زمنية كافية (3 أشهر حاليًا). سيظهر شريط المعلومات المصغّر عندما يستوفي الموقع الإلكتروني معايير الإضافة إلى الشاشة الرئيسية، بغض النظر عمّا إذا نقرت على حدث beforeinstallprompt أم لا.preventDefault()

بدلاً من مطالبة المستخدم بالحصول على الإذن عند تحميل الصفحة (وهو نمط غير مستحسن لطلبات الحصول على الإذن)، يمكنك الإشارة إلى أنّه يمكن تثبيت تطبيقك باستخدام بعض عناصر واجهة المستخدم، والتي ستعرض بعد ذلك طلب التثبيت المشروط. على سبيل المثال، يضيف تطبيق 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
• تتبُّع استجابة المستخدم لطلب إضافة التطبيق إلى الشاشة الرئيسية
• تتبُّع ما إذا تم تثبيت التطبيق
• تحديد ما إذا كان تطبيقك يعمل كتطبيق مثبَّت