درخواست نصب برنامه بومی

اعلان نصب برنامه بومی به شما این امکان را می دهد که به کاربران اجازه دهید به سرعت و به طور یکپارچه برنامه بومی خود را مستقیماً از فروشگاه برنامه، بدون خارج شدن از مرورگر و بدون نشان دادن یک محتوای آزاردهنده، روی دستگاه خود نصب کنند.

معیارها چیست؟

برای نشان دادن درخواست نصب برنامه بومی به کاربر، سایت شما باید معیارهای زیر را داشته باشد:

• نه برنامه وب و نه برنامه بومی که در حال حاضر روی دستگاه نصب شده است.
• شامل یک مانیفست برنامه وب است که شامل:
  • 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

ویژگی prefer_related_applications به مرورگر می‌گوید که به‌جای برنامه وب، برنامه بومی شما را از کاربر بخواهد. اگر این مقدار را تنظیم نشده یا false بگذارید، مرورگر از کاربر می‌خواهد به جای آن برنامه وب را نصب کند.

related_applications

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';
});

اعلان را نشان دهید

برای نمایش اعلان install، از داخل یک ژست کاربر، 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 نماد برنامه، این مورد را محدود کنید.