اعلان نصب

کاربران ممکن است با فرآیند نصب PWA آشنا نباشند. به‌عنوان توسعه‌دهنده، متوجه خواهید شد که چه زمانی زمان مناسب برای دعوت از کاربر برای نصب برنامه است. اعلان های نصب پیش فرض مرورگر را نیز می توان افزایش داد. بیایید ابزارهای موجود را بررسی کنیم.

تقویت گفتگوی نصب

هنگامی که PWA ها معیارهای نصب را رد می کنند، مرورگرها اعلان های نصب پیش فرض را ارائه می دهند. مرورگر از ویژگی‌های name و icons از مانیفست برنامه وب شما برای ایجاد درخواست استفاده می‌کند.

درخواست نصب Microsoft Edge

برخی از مرورگرها با استفاده از فیلدهای تبلیغاتی در مانیفست ، از جمله description ، categories و screenshots ، تجربه نصب سریع را بهبود می بخشند. برای مثال، با استفاده از Chrome در Android، اگر PWA شما مقادیری را برای فیلدهای description و screenshots ارائه کند، تجربه گفتگوی نصب از یک نوار اطلاعات کوچک افزودن به صفحه اصلی به یک گفتگوی بزرگتر و با جزئیات بیشتر تبدیل می‌شود، شبیه به درخواست‌های نصب از یک برنامه. فروشگاه

مشاهده زمینه های تبلیغاتی در عمل:

رویداد beforeinstallprompt

اعلان‌های نصب مرورگر اولین قدم برای وادار کردن کاربران به نصب PWA شما هستند. برای پیاده سازی تجربه نصب خود، برنامه شما همچنان باید معیارهای نصب را رعایت کند: وقتی مرورگر تشخیص داد که برنامه شما قابل نصب است، رویداد beforeinstallprompt را اجرا می کند. برای سفارشی کردن تجربه کاربر، باید این کنترلر رویداد را پیاده سازی کنید. در اینجا به این صورت است:

  1. به رویداد beforeinstallprompt گوش دهید.
  2. آن را ذخیره کنید (بعداً به آن نیاز خواهید داشت).
  3. آن را از رابط کاربری خود فعال کنید.

کد زیر را برای نمونه ای از شنونده رویداد برای رویداد beforeinstallprompt ، ضبط آن و استفاده سفارشی بعدی بررسی کنید.

// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the default mini-infobar or install dialog from appearing on mobile
  e.preventDefault();
  // Save the event because you'll need to trigger it later.
  deferredPrompt = e;
  // Show your customized install prompt for your PWA
  // Your own UI doesn't have to be a single element, you
  // can have buttons in different locations, or wait to prompt
  // as part of a critical journey.
  showInAppInstallPromotion();
});

سپس، اگر کاربر روی دکمه نصب سفارشی شما کلیک کرد، از deferredPrompt که قبلاً ذخیره شده است استفاده کنید و prompt() آن را فراخوانی کنید، زیرا کاربر هنوز باید مراحل مرورگر را برای نصب برنامه شما طی کند. کاری که شما انجام دادید این بود که رویداد را به تأخیر انداختید تا زمانی که به کاربر زمینه مناسبی برای تشویق آنها به نصب PWA بدهید.

ثبت رویداد به شما این فرصت را می دهد تا نکات و مشوق هایی را برای کاربران خود اضافه کنید تا برنامه خود را نصب کنند و زمانی که می دانید کاربران درگیر بیشتری هستند، درخواست نصب را انتخاب کنید.

رویداد اجرا نمی شود اگر:

  • کاربر قبلاً PWA فعلی را نصب کرده است (فقط برای دسکتاپ و WebAPK در Android معتبر است).
  • این برنامه معیارهای نصب PWA را قبول نمی کند.
  • PWA به دلایل دیگر (به عنوان مثال، دستگاهی در حالت کیوسک یا بدون مجوز) روی دستگاه فعلی قابل نصب نیست.

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

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

جمع آوری تجزیه و تحلیل

استفاده از تجزیه و تحلیل به شما کمک می کند تا درک بهتری از مکان و زمان ارائه درخواست های خود داشته باشید. می توانید از ویژگی userChoice از رویداد beforeinstallprompt استفاده کنید. userChoice قولی است که با اقدامی که کاربر انجام داده حل می شود.

// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
  // deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
  deferredPrompt.prompt();
  // Find out whether the user confirmed the installation or not
  const { outcome } = await deferredPrompt.userChoice;
  // The deferredPrompt can only be used once.
  deferredPrompt = null;
  // Act on the user's choice
  if (outcome === 'accepted') {
    console.log('User accepted the install prompt.');
  } else if (outcome === 'dismissed') {
    console.log('User dismissed the install prompt');
  }
});

آن را در عمل ببینید

نمونه زیر را در مرورگر Chromium (دسکتاپ یا Android) در عمل امتحان کنید.

بازگشت به عقب

اگر مرورگر از beforeinstallprompt پشتیبانی نمی‌کند یا رویداد اجرا نمی‌شود، هیچ راه دیگری برای راه‌اندازی درخواست نصب مرورگر وجود ندارد. با این حال، در پلتفرم هایی که به کاربر اجازه می دهد PWA را به صورت دستی نصب کند، مانند iOS، می توانید این دستورالعمل ها را به کاربر نمایش دهید.

شما فقط باید این دستورالعمل ها را در حالت مرورگر ارائه دهید. سایر گزینه های نمایش مانند standalone یا fullscreen به این معنی است که کاربر قبلاً برنامه را نصب کرده است.

برای ارائه عنصر فقط در حالت مرورگر، از پرسش رسانه display-mode استفاده کنید: 

#installInstructions {
   display: none
}
@media (display-mode: browser) {
   #installInstructions {
     display: block
   }
}

Codelab

کتابخانه ها

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

منابع