آن را قابل نصب کنید

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

دکمه نصب را کنترل کنید

برای نشان دادن اعلان install، prompt() را روی رویداد ذخیره شده beforeinstallprompt فراخوانی کنید. فراخوانی prompt() در کنترل کننده کلیک دکمه install انجام می شود زیرا prompt() باید از یک ژست کاربر فراخوانی شود.

1. یک کنترل کننده رویداد کلیک برای دکمه نصب اضافه کنید.
2. فراخوانی prompt() روی رویداد ذخیره شده beforeinstallprompt .
3. نتایج درخواست را ثبت کنید.
4. رویداد ذخیره شده beforeinstallprompt را روی null قرار دهید.
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، نوار اطلاعات کوچک و از طریق نمادی در omnibox استفاده کنند. می‌توانید با گوش دادن به رویداد 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;
});

در ادامه مطلب

تبریک می‌گوییم، برنامه شما اکنون قابل نصب است!

در اینجا چند کار اضافی وجود دارد که می توانید انجام دهید:

• تشخیص دهید که آیا برنامه شما از صفحه اصلی راه اندازی شده است یا خیر
• به جای آن، درخواست نصب برنامه سیستم عامل را نشان دهید