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

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

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

桌面版浏览器默认安装对话框。 <ph type="x-smartling-placeholder">
</ph> 桌面版的默认安装对话框


适用于移动设备的浏览器默认安装对话框。 <ph type="x-smartling-placeholder">
</ph> 移动设备上的默认安装对话框

更丰富的安装界面

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

桌面设备和移动设备上更丰富的安装界面 <ph type="x-smartling-placeholder">
</ph> 在桌面设备和移动设备上更丰富的安装界面。

“Richer Install”界面对话框由 Web 清单中 descriptionscreenshots 字段的内容组成。

如需触发此对话框,您只需针对相应设备规格添加至少一个屏幕截图,但建议您同时添加说明。有关这些字段的具体信息,请参阅下文。

屏幕截图

屏幕截图确实能使内容更加丰富部分,因此我们强烈建议您使用。您需要在清单中添加 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
."
}
已添加说明
已添加说明。
已被截断的较长说明。
较长的说明会被截断。

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

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

深入阅读

演示

<!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>

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