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

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;
});

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

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

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

• رصد ما إذا كان تطبيقك يتم تشغيله من الشاشة الرئيسية
• عرض طلب تثبيت التطبيق من نظام التشغيل بدلاً من ذلك