جعله قابلاً للتثبيت

Pete LePage

الاستماع إلى الحدث beforeinstallprompt

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

يتيح التقاط الحدث للمطوّرين تخصيص التثبيت ومطالبة المستخدم بالتثبيت عندما يرون أنّه الوقت الأنسب.

  1. انقر على إنشاء ريمكس للتعديل لجعل المشروع قابلاً للتعديل.
  2. أضِف معالج أحداث beforeinstallprompt إلى العنصر window.
  3. احفظ event كمتغيّر عمومي، لأنّنا سنحتاج إليه لاحقًا لعرض الطلب.
  4. إظهار زر التثبيت

الرمز:

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing on mobile.
  event.preventDefault();
  console.log('👍', 'beforeinstallprompt', event);
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Remove the 'hidden' class from the install button container.
  divInstall.classList.toggle('hidden', false);
});

التعامل مع النقر على زر التثبيت

لعرض طلب التثبيت، يمكنك استدعاء prompt() في حدث beforeinstallprompt المحفوظ. يتم استدعاء prompt() في معالج النقر على زر التثبيت لأنّه يجب استدعاء prompt() من خلال إجراء تفاعلي من المستخدم.

  1. أضِف معالج حدث ناتج عن النقر لزر التثبيت.
  2. اتصل بـ prompt() بشأن الحدث المحفوظ في beforeinstallprompt.
  3. تسجيل نتائج الطلب
  4. اضبط حدث beforeinstallprompt المحفوظ على قيمة فارغة.
  5. إخفاء زر التثبيت

الرمز:

butInstall.addEventListener('click', async () => {
  console.log('👍', 'butInstall-clicked');
  const promptEvent = window.deferredPrompt;
  if (!promptEvent) {
    // The deferred prompt isn't available.
    return;
  }
  // Show the install prompt.
  promptEvent.prompt();
  // Log the result
  const result = await promptEvent.userChoice;
  console.log('👍', 'userChoice', result);
  // Reset the deferred prompt variable, since
  // prompt() can only be called once.
  window.deferredPrompt = null;
  // Hide the install button.
  divInstall.classList.toggle('hidden', true);
});

تتبُّع حدث التثبيت

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

  1. أضِف معالج أحداث appinstalled إلى عنصر window.
  2. سجِّل حدث التثبيت في الإحصاءات أو أي آلية أخرى.

الرمز:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

محتوى إضافي للقراءة

تهانينا، أصبح تطبيقك قابلاً للتثبيت الآن.

في ما يلي بعض الإجراءات الإضافية التي يمكنك اتّخاذها: