diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html | 122 |
1 files changed, 61 insertions, 61 deletions
diff --git a/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html b/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html index 6c54e5b115..0f347f2b7b 100644 --- a/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html +++ b/files/zh-cn/web/progressive_web_apps/add_to_home_screen/index.html @@ -11,74 +11,74 @@ tags: translation_of: Web/Progressive_web_apps/Add_to_home_screen original_slug: Web/Progressive_web_apps/添加到主屏幕 --- -<p class="summary">添加到主屏幕（A2HS）添加到主屏幕（简称A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松便捷地将自己喜欢的Web应用程序（或网站）的快捷方式添加到主屏幕中，以便他们随后可以通过单点访问它。本指南说明了A2HS的使用方式，以及作为开发人员要使您的用户利用A2HS所需做的事情。</p> +<p class="summary">添加到主屏幕（Add to Home Screen，简称 A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松便捷地将自己喜欢的 Web 应用程序（或网站）的快捷方式添加到主屏幕中，以便用户随后可以通过单击访问它。本指南说明了 A2HS 的使用方式，以及作为开发人员为使用户能利用 A2HS 所需做的事情。</p> -<h2 id="为什么选择A2HS？">为什么选择A2HS？</h2> +<h2 id="为什么选择_A2HS？">为什么选择 A2HS？</h2> -<p>A2HS被认为是渐进式<a href="/en-US/docs/Web/Progressive_web_apps">Web应用程序</a>哲学的一部分—为Web应用程序提供与原生应用程序相同的用户体验优势，因此它们可以在当今的生态系统战争中竞争。这部分是通过访问主屏幕上的应用程序图标来访问应用程序，然后将其整齐地显示在自己的窗口中的简单手势。A2HS使这成为可能。</p> +<p>A2HS被认为是渐进式 <a href="/en-US/docs/Web/Progressive_web_apps">Web 应用程序</a>哲学的一部分——为 Web 应用程序提供与原生应用程序相同的用户体验优势，因此它们可以在当今的生态系统战争中竞争。这部分是通过访问主屏幕上的应用程序图标来访问应用程序，然后将其整齐地显示在自己的窗口中的简单手势。A2HS使这成为可能。</p> -<h2 id="哪些浏览器支持A2HS？">哪些浏览器支持A2HS？</h2> +<h2 id="哪些浏览器支持_A2HS？">哪些浏览器支持 A2HS？</h2> -<p>Mobile Chrome / Android Webview 从31版开始支持A2HS，Opera for Android从32版开始支持，Firefox for Android从<a href="/en-US/docs/Mozilla/Firefox/Releases/58">58版</a>开始支持。</p> +<p>Mobile Chrome / Android Webview 从 31 版开始支持 A2HS，Opera for Android 从 32 版开始支持，Firefox for Android 从 <a href="/en-US/docs/Mozilla/Firefox/Releases/58">58 版</a> 开始支持。</p> <h2 id="如何使用？">如何使用？</h2> -<p>我们已经编写了一个非常简单的示例网站（<a href="https://mdn.github.io/pwa-examples/a2hs/">观看我们的在线演示</a>，并<a href="https://github.com/mdn/pwa-examples/tree/master/a2hs">查看源代码</a>)，该网站虽然功能不多，但是开发时使用了必要的代码，也可以将其添加到主屏幕中，并且service worker使其可以脱机使用。这个示例展示了一系列的狐狸图片。</p> +<p>我们已经编写了一个非常简单的示例网站（<a href="https://mdn.github.io/pwa-examples/a2hs/">观看我们的在线演示</a>，并<a href="https://github.com/mdn/pwa-examples/tree/master/a2hs">查看源代码</a>），该网站虽然功能不多，但是实现 A2HS 所必须的代码都有包含，Service Worker 也使其可以脱机使用。这个示例展示了一系列的狐狸图片。</p> -<p>如果您有适用于Android的Firefox，使用它导航到我们的示例：<code>https://mdn.github.io/pwa-examples/a2hs/</code>。你将会看到狐狸图片，但更重要的是，你将会看到一个带有加号（+）的“主页”图标—这是为具有必要功能的任何站点显示的“添加到主屏幕”图标。</p> +<p>如果您有适用于 Android 的 Firefox，使用它打开我们的示例：<code>https://mdn.github.io/pwa-examples/a2hs/</code>。你将会看到狐狸图片，但更重要的是，你将会看到一个带有加号（+）的“主页”图标——这是为具有必要功能的任何站点显示的“添加到主屏幕”图标。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15762/add-to-home-screen-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 64px; margin: 0px auto; width: 500px;"></p> +<p><img alt="地址栏的“添加到主屏幕”图标" src="https://mdn.mozillademos.org/files/15762/add-to-home-screen-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 64px; margin: 0px auto; width: 500px;"></p> -<p>点击此按钮将显示一个确认横幅—按下大“+ 添加到主屏幕”按钮即可完成操作，将应用添加到主屏幕。（注意：在Android 8及更高版本中，将首先显示系统级的“添加到主屏幕”权限对话框。）</p> +<p>点击此按钮将显示一个确认横幅，按下大大的“添加到主屏幕”按钮即可将应用添加到主屏幕。（注意：在 Android 8 及更高版本中，将首先显示系统级的“添加到主屏幕”权限对话框。）</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15772/fx-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p> +<p><img alt="确认横幅" src="https://mdn.mozillademos.org/files/15772/fx-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p> -<p>如果您可以使用Mobile Chrome，则体验会略有不同；加载我们的网站后，您会看到一个弹出安装横幅，询问您是否要将此应用添加到主屏幕。</p> +<p>使用 Mobile Chrome 的体验则略有不同；加载我们的网站后，您会看到一个弹出安装横幅，询问您是否要将此应用添加到主屏幕。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15771/chrome-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p> +<p><img alt="Mobile Chrome 上的 A2HS 提示" src="https://mdn.mozillademos.org/files/15771/chrome-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p> <div class="note"> -<p><strong>注意：</strong>您可以在“<a href="https://developers.google.com/web/fundamentals/app-install-banners/">Web App安装横幅</a>”一文中找到有关Chrome安装横幅的更多信息。</p> +<p><strong>注意：</strong>您可以在“<a href="https://developers.google.com/web/fundamentals/app-install-banners/">Web App安装横幅</a>”一文中找到有关 Chrome 安装横幅的更多信息。</p> </div> -<p>如果您选择不将其添加到主屏幕，则可以稍后使用Chrome主菜单中的添加到主屏幕图标添加。</p> +<p>如果您选择不将其添加到主屏幕，则可以稍后使用 Chrome 主菜单中的添加到主屏幕图标添加。</p> <p>无论使用哪种浏览器，当您选择将应用程序添加到主屏幕时，您都会看到它与短标题一起出现，就像原生应用程序一样。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15770/a2hs-on-home-screen.png" style="border-style: solid; border-width: 1px; display: block; height: 243px; margin: 0px auto; width: 400px;"></p> +<p><img alt="桌面上的 PWA 图标" src="https://mdn.mozillademos.org/files/15770/a2hs-on-home-screen.png" style="border-style: solid; border-width: 1px; display: block; height: 243px; margin: 0px auto; width: 400px;"></p> <p>点按此图标可以将其打开，但是作为全屏应用程序，您将不再看到其周围的浏览器用户界面。</p> -<h2 id="如何使应用程序支持A2HS？">如何使应用程序支持A2HS？</h2> +<h2 id="如何使应用程序支持_A2HS？">如何使应用程序支持 A2HS？</h2> <p>要将您的应用添加到主屏幕，它需要满足以下条件：</p> <ul> - <li>应用通过HTTPs提供服务—Web正朝着更加安全的方向发展，许多现代web技术（包括A2HS）将仅工作在安全的环境中。</li> - <li>从HTML头链接具有正确字段的manifest文件。</li> + <li>应用通过 HTTPS 提供服务——Web 正朝着更加安全的方向发展，包括 A2HS 在内的许多现代 Web 技术都将仅工作在安全的环境中。</li> + <li>从 HTML 头链接具有正确字段的 manifest 文件。</li> <li>有合适的图标可显示在主屏幕上。</li> - <li>Chrome浏览器还要求该应用程序注册一个service worker（例如，使其在离线状态下可以运行）。</li> + <li>Chrome 浏览器还要求该应用程序注册一个 Service Worker（这样在离线状态下就也可以运行）。</li> </ul> <h3 id="Manifest">Manifest</h3> -<p>web manifest 以标准JSON格式编写，应放置在应用程序目录中的某个位置（最好是在根目录中），名称为<code><em>somefilename</em>.webmanifest</code>(我们选择 <code>manifest.webmanifest</code>)。它包含多个字段，这些字段定义有关Web应用程序及其行为的某些信息。</p> +<p>Web manifest 以标准 JSON 格式编写，应放置在应用程序目录中的某个位置（最好是在根目录中），名称为 <code><em>somefilename</em>.webmanifest</code>（这里我们将其命名为 <code>manifest.webmanifest</code>）。它包含多个字段，这些字段定义有关 Web 应用程序及其行为的某些信息。</p> <div class="note"> -<p><strong>注意：</strong>.webmanifest扩展名是在规范的“<a href="https://w3c.github.io/manifest/#media-type-registration">媒体类型注册</a>”部分中指定的，但通常浏览器将支持带有其他适当扩展名的清单，例如：.json。</p> +<p><strong>注意：</strong>.webmanifest 扩展名是在规范的“<a href="https://w3c.github.io/manifest/#media-type-registration">媒体类型注册</a>”部分中指定的，但通常浏览器也支持带有其他适当扩展名的清单，例如 .json。</p> </div> -<p>A2HS所需的字段如下：</p> +<p>A2HS 所需的字段如下：</p> <ul> - <li><code>background_color</code>：指定在某些应用程序上下文中使用的背景色。与A2HS最相关的一个是在点击主屏幕上的应用程序图标并首次开始加载时显示的初始屏幕（当前仅在通过Chrome将应用添加到主屏幕时显示）。</li> - <li><code>display</code>：指定应如何显示应用。 为了使它看起来像一个独特的应用程序（而不仅仅是网页），您应该选择一个值，例如<code>fullscreen</code>（根本不显示任何UI）或独立<code>standalone</code>（非常相似，但是系统级UI元素（例如状态栏）可能是可见的）。</li> + <li><code>background_color</code>：指定在某些应用程序上下文中使用的背景色。与 A2HS 最相关的一个是在点击主屏幕上的应用程序图标并首次开始加载时显示的初始屏幕（目前仅在通过 Chrome 将应用添加到主屏幕时显示）。</li> + <li><code>display</code>：指定应如何显示应用。 为了使它看起来像一个应用程序而非网页，这里应该填写像是 <code>fullscreen</code> （根本不显示任何 UI）或 <code>standalone</code>（与前者非常相似，但是状态栏这样的系统级 UI 元素可能是可见的）的值。</li> <li><code>icons</code>：指定在不同位置（例如，在任务切换器上或更重要的是在主屏幕上）表示应用程序时浏览器使用的图标。 我们的演示中仅包含一个。</li> - <li><code>name</code>/<code>short_name</code>：这些字段提供了在不同位置表示应用程序时要显示的应用程序名称。<code>name</code>提供完整的应用名称。<code>short_name</code>当没有足够的空间显示全名时，提供一个缩写名称。如果您的应用程序名称特别长，建议您同时提供两者。</li> - <li><code>start_url</code>：提供启动添加到主屏幕应用程序时应加载的资源的路径。请注意，这必须是一个真相网站主页的相对路径，相对于 manifest的url。 另外，请注意，Chrome在显示安装标语之前需要这样做，而Firefox在显示“含+号的home”图标时并不需要它。</li> + <li><code>name</code>/<code>short_name</code>：这些字段提供了在不同位置表示应用程序时要显示的应用程序名称。<code>name</code> 提供完整的应用名称。<code>short_name</code> 则是当没有足够的空间显示全名时，提供的缩写名称。如果您的应用程序名称特别长，建议您同时提供两者。</li> + <li><code>start_url</code>：提供启动添加到主屏幕应用程序时应加载的资源的路径。请注意，这必须是一个相对 manifest 指向网站主页的相对路径。另请注意，Chrome 需要这条字段才能显示安装标语，而 Firefox 即使没有这条字段也会显示用于添加到主屏的含加号的主页图标。</li> </ul> -<p>我们的示例应用程序的manifest如下所示：</p> +<p>我们的示例应用程序的 manifest 如下所示：</p> <pre class="brush: js">{ "background_color": "purple", @@ -98,37 +98,37 @@ original_slug: Web/Progressive_web_apps/添加到主屏幕 <h3 id="合适的图标">合适的图标</h3> -<p>如以上manifest所示，我们包括一个192 x 192像素的图标，供我们的应用使用。您可以根据需要添加更多尺寸；Android将为每个不同的用例选择最合适的尺寸。您还可以决定添加不同类型的图标，以便设备可以使用他们能够使用的最佳图标（例如，Chrome已经支持WebP格式）.</p> +<p>如以上 manifest 所示，我们包括一个 192 x 192 像素的图标，供我们的应用使用。您可以根据需要添加更多尺寸；Android 将为每个不同的用例选择最合适的尺寸。您还可以决定添加不同类型的图标，以便设备可以使用他们能够使用的最佳图标（例如，Chrome 已经支持 WebP 格式）。</p> -<p>请注意，每个图标对象中的 <code>type</code> 成员都指定了该图标的mimetype，因此浏览器可以快速读取该图标的类型，然后将其忽略，并在不支持该图标时采用其他图标。</p> +<p>请注意，每个图标对象中的 <code>type</code> 成员都指定了该图标的 MIME 类型，因此浏览器可以快速读取该图标的类型，并在不支持此类型时将其忽略并采用其他图标。</p> -<p>在设计图标方面，您应该遵循与任何Android图标相同的最佳做法（请参阅<a href="https://developer.android.com/guide/practices/ui_guidelines/icon_design.html">Android图标设计指南</a>）。</p> +<p>在设计图标方面，您应该遵循与任何 Android 图标相同的最佳做法（请参阅 <a href="https://developer.android.com/guide/practices/ui_guidelines/icon_design.html">Android 图标设计指南</a>）。</p> -<h3 id="将HTML链接到manifest">将HTML链接到manifest</h3> +<h3 id="将_HTML_链接到_manifest">将 HTML 链接到 manifest</h3> -<p>要完成manifest的设置，您需要从应用程序主页的 HTML 中引用它：</p> +<p>要完成 manifest 的设置，您需要从应用程序主页的 HTML 中引用它：</p> <pre class="brush: html"><<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>manifest<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>manifest.webmanifest<span class="pl-pds">"</span></span>></pre> -<p>一旦支持 manifest，支持 A2HS 的浏览器就会知道在哪里查找它。</p> +<p>一旦有了 manifest 声明，支持 A2HS 的浏览器就会知道在哪里查找它。</p> -<h2 id="A2HS没有给你什么？">A2HS没有给你什么？</h2> +<h2 id="A2HS_不提供什么？">A2HS 不提供什么？</h2> -<p>请记住，将应用程序添加到主屏幕时，它只会使该应用程序易于访问—不会将应用程序的资产和数据下载到您的设备上，也不会使该应用程序脱机使用或类似的操作。 为了使你的应用离线运行，你必须使用<a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a>来离线存储资源，如果需要，还可以使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">Web storage</a> 或 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> 来存储其数据。</p> +<p>请记住，将应用程序添加到主屏幕时，它只会使该应用程序易于访问，而不会将应用程序的资料和数据下载到您的设备上，也不会使该应用程序脱机使用或类似的操作。为了使应用离线运行，你必须使用 <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> 来离线存储资源，如果需要，还可以使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> 或 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> 来存储其数据。</p> <p>在示例应用程序中，我们仅使用了一个service worker来存储所有必需的文件。service worker使用<code><a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js">index.js</a></code> 文件中的最终的代码块在网站上注册。然后，我们使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Cache">Cache API</a> 缓存网站的所有资产，并使用 <a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js">sw.js</a> 文件中的代码从缓存而不是网络中为它们提供服务。</p> -<h2 id="桌面上的A2HS">桌面上的A2HS</h2> +<h2 id="桌面上的_A2HS">桌面上的_A2HS</h2> -<p>虽然最初旨在改善移动操作系统上的用户体验，但人们也提出了使PWA也可以安装在桌面平台上的趋势。</p> +<p>虽然 PWA 最初旨在改善移动操作系统上的用户体验，但也有人推进在桌面端安装 PWA 的进程。</p> <div class="note"> -<p><strong>注意：</strong>在撰写本文时，仅在较新版本的Chrome（在Windows中默认情况下，在macOS上的＃enable-desktop-pwas标志开启后）中支持以下功能。</p> +<p><strong>注意：</strong>在撰写本文时，仅在较新版本的 Chrome 支持以下功能（在 Windows 上默认支持，在 macOS 则需开启 #enable-desktop-pwas 标志）。</p> </div> <h3 id="添加安装按钮">添加安装按钮</h3> -<p>为了使PWA可在桌面上安装，我们首先在文档中添加了一个按钮，以允许用户进行安装—桌面应用程序不会自动提供此按钮，并且需要通过用户手势来触发安装：</p> +<p>为了使 PWA 可在桌面上安装，我们首先在文档中添加了一个按钮，以允许用户进行安装—桌面应用程序不会自动提供此按钮，并且需要通过用户手势来触发安装：</p> <pre class="brush: html"><button class="add-button">Add to home screen</button></pre> @@ -140,30 +140,30 @@ original_slug: Web/Progressive_web_apps/添加到主屏幕 left: 1px; }</pre> -<h3 id="用于处理安装的JavaScript">用于处理安装的JavaScript</h3> +<h3 id="用于处理安装的_JavaScript">用于处理安装的_JavaScript</h3> -<p>在<a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js"><code>index.js</code>文件</a>的底部，我们添加了一些JavaScript来处理安装。首先，我们声明一个<code>deferredPrompt</code>变量（我们将在后面解释），获得对安装按钮的引用，并初始设置为<code>display: none</code>：</p> +<p>在 <a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js"><code>index.js</code> 文件</a>的底部，我们添加了一些 JavaScript 代码来处理安装。首先，我们声明一个 <code>deferredPrompt</code> 变量（我们将在后面解释），获得对安装按钮的引用，并初始设置为 <code>display: none</code>：</p> <pre class="brush: js">let deferredPrompt; const addBtn = document.querySelector('.add-button'); addBtn.style.display = 'none';</pre> -<p>我们最初隐藏该按钮是因为PWA必须遵循A2HS标准才能安装。发生这种情况时，支持的浏览器将触发<code>beforeinstallprompt</code>事件。 然后，我们可以使用以下处理程序来处理安装：</p> +<p>我们最初隐藏该按钮是因为 PWA 必须满足 A2HS 标准才会安装。条件满足时，支持的浏览器将触发 <code>beforeinstallprompt</code> 事件。然后，我们可以使用以下处理程序来处理安装：</p> <pre class="brush: js">window.addEventListener('beforeinstallprompt', (e) => { - // Prevent Chrome 67 and earlier from automatically showing the prompt + // 防止 Chrome 67 及更早版本自动显示安装提示 e.preventDefault(); - // Stash the event so it can be triggered later. + // 稍后再触发此事件 deferredPrompt = e; - // Update UI to notify the user they can add to home screen + // 更新 UI 以提醒用户可以将 App 安装到桌面 addBtn.style.display = 'block'; addBtn.addEventListener('click', (e) => { - // hide our user interface that shows our A2HS button + // 隐藏显示 A2HS 按钮的界面 addBtn.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'); @@ -178,33 +178,33 @@ addBtn.style.display = 'none';</pre> <p>所以我们在这里：</p> <ul> - <li>调用{{domxref("Event.preventDefault()")}}以停止Chrome 67及更早版本自动调用安装提示（此行为在Chrome 68中已更改）。</li> - <li>将事件对象存储在<code>deferredPrompt</code>变量中，以便以后可以用于执行实际安装。</li> - <li>将按钮设置为<code>display: block</code>，以便它出现在UI中供用户点击。</li> - <li>设置按钮的<code>click</code>处理程序。</li> + <li>调用 {{domxref("Event.preventDefault()")}} 以防止 Chrome 67 及更早版本自动调用安装提示（此行为在 Chrome 68 已更改）。</li> + <li>将事件对象存储在 <code>deferredPrompt</code> 变量中，以便以后可以用于执行实际安装。</li> + <li>将按钮设置为 <code>display: block</code>，以便它出现在 UI 中供用户点击。</li> + <li>设置按钮的 <code>click</code> 处理程序。</li> </ul> <p>点击处理程序包含以下步骤：</p> <ul> - <li>通过<code>display: none</code>再次隐藏按钮—安装应用程序后将不再需要它。</li> - <li>使用<code>beforeinstallprompt</code>事件对象（存储在<code>deferredPrompt</code>中）上可用的<code>prompt()</code>方法触发显示安装提示。</li> - <li>使用<code>userChoice</code>属性响应用户与提示的交互，该属性再次在<code>beforeinstallprompt</code>事件对象上可用。</li> - <li>将<code>deferredPrompt</code>设置为null，因为不再需要它。</li> + <li>通过 <code>display: none</code> 再次隐藏按钮—安装应用程序后将不再需要它。</li> + <li>使用 <code>beforeinstallprompt</code> 事件对象（存储在 <code>deferredPrompt</code> 中）上可用的 <code>prompt()</code> 方法触发显示安装提示。</li> + <li>使用 <code>userChoice</code> 属性响应用户与提示的交互，该属性再次在 <code>beforeinstallprompt</code> 事件对象上可用。</li> + <li>将 <code>deferredPrompt</code> 设置为 null，因为不再需要它。</li> </ul> -<p>So when the button is clicked, the install prompt appears.</p> +<p>于是，点击按钮后安装提示就会消失。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16281/chrome-desktop-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 163px; margin: 0px auto; width: 300px;"></p> +<p><img alt="应用安装提示" src="https://mdn.mozillademos.org/files/16281/chrome-desktop-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 163px; margin: 0px auto; width: 300px;"></p> -<p>如果用户选择安装，则将安装该应用程序（可作为独立的桌面应用程序使用），并且不再显示“安装”按钮（如果已经安装了该应用程序，则将不再触发<code>onbeforeinstallprompt</code>事件）。当您打开应用程序时，它将显示在其自己的窗口中：</p> +<p>如果用户选择安装，则将安装该应用程序（可作为独立的桌面应用程序使用），并且不再显示“安装”按钮（如果已经安装了该应用程序，则将不再触发 <code>onbeforeinstallprompt</code> 事件）。当您打开应用程序时，它将显示在其自己的窗口中：</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16280/a2hs-installed-desktop.png" style="border-style: solid; border-width: 1px; display: block; height: 296px; margin: 0px auto; width: 500px;"></p> +<p><img alt="安装后的应用界面" src="https://mdn.mozillademos.org/files/16280/a2hs-installed-desktop.png" style="border-style: solid; border-width: 1px; display: block; height: 296px; margin: 0px auto; width: 500px;"></p> <p>如果用户选择“取消”，则应用程序的状态将返回到单击按钮之前的状态。</p> <div class="note"> -<p><strong>注意：</strong>本部分的代码主要来自Pete LaPage的<a href="https://developers.google.com/web/fundamentals/app-install-banners/">应用安装横幅/添加到主屏幕</a>。</p> +<p><strong>注意：</strong>本部分的代码主要来自 Pete LaPage 的<a href="https://developers.google.com/web/fundamentals/app-install-banners/">应用安装横幅/添加到主屏幕</a>。</p> </div> <h2 id="其他">其他</h2> |