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

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. سجِّل حدث التثبيت في إحصاءات Google أو آلية أخرى.

الرمز:

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

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

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

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

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