برنامه وب را نصب‌شدنی کنید

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 ذخیره‌شده را روی 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، نوار اطلاعات کوچک، و نماد موجود در همه‌جانبه‌باکس استفاده کنند. می‌توانید با گوش دادن به رویداد 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;
});

مطالعه بیشتر

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

در اینجا چند کار دیگر که می‌توانید انجام دهید آورده شده است: