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

بيت ليب

يحتوي هذا الخلل على بيان الويب مع الحقول المطلوبة لجعل تطبيق الويب قابلاً للتثبيت.

وتحتوي أيضًا على زر تثبيت مخفيّ بشكل تلقائي.

الاستماع إلى حدث 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;
});

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

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

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

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