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

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 وشريط المعلومات المصغّر ورمز في مربّع 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;
});

مراجع إضافية

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

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