Как добавить расширенный интерфейс установки

Магазины приложений предоставляют разработчикам возможность продемонстрировать свои приложения перед установкой со скриншотами и текстовой информацией, которая помогает пользователю сделать выбор в пользу установки приложения. Более богатый пользовательский интерфейс установки предоставляет разработчикам веб-приложений аналогичную возможность предложить своим пользователям установить их приложение прямо из браузера. Этот улучшенный пользовательский интерфейс доступен в Chrome для Android и настольных компьютерах.

Подсказка по умолчанию

См. пример ниже, посвященный стандартному интерфейсу, который не обеспечивает достаточного контекста.

Диалоговое окно установки браузера по умолчанию для рабочего стола.
Диалоговое окно установки по умолчанию на рабочем столе


Диалоговое окно установки браузера по умолчанию для мобильных устройств.
Диалоговое окно установки по умолчанию на мобильном устройстве

Более богатый пользовательский интерфейс установки

Чтобы получить диалоговое окно расширенного пользовательского интерфейса установки вместо обычного небольшого приглашения по умолчанию, добавьте screenshots и поля description в свой веб-манифест. Посмотрите пример Squoosh.app ниже:

Более богатый пользовательский интерфейс установки на настольных компьютерах и мобильных устройствах
Более богатый пользовательский интерфейс установки на настольных компьютерах и мобильных устройствах.

Диалоговое окно расширенного пользовательского интерфейса установки состоит из содержимого полей description и screenshots в веб-манифесте.

Для вызова диалога достаточно добавить хотя бы один скриншот для соответствующего форм-фактора, но рекомендуется также добавить описание. Ознакомьтесь с особенностями этих полей ниже.

Скриншоты

Снимки экрана действительно добавляют «более богатую» часть новому пользовательскому интерфейсу установки, и мы настоятельно рекомендуем их использовать. В свой манифест вы добавляете элемент screenshots , который принимает массив, требующий хотя бы одного изображения, и Chrome будет отображать до восьми. Пример показан ниже.

 "screenshots": [
    {
     "src": "source/image1.png",
      "sizes": "640x320",
      "type": "image/png",
      "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 и используется в качестве меры безопасности для защиты пользователей .

Дальнейшее чтение

Демо

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();
  });
}