此页面由 Cloud Translation API 翻译。

如何添加更丰富的安装界面

Adriana Jara

应用商店为开发者提供了一个空间，可以在安装前展示其应用，并提供屏幕截图和文本信息，帮助用户选择安装应用。更丰富的安装界面也为 Web 应用开发者提供了类似的空间，以便他们邀请用户直接通过浏览器安装他们的应用。此增强版界面适用于 Android 版 Chrome 和桌面环境。

默认提示

有关默认体验，请参见以下示例，该示例未提供足够的背景信息。

适用于移动设备的浏览器默认安装对话框。 — </ph> 移动设备上的默认安装对话框

更丰富的安装界面

如需获取“Richer Install”界面对话框，而不是常规的小型默认提示，请将 screenshots 和 description 字段添加到您的 Web 清单中。请查看下面的 Squoosh.app 示例：

“Richer Install”界面对话框由 Web 清单中 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 图片格式。
将仅显示 8 张屏幕截图。如果添加了更多此类代码，用户代理会直接忽略它们。

此外，您还需要添加图片的尺寸和类型，以便图片能够正确呈现。观看此演示。

form_factor 会向浏览器指明屏幕截图应显示在桌面设备 (wide) 还是移动设备环境 (narrow) 中。

说明

description 成员在安装提示中描述应用，以邀请用户保留应用。

即使没有 description，该对话框也会显示，但建议这样做。请求最多会在 7 行文字（大约 324 个字符）后生效，较长的说明会被截断，并附加省略号（如此示例所示）。

{
…
"description": "Compress and compare images with different codecs
right in your browser."
}

该说明会显示在安装提示符的顶部。

您可能已从屏幕截图中注意到，安装对话框也会列出应用的源。因过长而不适合界面的源会被截断，这也称为省略，用于作为一项保护用户的安全措施。

深入阅读

演示

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