[TOC] # 网络应用安装横幅 应用安装横幅有两种：**网络应用安装横幅**和**本机应用安装横幅**。 这两种应用安装横幅让您的用户可以快速无缝地将您的网络或本机应用添加到他们的主屏幕，无需退出浏览器。 添加应用安装横幅很轻松，Chrome 会为您处理大部分的繁重工作。 您需要在您的网站中添加一个包含您的应用详细信息的网络应用清单文件。 然后，Chrome 使用一组条件和访问频率启发式算法来确定何时显示横幅。 请继续阅读以了解更多详情。 > Note: Add to Homescreen（有时缩写为 A2HS）是网络应用安装横幅的另一个名称。两个术语相等同。  <br> ## 条件有哪些？ Chrome 将在您的应用符合以下条件时自动显示横幅： * Web应用程序尚未安装 * 满足用户参与启发式（目前，用户与域进行了交互至少30秒） * 拥有一个manifest文件，该文件具有： * short_name 或 name * 一个 192x192 png 图标（图标声明必须包含一个 mime 类型的 `image/png`） * `start_url` * display必须是以下之一：`fullscreen`，`standalone` 或 `minimal-ui` * 通过 HTTPS 提供（用于 `server workers`）。 * 已使用 `fetch` 事件处理程序注册了 `server workers` 满足这些条件后，Chrome将触发 `beforeinstallprompt` 事件，您可以使用该事件提示用户安装 `Progressive Web App` 。 > 注意：其他浏览器具有不同的安装标准，或触发beforeinstallprompt事件。 查看各自的站点以获取完整详细信息：[Edge](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps#requirements)，[Firefox](https://developer.mozilla.org/en-US/Apps/Progressive/Add_to_home_screen#How_do_you_make_an_app_A2HS-ready)，Opera，Samsung Internet和[UC Browser](https://plus.ucweb.com/docs/pwa/docs-en/zvrh56)。 If the web app manifest includes related_applications and has "prefer_related_applications": true, the native app install prompt will be shown instead. 如果 `web app manifest`包含 `related_applications` 且 具有 `"prefer_related_applications": true`，则将显示本机应用程序安装提示。 <br> ## 显示“添加到主屏幕”对话框 要显示“添加到主屏幕”对话框，您需要： * 侦听 `beforeinstallprompt` 事件 * 通知用户您的应用程序可以使用按钮或其他元素安装，这将生成用户手势事件。 * 通过在已保存的 `beforeinstallprompt` 事件上调用 `prompt()` 来显示提示。  > 注意：Chrome 67及更早版本显示“添加到主屏幕”横幅。 它已在Chrome 68中删除。 ### 监听beforeinstallprompt 如果符合添加到主屏幕条件，则Chrome将触发 `beforeinstallprompt` 事件，您可以使用该事件指示您的应用可以“安装”，然后提示用户进行安装。 触发 `beforeinstallprompt` 事件后，保存对事件的引用，并更新用户界面以指示用户可以将应用程序添加到其主屏幕。 ``` let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { // 防止Chrome 67及更早版本自动显示提示 e.preventDefault(); // 存储事件，以便稍后触发。 deferredPrompt = e; }); ``` ### 通知用户您的应用程序可以安装 通知用户可以安装应用程序的最佳方法是在用户界面中添加按钮或其他元素。 不要显示整页插页式广告或其他可能令人讨厌或分散注意力的元素。 ``` let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { // 防止Chrome 67及更早版本自动显示提示 e.preventDefault(); // 存储事件，以便稍后触发。 deferredPrompt = e; // 更新UI通知用户可以添加到主屏幕 btnAdd.style.display = 'block'; }); ``` ### 显示提示 要显示添加到主屏幕提示，请在用户手势内对已保存事件调用 `prompt()`。 它将显示一个模态对话框，要求用户将您的应用添加到他们的主屏幕。 然后，监听 `userChoice` 属性返回的 `promise`。 在提示显示并且用户已对其作出响应后，`promise`将返回带有 `outcome` 属性的对象。 ``` btnAdd.addEventListener('click', (e) => { // hide our user interface that shows our A2HS button btnAdd.style.display = 'none'; // Show the prompt deferredPrompt.prompt(); // Wait for the user to respond to the prompt deferredPrompt.userChoice .then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('User accepted the A2HS prompt'); } else { console.log('User dismissed the A2HS prompt'); } deferredPrompt = null; }); }); ``` 您只能在延迟事件上调用一次prompt()。如果用户将其解除，则您需要等到下一页导航中触发 `beforeinstallprompt` 事件。 ## 迷你信息栏 `mini-infobar` 是 Chrome 在 Android 上的临时体验，因为我们致力于在所有平台上创建一致的体验，其中包括多功能框中的安装按钮。 迷你信息栏是Chrome UI组件，不受网站控制，但可以被用户轻松解除。 一旦被用户解除，在经过足够的时间（目前为3个月）之后，它将不再出现。 无论您是否在beforeinstallprompt事件上阻止了默认（），当站点满足添加到主屏幕标准时，将显示迷你信息栏。 > Chrome操作系统上不显示迷你信息栏。 ## 确定应用程序是否已成功安装 要确定应用程序在接受提示后是否已成功添加到用户的主屏幕，您可以侦听 `appinstalled ` 事件。 ~~~ window.addEventListener('appinstalled', (evt) => { app.logEvent('a2hs', 'installed'); }); ~~~ <br> ## 检测您的应用是否从主屏幕启动 ### **display-mode** 媒体查询 `display-mode` 媒体查询可以根据应用程序的启动方式使用样式，或使用JavaScript确定如何启动样式。 要使用 `“display”：“standalone”` 从主屏幕启动时为上面的应用程序应用不同的背景颜色，使用条件CSS： ~~~ @media all and (display-mode: standalone) { body { background-color: yellow; } } ~~~ 也可以通过JavaScript检测显示模式是否是 `display-mode`： ``` if (window.matchMedia('(display-mode: standalone)').matches) { console.log('display-mode is standalone'); } ``` ### Safari 要确定应用程序是否在Safari中以**独立**模式启动，您可以使用JavaScript来检查： ``` if (window.navigator.standalone === true) { console.log('display-mode is standalone'); } ``` <br> ## 更新应用的图标和名称 如果您更改了清单中的任何属性，那么这些更改将在用户再次运行您的应用后反映给用户。 > 提示：图标可能会被缓存，因此在更新图标或其他图形时更改文件名可能会有所帮助。 <br> ## 测试添加主屏幕的体验 您可以使用Chrome DevTools手动触发 `beforeinstallprompt` 事件。 这使得可以查看用户体验，了解流程如何工作或调试流程。 如果不符合PWA标准，Chrome将在控制台中抛出异常，并且不会触发该事件。 > 警告：Chrome的桌面和移动安装流程略有不同。 虽然说明相似，但在移动设备上进行测试需要远程调试; 没有它，Chrome将使用桌面安装流程。 Chrome OS 打开Chrome DevTools 进入 **Application** 面板 进入 **Manifest** tab 点击 **Add to home screen** > 要在Mac或Windows上测试Desktop Progressive Web Apps的安装流程，您需要启用#enable-desktop-pwas标志。 是否会触发beforeinstallprompt？ 测试是否会触发beforeinstallprompt事件的最简单方法是使用Lighthouse来审核您的应用，并检查用户可以提示安装Web App测试的结果。 ## 参考资料 [网络应用安装横幅（英文 2018.9.14更新）](https://developers.google.com/web/fundamentals/app-install-banners/)