منتشر شده: ۱۴ فوریه ۲۰۲۰
بسیاری از مرورگرها به شما امکان می‌دهند برنامه وب پیش‌رونده (PWA) خود را مستقیماً در رابط کاربری آن فعال و نصب کنید. نصب (که قبلاً به آن افزودن به صفحه اصلی گفته می‌شد) به کاربران اجازه می‌دهد PWA شما را به دستگاه تلفن همراه یا دسکتاپ خود اضافه کنند. نصب PWA آن را به لانچر کاربر اضافه می‌کند، بنابراین می‌تواند مانند هر برنامه نصب شده دیگری اجرا شود.
علاوه بر تجربه نصب ارائه شده توسط مرورگر ، می‌توانید جریان نصب سفارشی خود را مستقیماً درون برنامه خود ارائه دهید.
هنگام بررسی اینکه آیا نصب PWA را ترویج دهید یا خیر، در نظر بگیرید که کاربران معمولاً چگونه از PWA شما استفاده می‌کنند. به عنوان مثال، اگر مجموعه‌ای از کاربران وجود دارند که چندین بار در هفته از PWA شما استفاده می‌کنند، این کاربران ممکن است از راحتی بیشتر راه‌اندازی برنامه شما از صفحه اصلی تلفن یا از منوی استارت در سیستم عامل دسکتاپ بهره‌مند شوند. برخی از برنامه‌های کاربردی و سرگرمی نیز از فضای صفحه نمایش اضافی ایجاد شده با حذف نوارهای ابزار مرورگر از پنجره در حالت‌های نصب standalone ، minimal-ui یا window-control-overlay بهره‌مند می‌شوند.
پیش‌نیازها
قبل از شروع، مطمئن شوید که PWA شما الزامات نصب را برآورده می‌کند، که معمولاً شامل داشتن یک مانیفست برنامه وب است.
نصب را ارتقا دهید
برای نشان دادن اینکه برنامه وب پیش‌رونده شما قابل نصب است، و برای ارائه یک جریان نصب درون برنامه‌ای سفارشی:
- منتظر رویداد
beforeinstallpromptباشید. - رویداد
beforeinstallpromptرا ذخیره کنید تا بعداً بتواند جریان نصب را آغاز کند. - به کاربر اطلاع دهید که PWA شما قابل نصب است و یک دکمه یا عنصر دیگر برای شروع فرآیند نصب درون برنامه‌ای ارائه دهید.
منتظر رویداد beforeinstallprompt باشید
اگر برنامه وب پیش‌رونده شما معیارهای نصب مورد نیاز را داشته باشد، مرورگر یک رویداد beforeinstallprompt را اجرا می‌کند. یک ارجاع به این رویداد ذخیره کنید و رابط کاربری خود را به‌روزرسانی کنید تا نشان دهد که کاربر می‌تواند PWA شما را نصب کند.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
جریان نصب درون برنامه‌ای
برای ارائه نصب درون برنامه‌ای، یک دکمه یا عنصر رابط کاربری دیگر فراهم کنید که کاربر بتواند با کلیک یا لمس آن، برنامه شما را نصب کند. وقتی روی عنصر کلیک یا لمس شد، prompt() را در رویداد ذخیره شده beforeinstallprompt (که در متغیر deferredPrompt ذخیره شده است) فراخوانی کنید. این کار یک کادر محاوره‌ای نصب به کاربر نشان می‌دهد و از او می‌خواهد که تأیید کند که می‌خواهد PWA شما را نصب کند.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
ویژگی userChoice یک promise است که با انتخاب کاربر اجرا می‌شود. شما فقط می‌توانید یک بار prompt() در رویداد deferred فراخوانی کنید. اگر کاربر آن را رد کند، باید منتظر بمانید تا رویداد beforeinstallprompt دوباره اجرا شود، که معمولاً بلافاصله پس از اجرای ویژگی userChoice است.
تشخیص زمان نصب موفقیت‌آمیز PWA
شما می‌توانید از ویژگی userChoice برای تعیین اینکه آیا کاربر برنامه شما را از درون رابط کاربری شما نصب کرده است یا خیر، استفاده کنید. اما اگر کاربر PWA شما را از نوار آدرس یا یک جزء مرورگر دیگر نصب کند، userChoice کمکی نخواهد کرد. در عوض، باید به رویداد appinstalled گوش دهید، که هر زمان که PWA شما نصب می‌شود، صرف نظر از اینکه از چه مکانیزمی برای نصب آن استفاده می‌شود، فعال می‌شود.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
نحوه راه‌اندازی PWA را تشخیص دهید
کوئری رسانه‌ای display-mode CSS نشان می‌دهد که PWA چگونه اجرا شده است، چه در یک تب مرورگر و چه به عنوان یک PWA نصب شده. این امر امکان اعمال سبک‌های مختلف را بسته به نحوه اجرای برنامه فراهم می‌کند. به عنوان مثال، می‌توانید آن را طوری پیکربندی کنید که همیشه دکمه نصب را پنهان کند و هنگام اجرا به عنوان یک PWA نصب شده، یک دکمه بازگشت ارائه دهد.
نحوه راه‌اندازی PWA را پیگیری کنید
برای ردیابی نحوه‌ی اجرای PWA توسط کاربران، از matchMedia() برای آزمایش کوئری رسانه‌ی display-mode استفاده کنید.
function getPWADisplayMode() {
if (document.referrer.startsWith('android-app://'))
return 'twa';
if (window.matchMedia('(display-mode: browser)').matches)
return 'browser';
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
return 'standalone';
if (window.matchMedia('(display-mode: minimal-ui)').matches)
return 'minimal-ui';
if (window.matchMedia('(display-mode: fullscreen)').matches)
return 'fullscreen';
if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
return 'window-controls-overlay';
return 'unknown';
}
پیگیری تغییر حالت نمایش
برای ردیابی اینکه آیا کاربر بین حالت‌های browser و سایر حالت‌های نمایش تغییر می‌کند، به تغییرات در کوئری رسانه‌ای display-mode گوش دهید.
// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});
به‌روزرسانی رابط کاربری بر اساس حالت نمایش فعلی
برای اعمال رنگ پس‌زمینه متفاوت برای یک PWA هنگام راه‌اندازی به عنوان یک PWA نصب‌شده، از CSS شرطی استفاده کنید:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
نماد و نام برنامه خود را به‌روزرسانی کنید
اگر نیاز به به‌روزرسانی نام برنامه یا اضافه کردن آیکون‌های جدید داشته باشید، چه باید کرد؟ برای مشاهده زمان و نحوه اعمال این تغییرات در کروم، بخش «نحوه مدیریت به‌روزرسانی‌های مانیفست برنامه وب توسط کروم» را بررسی کنید.