فروشگاه های برنامه فضایی را برای توسعه دهندگان فراهم می کنند تا برنامه های خود را قبل از نصب به نمایش بگذارند، با تصاویر و اطلاعات متنی که به کاربر کمک می کند تا برنامه را انتخاب کند. رابط کاربری غنی‌تر نصب فضای مشابهی را برای توسعه‌دهندگان برنامه‌های وب فراهم می‌کند تا از کاربران خود دعوت کنند تا برنامه خود را مستقیماً از مرورگر نصب کنند. این رابط کاربری پیشرفته در Chrome برای محیط‌های اندروید و دسکتاپ موجود است.
درخواست پیش فرض
برای تجربه پیش‌فرض، که زمینه کافی را فراهم نمی‌کند، مثال زیر را ببینید.
Richer Install UI
برای دریافت گفتگوی Richer Install UI به جای اعلان پیش فرض کوچک معمولی، screenshots و فیلدهای description را به مانیفست وب خود اضافه کنید. نمونه Squoosh.app را در زیر بررسی کنید:
گفتگوی Richer Install UI از محتویات فیلدهای description و screenshots در مانیفست وب تشکیل شده است.
برای فعال کردن دیالوگ فقط باید حداقل یک اسکرین شات برای فاکتور فرم مربوطه اضافه کنید، اما توصیه می شود توضیحات را نیز اضافه کنید. مشخصات آن فیلدها را در زیر بررسی کنید.
اسکرین شات ها
اسکرین‌شات‌ها واقعاً بخش «غنی‌تر» را به رابط کاربری نصب جدید اضافه می‌کنند و ما قویاً استفاده از آنها را توصیه می‌کنیم. در مانیفست خود عضو screenshots را اضافه می‌کنید، که آرایه‌ای می‌گیرد که حداقل به یک تصویر نیاز دارد و Chrome حداکثر هشت تصویر را نشان می‌دهد. یک مثال در زیر نشان داده شده است.
"screenshots": [
{
"src": "source/image1.gif",
"sizes": "640x320",
"type": "image/gif",
"form_factor": "wide",
"label": "Wonder Widgets"
}
]
اسکرین شات ها باید از این معیارها پیروی کنند:
- عرض و ارتفاع باید حداقل 320 پیکسل و حداکثر 3840 پیکسل باشد.
- حداکثر بعد نمی تواند بیش از 2.3 برابر ابعاد حداقل باشد.
- همه اسکرین شات ها با مقدار فاکتور فرم یکسان باید دارای نسبت های یکسان باشند.
- فقط فرمت های تصویر JPEG و PNG پشتیبانی می شوند.
- فقط هشت اسکرین شات نشان داده خواهد شد. اگر تعداد بیشتری اضافه شود، عامل کاربر به سادگی آنها را نادیده می گیرد.
همچنین، شما باید اندازه و نوع تصویر را درج کنید تا به درستی رندر شود. این دمو را ببینید .
form_factor به مرورگر نشان می دهد که آیا تصویر صفحه باید در محیط های دسکتاپ ( wide ) یا موبایل ( narrow ) ظاهر شود.
شرح
عضو description برنامه را در اعلان نصب توصیف می کند تا از کاربر دعوت کند برنامه را نگه دارد.
گفتگو حتی بدون description نمایش داده می شود، اما تشویق می شود. حداکثر پس از 7 خط متن (تقریباً 324 کاراکتر) شروع می شود و توضیحات طولانی تر کوتاه شده و یک بیضی اضافه می شود (همانطور که در این مثال می بینید).
{
…
"description": "Compress and compare images with different codecs
right in your browser."
}
توضیحات در بالای اعلان نصب ظاهر می شود.
ممکن است از اسکرین شات ها متوجه شده باشید که دیالوگ های نصب، منشاء برنامه را نیز فهرست می کنند. مبداهایی که بیش از حد طولانی هستند و متناسب با UI هستند کوتاه می شوند، این به عنوان eliding نیز شناخته می شود و به عنوان یک اقدام امنیتی برای محافظت از کاربران استفاده می شود.
بیشتر خواندن
نسخه ی نمایشی
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark light" />
<link rel="manifest" href="manifest.json" />
<title>How to add Richer Install UI to your web app</title>
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js');
});
}
</script>
<script type="module" src="script.js"></script> -->
</head>
<body>
<h1>How to add Richer Install UI to your web app</h1>
<ol>
<li>
Install the app by clicking the button below. After the installation,
the button is disabled.
<p>
<button disabled type="button">Install</button>
</p>
</li>
<li>
When you click on install a dialog similar to the ones from app stores
will be displayed.
</li>
<li>
The dialog includes the `description` and `screenshots` set in the app
manifest.
</li>
<li>
Screenshots should be different depending if the app is being installed
on a mobile or desktop device, according to the `form_factor` value set
for the screenshots on the manifest
</li>
</ol>
</body>
</html>JS
// The install button.
const installButton = document.querySelector('button');
// Only relevant for browsers that support installation.
if ('BeforeInstallPromptEvent' in window) {
// Variable to stash the `BeforeInstallPromptEvent`.
let installEvent = null;
// Function that will be run when the app is installed.
const onInstall = () => {
// Disable the install button.
installButton.disabled = true;
// No longer needed.
installEvent = null;
};
window.addEventListener('beforeinstallprompt', (event) => {
// Do not show the install prompt quite yet.
event.preventDefault();
// Stash the `BeforeInstallPromptEvent` for later.
installEvent = event;
// Enable the install button.
installButton.disabled = false;
});
installButton.addEventListener('click', async () => {
// If there is no stashed `BeforeInstallPromptEvent`, return.
if (!installEvent) {
return;
}
// Use the stashed `BeforeInstallPromptEvent` to prompt the user.
installEvent.prompt();
const result = await installEvent.userChoice;
// If the user installs the app, run `onInstall()`.
if (result.outcome === 'accepted') {
onInstall();
}
});
// The user can decide to ignore the install button
// and just use the browser prompt directly. In this case
// likewise run `onInstall()`.
window.addEventListener('appinstalled', () => {
onInstall();
});
}