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

Pete LePage

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

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

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

إعلان البانر لميزة "الإعلانات على التطبيقات التي تعمل بلا إنترنت" الإصدار 67 من Chrome والإصدارات الأقدم

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

أو

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

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

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

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

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

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

A2HS Dialog

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

أو

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

أو

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

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

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

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

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

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