initial commit

1 files changed, 218 insertions, 0 deletions

diff --git a/files/zh-cn/web/progressive_web_apps/添加到主屏幕/index.html b/files/zh-cn/web/progressive_web_apps/添加到主屏幕/index.html
new file mode 100644
index 0000000000..a0915ea9d2
--- /dev/null
+++ b/files/zh-cn/web/progressive_web_apps/添加到主屏幕/index.html
@@ -0,0 +1,218 @@
+---
+title: 添加到主屏幕
+slug: Web/Progressive_web_apps/添加到主屏幕
+tags:
+  - PWA
+  - 图标
+  - 服务进程
+  - 添加到主屏幕
+  - 清单
+  - 渐进式Web应用
+translation_of: Web/Progressive_web_apps/Add_to_home_screen
+---
+<p class="summary">添加到主屏幕（A2HS）添加到主屏幕（简称A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松便捷地将自己喜欢的Web应用程序（或网站）的快捷方式添加到主屏幕中，以便他们随后可以通过单点访问它。本指南说明了A2HS的使用方式，以及作为开发人员要使您的用户利用A2HS所需做的事情。</p>
+
+<h2 id="为什么选择A2HS？">为什么选择A2HS？</h2>
+
+<p>A2HS被认为是渐进式<a href="/en-US/docs/Web/Progressive_web_apps">Web应用程序</a>哲学的一部分—为Web应用程序提供与原生应用程序相同的用户体验优势，因此它们可以在当今的生态系统战争中竞争。这部分是通过访问主屏幕上的应用程序图标来访问应用程序，然后将其整齐地显示在自己的窗口中的简单手势。A2HS使这成为可能。</p>
+
+<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>
+
+<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>如果您有适用于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>点击此按钮将显示一个确认横幅—按下大“+ 添加到主屏幕”按钮即可完成操作，将应用添加到主屏幕。（注意：在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>如果您可以使用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>
+
+<div class="note">
+<p><strong>注意：</strong>您可以在“<a href="https://developers.google.com/web/fundamentals/app-install-banners/">Web App安装横幅</a>”一文中找到有关Chrome安装横幅的更多信息。</p>
+</div>
+
+<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>点按此图标可以将其打开，但是作为全屏应用程序，您将不再看到其周围的浏览器用户界面。</p>
+
+<h2 id="如何使应用程序支持A2HS？">如何使应用程序支持A2HS？</h2>
+
+<p>要将您的应用添加到主屏幕，它需要满足以下条件：</p>
+
+<ul>
+ <li>应用通过HTTPs提供服务—Web正朝着更加安全的方向发展，许多现代web技术（包括A2HS）将仅工作在安全的环境中。</li>
+ <li>从HTML头链接具有正确字段的manifest文件。</li>
+ <li>有合适的图标可显示在主屏幕上。</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>
+
+<div class="note">
+<p><strong>注意：</strong>.webmanifest扩展名是在规范的“<a href="https://w3c.github.io/manifest/#media-type-registration">媒体类型注册</a>”部分中指定的，但通常浏览器将支持带有其他适当扩展名的清单，例如：.json。</p>
+</div>
+
+<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>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>
+</ul>
+
+<p>我们的示例应用程序的manifest如下所示：</p>
+
+<pre class="brush: js">{
+  "background_color": "purple",
+  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "icon/fox-icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "name": "Awesome fox pictures",
+  "short_name": "Foxes",
+  "start_url": "/pwa-examples/a2hs/index.html"
+}</pre>
+
+<h3 id="合适的图标">合适的图标</h3>
+
+<p>如以上manifest所示，我们包括一个192 x 192像素的图标，供我们的应用使用。您可以根据需要添加更多尺寸；Android将为每个不同的用例选择最合适的尺寸。您还可以决定添加不同类型的图标，以便设备可以使用他们能够使用的最佳图标（例如，Chrome已经支持WebP格式）.</p>
+
+<p>请注意，每个图标对象中的 <code>type</code> 成员都指定了该图标的mimetype，因此浏览器可以快速读取该图标的类型，然后将其忽略，并在不支持该图标时采用其他图标。</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>
+
+<p>要完成manifest的设置，您需要从应用程序主页的 HTML 中引用它：</p>
+
+<pre class="brush: html">&lt;<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>&gt;</pre>
+
+<p>一旦支持 manifest，支持 A2HS 的浏览器就会知道在哪里查找它。</p>
+
+<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>在示例应用程序中，我们仅使用了一个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>
+
+<p>虽然最初旨在改善移动操作系统上的用户体验，但人们也提出了使PWA也可以安装在桌面平台上的趋势。</p>
+
+<div class="note">
+<p><strong>注意：</strong>在撰写本文时，仅在较新版本的Chrome（在Windows中默认情况下，在macOS上的＃enable-desktop-pwas标志开启后）中支持以下功能。</p>
+</div>
+
+<h3 id="添加安装按钮">添加安装按钮</h3>
+
+<p>为了使PWA可在桌面上安装，我们首先在文档中添加了一个按钮，以允许用户进行安装—桌面应用程序不会自动提供此按钮，并且需要通过用户手势来触发安装：</p>
+
+<pre class="brush: html">&lt;button class="add-button"&gt;Add to home screen&lt;/button&gt;</pre>
+
+<p>然后，我们给它一些简单的样式：</p>
+
+<pre class="brush: css">.add-button {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}</pre>
+
+<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>
+
+<pre class="brush: js">let deferredPrompt;
+const addBtn = document.querySelector('.add-button');
+addBtn.style.display = 'none';</pre>
+
+<p>我们最初隐藏该按钮是因为PWA必须遵循A2HS标准才能安装。发生这种情况时，支持的浏览器将触发<code>beforeinstallprompt</code>事件。 然后，我们可以使用以下处理程序来处理安装：</p>
+
+<pre class="brush: js">window.addEventListener('beforeinstallprompt', (e) =&gt; {
+  // Prevent Chrome 67 and earlier from automatically showing the prompt
+  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
+  addBtn.style.display = 'block';
+
+  addBtn.addEventListener('click', (e) =&gt; {
+    // hide our user interface that shows our A2HS button
+    addBtn.style.display = 'none';
+    // Show the prompt
+    deferredPrompt.prompt();
+    // Wait for the user to respond to the prompt
+    deferredPrompt.userChoice.then((choiceResult) =&gt; {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the A2HS prompt');
+        } else {
+          console.log('User dismissed the A2HS prompt');
+        }
+        deferredPrompt = null;
+      });
+  });
+});</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>
+</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>
+</ul>
+
+<p>So when the button is clicked, the install prompt appears.</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><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>
+</div>
+
+<h2 id="其他">其他</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps">渐进式Web应用</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker接口</a></li>
+ <li><a href="/en-US/docs/Web/Manifest">Web manifest参考</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/app-install-banners/">应用安装横幅</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div>