Магазины приложений предоставляют разработчикам возможность продемонстрировать свои приложения перед установкой со скриншотами и текстовой информацией, которая помогает пользователю сделать выбор в пользу установки приложения. Более богатый пользовательский интерфейс установки предоставляет разработчикам веб-приложений аналогичное пространство, позволяющее приглашать своих пользователей установить их приложение прямо из браузера. Этот улучшенный пользовательский интерфейс доступен в Chrome для Android и настольных компьютерах.
Подсказка по умолчанию
См. пример ниже, посвященный стандартному интерфейсу, который не обеспечивает достаточного контекста.
Более богатый пользовательский интерфейс установки
Чтобы получить диалоговое окно расширенного пользовательского интерфейса установки вместо обычного небольшого приглашения по умолчанию, добавьте screenshots и поля description в свой веб-манифест. Посмотрите пример Squoosh.app ниже:
Диалоговое окно расширенного пользовательского интерфейса установки состоит из содержимого полей 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."
}
Описание появится в верхней части окна установки.
Возможно, вы заметили на скриншотах, что в диалогах установки также указано происхождение приложения. Исходные файлы, длина которых слишком велика для пользовательского интерфейса, обрезаются. Это также называется eliding и используется в качестве меры безопасности для защиты пользователей .
дальнейшее чтение
- Более богатый пользовательский интерфейс установки PWA
- Более богатый пользовательский интерфейс установки доступен для настольных компьютеров.
Демо
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();
});
}