إشعار التثبيت

قد لا يكون المستخدمون على دراية بعملية تثبيت تطبيق الويب التقدّمي (PWA). بصفتك مطوِّر البرامج، يمكنك معرفة الوقت المناسب لدعوة المستخدمين لتثبيت التطبيق. ويمكن أيضًا تحسين طلبات تثبيت المتصفِّح التلقائية. لنتحقق من الأدوات المتاحة.

تحسين مربع حوار التثبيت

توفِّر المتصفِّحات مطالبات تلقائية بالتثبيت عندما تجتاز تطبيقات الويب التقدّمية (PWA) معايير التثبيت. يستخدم المتصفِّح السمتَين name وicons من بيان تطبيق الويب لإنشاء الطلب.

رسالة طلب تثبيت Microsoft Edge.

تحسّن بعض المتصفّحات تجربة طلب التثبيت باستخدام الحقول الترويجية في البيان، بما في ذلك description وcategories وscreenshots. على سبيل المثال، عند استخدام متصفّح Chrome على نظام التشغيل Android، إذا كان تطبيق الويب التقدّمي (PWA) يوفّر قيمًا للحقلَين description وscreenshots، ستتحوّل تجربة مربّع حوار التثبيت من شريط معلومات صغير إضافة إلى الشاشة الرئيسية إلى مربّع حوار أكبر وأكثر تفصيلاً، على غرار طلبات التثبيت من متجر التطبيقات.

الاطّلاع على الحقول الترويجية أثناء استخدامها:

حدث طلب التثبيت قبل التثبيت

تُعد رسائل طلب تثبيت المتصفِّح هي الخطوة الأولى في توجيه المستخدمين إلى تثبيت تطبيق الويب التقدّمي (PWA). لتنفيذ تجربتك الخاصة في التثبيت، لا يزال تطبيقك بحاجة إلى استيفاء معايير التثبيت: عندما يكتشف المتصفّح أنّ تطبيقك قابل للتثبيت، سينشط حدث beforeinstallprompt. وعليك تنفيذ معالج الأحداث هذا لتخصيص تجربة المستخدم. يُرجى اتّباع الخطوات التالية:

  1. يُرجى الاستماع إلى حدث "beforeinstallprompt".
  2. احفظه (ستحتاجه لاحقًا).
  3. شغّلها من واجهة المستخدم.

اطّلِع على الرمز أدناه للحصول على مثال على أداة معالجة الحدث للحدث beforeinstallprompt والتسجيل والاستخدام المخصّص لاحقًا.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

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

ويمنحك تسجيل الحدث الفرصة لإضافة تلميحات وحوافز للمستخدمين لتثبيت تطبيقك، واختيار المطالبة بالتثبيت عندما تعرف أنّ المستخدمين أكثر تفاعلاً.

لن يتم تنشيط الحدث في الحالات التالية:

  • سبق للمستخدم تثبيت تطبيق الويب التقدّمي الحالي (صالح فقط لأجهزة الكمبيوتر المكتبي وWebAPK على Android).
  • لا يجتاز التطبيق معايير تثبيت تطبيق الويب التقدّمي (PWA).
  • لا يمكن تثبيت تطبيق الويب التقدّمي (PWA) على الجهاز الحالي لأسباب أخرى (على سبيل المثال، ظهور جهاز في وضع Kiosk أو بدون أذونات).

أفضل مكان لتقديم الطلب

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

جمع الإحصاءات

سيساعدك استخدام التحليلات في فهم مكان وموعد تقديم طلباتك بشكل أفضل. يمكنك استخدام السمة userChoice من حدث beforeinstallprompt، لأنّ السمة userChoice هي وعد بأن يتم حلّ المشكلة من خلال الإجراء الذي اتّخذه المستخدم.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

أمثلة واقعية

جرِّب النموذج التالي عمليًا على متصفّح Chromium (جهاز كمبيوتر مكتبي أو Android).

Fallback

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

يجب عرض هذه التعليمات في وضع المتصفّح فقط، وتعني خيارات العرض الأخرى، مثل standalone أو fullscreen، أنّ المستخدم قد ثبَّت التطبيق من قبل.

لعرض العنصر في وضع المتصفح فقط، استخدِم الاستعلام عن الوسائط display-mode:

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

درس تطبيقي حول الترميز

المكتبات

يمكنك الاطلاع على هذه المكتبات لمساعدتك في عرض طلب تثبيت مخصص:

المراجِع