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

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

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

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

طلب تثبيت Microsoft Edge.

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

الاطّلاع على حقول ترويجية قيد التشغيل:

حدث beforeinstallprompt

إنّ رسائل المطالبة بتثبيت المتصفّح هي الخطوة الأولى في حث المستخدمين على تثبيت تطبيق الويب التقدّمي (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).

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

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

  • سبق أن ثبَّت المستخدم تطبيق الويب التقدّمي (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
   }
}

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

المكتبات

يمكنك الاطّلاع على هذه المكتبات للحصول على مساعدة بشأن عرض طلب تثبيت مخصّص:

الموارد