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

Pete LePage

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

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

رصد حدث beforeinstallprompt

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

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

1. انقر على Remix to Edit (إنشاء ريمكس لتعديله) ليصبح المشروع قابلاً للتعديل.
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. سجِّل حدث التثبيت في إحصاءات Google أو آلية أخرى.

الرمز:

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

مراجع إضافية

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

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

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