رسالة تثبيت تطبيق محلي

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

ما المعايير؟

لعرض طلب تثبيت التطبيق الأصلي للمستخدم، يجب أن يستوفي موقعك الإلكتروني المعايير التالية:

  • لا تطبيق الويب ولا التطبيق الأصلي مثبَّتَان حاليًا على الجهاز.
  • يتضمّن بيان تطبيق الويب الذي يشمل:
    • short_name
    • name (مستخدَم في طلب البانر)
    • icons بما في ذلك إصداران بحجم 192 بكسل و512 بكسل
    • prefer_related_applications هي true
    • عنصر related_applications يتضمّن معلومات عن التطبيق
  • يتم عرضه عبر HTTPS

سيتم تنشيط حدث beforeinstallprompt عند استيفاء هذه المعايير. إِنْتَ يمكنك استخدامه لمطالبة المستخدم بتثبيت تطبيقك المحلي.

سمات البيان المطلوبة

لطلب تثبيت تطبيقك الأصلي من المستخدم، عليك إضافة خاصيتين إلى ملف بيان تطبيق الويب، وهماprefer_related_applications و related_applications.

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

تُطلب من المتصفّح من خلال السمة prefer_related_applications أن يطلب من العميل استخدام تطبيقك الأصلي بدلاً من تطبيق الويب. إذا تركت هذه القيمة غير محدّدة أو false، سيطلب المتصفّح من العميل تثبيت تطبيق الويب بدلاً من ذلك.

related_applications هو صفيف يحتوي على قائمة بالعناصر التي تُعلم المتصفّح بتطبيقك الأصلي المفضّل. يجب أن يتضمّن كل عنصر سمة platform وسمة id. حيث يكون platform هو play ويكون id هو رقم تعريف تطبيقك على "متجر Play".

عرض طلب التثبيت

لإظهار مربع حوار التثبيت، يجب:

  1. يرصد الحدث beforeinstallprompt.
  2. أطلِع المستخدم على أنّه يمكن تثبيت تطبيقك الأصلي باستخدام زر أو عنصر آخر سيؤدي إلى إنشاء حدث إيماءة مستخدِم.
  3. يمكنك عرض الطلب من خلال الاتصال بالرقم prompt() في الحدث beforeinstallprompt المحفوظ.

الاستماع إلى beforeinstallprompt

في حال استيفاء المعايير، سيعمل Chrome على تنشيط beforeinstallprompt. فعالية. يمكنك استخدامه للإشارة إلى أنّه يمكن تثبيت تطبيقك، ثم عرض طلب المستخدم لتثبيته.

عند تنشيط حدث beforeinstallprompt، احفظ إشارةً إلى الحدث. وتعديل واجهة المستخدم للإشارة إلى أنّ المستخدم يمكنه تثبيت تطبيقك

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

إبلاغ المستخدم بأنّه يمكن تثبيت تطبيقك

إنّ أفضل طريقة لإعلام المستخدم بأنّه يمكن تثبيت تطبيقك هي إضافة زر أو عنصر آخر إلى واجهة المستخدم. عدم عرض إعلان بيني بملء الصفحة أو غير ذلك من العناصر التي قد تكون مزعجة أو مشتِّتة للانتباه.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

عرض الطلب

لعرض طلب التثبيت، اتّصِل بالرقم prompt() في الحدث المحفوظ. من داخل إيماءة المستخدم. سيظهر مربّع حوار نمطي يطلب من المستخدم لإضافة تطبيقك إلى شاشتهم الرئيسية.

بعد ذلك، ننصحك بالانتباه إلى الوعد الذي تعده السمة userChoice. تشير رسالة الأشكال البيانية إرجاع عنصر ضمن السمة outcome بعد أن يصبح الطلب عرض ورد المستخدم عليه.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

يمكنك طلب "prompt()" في الحدث المؤجل مرّة واحدة فقط. إذا رفض المستخدم عليك الانتظار حتى يتم إطلاق حدث beforeinstallprompt في التنقل في الصفحة التالية.

اعتبارات خاصة عند استخدام سياسة أمان المحتوى

إذا كان موقعك الإلكتروني يتضمّن سياسة أمان المحتوى تقييدية، احرص على إضافة *.googleusercontent.com إلى التوجيه img-src حتى تتمكّن Chrome من تنزيل الرمز المرتبط بتطبيقك من "متجر Play".

في بعض الحالات، قد تكون قيمة *.googleusercontent.com أكثر من المطلوب. من المهم من الممكن تضييق نطاق ذلك عن طريق تصحيح الأخطاء عن بُعد جهاز Android لتحديد عنوان URL لرمز التطبيق.