1 files changed, 124 insertions, 0 deletions
diff --git a/files/zh-cn/web/progressive_web_apps/installable_pwas/index.html b/files/zh-cn/web/progressive_web_apps/installable_pwas/index.html
new file mode 100644
index 0000000000..87c70deba5
--- /dev/null
+++ b/files/zh-cn/web/progressive_web_apps/installable_pwas/index.html
@@ -0,0 +1,124 @@
+---
+title: 让 PWA 易于安装
+slug: Web/Progressive_web_apps/Installable_PWAs
+tags:
+  - PWAs
+  - a2hs
+  - js13kGames
+  - 可安装
+  - 添加至主屏幕
+  - 渐进式应用
+translation_of: Web/Progressive_web_apps/Installable_PWAs
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">在上一篇文章，我们了解了如何通过<a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>让<a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 离线工作，我们可以更进一步，让用户如同本地应用一样在支持的移动浏览器上安装web应用。这篇文章讲述如何通过网页清单和添加到主屏特性来做到这一点。</p>
+
+<p>这些技术允许应用从设备主屏直接启动，而不是启动浏览器键入URL。你的web应用可以作为一等公民和本地应用肩并肩。这样更容易访问，而且你可以指定应用全屏运行，没有浏览器界面，这样看起来更像一个本地应用。</p>
+
+<h2 id="要求">要求</h2>
+
+<p>为了成为可安装网站，需要下列事情就位：</p>
+
+<ul>
+ <li>一份网页清单，填好 <a href="/en-US/Apps/Progressive/Add_to_home_screen#Manifest">正确的字段</a></li>
+ <li>网站的域必须是安全（HTTPS）的</li>
+ <li>一个本设备上代表应用的图标</li>
+ <li>一个注册好的service worker，可以让应用离线工作（这仅对于安卓设备上的Chrome浏览器是必需的）</li>
+</ul>
+
+<h3 id="清单文件">清单文件</h3>
+
+<p>关键元素是一份网页清单，它通过JSON形式列举了网站的所有信息。</p>
+
+<p>它通常位于网页应用的根目录。包含一些有用的信息，比如应用的标题，在一个移动OS上显示的代表该应用的不同大小的图标（例如，主屏图标）的路径，和用于加载或启动画面的背景颜色。这些信息是浏览器在安装web应用时和在主屏上显示应用需要的。</p>
+
+<p><a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> web应用的<code>js13kpwa.webmanifest</code>文件包含在<code>index.html</code>文件的{{htmlelement("head")}}段，如下行所示：</p>
+
+<pre class="brush: html notranslate">&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;</pre>
+
+<div class="note">
+<p><strong>注意：过去有一些常用的扩展名用于清单：</strong><code>manifest.webapp</code> 在Firefox OS应用清单中很流行，许多人使用<code>manifest.json</code>作为网页清单因为内容是JSON格式的。但是，<code>.webmanifest</code> 扩展名是在<a href="https://w3c.github.io/manifest/">W3C清单规范 </a>中显示指定的，所有应该坚持这种做法。</p>
+</div>
+
+<p>文件的内容是这个样子的:</p>
+
+<pre class="brush: json notranslate">{
+    "name": "js13kGames Progressive Web App",
+    "short_name": "js13kPWA",
+    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
+    "icons": [
+        {
+            "src": "icons/icon-32.png",
+            "sizes": "32x32",
+            "type": "image/png"
+        },
+        // ...
+        {
+            "src": "icons/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/pwa-examples/js13kpwa/index.html",
+    "display": "fullscreen",
+    "theme_color": "#B12A34",
+    "background_color": "#B12A34"
+}</pre>
+
+<p>大部分字段无需解释，但是让我们分解一下文档并且详细解释这些字段：</p>
+
+<ul>
+ <li><code>name</code>: 网站应用的全名。</li>
+ <li><code>short_name</code>: 显示在主屏上的短名。</li>
+ <li><code>description</code>: 一两句话解释你的应用的用途。</li>
+ <li><code>icons</code>: 一串图标信息 — 源URL，大小和类型。确保包含一些图标，这样有一个最合适用户设备的图标可以被选中。</li>
+ <li><code>start_url</code>: 启动应用的index文档。</li>
+ <li><code>display</code>: 应用的显示方式；可以是全屏，独立，最小UI或者浏览器。</li>
+ <li><code>theme_color</code>: UI的主颜色，这是操作系统使用的。</li>
+ <li><code>background_color</code>: 背景色，用于安装程序时和显示启动画面时。</li>
+</ul>
+
+<p>一份网页清单最少需要<code>name</code>和一个图标 (带有 <code>src</code>, <code>size</code> 和 <code>type</code>)。<code>description</code>, <code>short_name</code>, 和<code>start_url</code>最好要提供。还有在上述列表之外的字段你可以使用 — 请查看 <a href="/en-US/docs/Web/Manifest">网页应用清单参考</a>获得详细情况。</p>
+
+<h2 id="添加到主屏">添加到主屏</h2>
+
+<p>"添加到主屏" (或者英语短语a2hs) 是移动浏览器实现的一个特性，它利用网页清单中的信息来在设备主屏上显示应用图标和文字。应用必须满足上述必备条件才可以正常工作。</p>
+
+<p>当用户使用一个支持的移动浏览器访问一个PWA时，他应该显示一个横幅信息表示可以安装这个应用。</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15928/js13kpwa-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>在用户单击这个横幅后，安装横幅信息会显示，它是浏览器基于网页清单信息创建的，名字和图标可以在提示中看到。</p>
+
+<p><img alt="Install banner of js13kPWA." src="https://mdn.mozillademos.org/files/15927/js13kpwa-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>如果用户单击安装到主屏按钮，会显示这样应用的图标的样子，让用户确认是否安装这个应用。</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15926/js13kpwa-add.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>确认之后，应用就安装到主屏上了。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15834/js13kpwa-installed.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>之后，用户可以立刻启动并使用应用。注意，PWA有时（取决于浏览器和移动操作系统）会在图标右下角显示一个浏览器图片用于告诉用户这是一个网页应用。</p>
+
+<h3 id="启动画面">启动画面</h3>
+
+<p>在一些浏览器中，可以通过清单信息产生一个启动画面，当PWA启动时显示。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>图标、主题和背景色用于创建这个启动画面。</p>
+
+<h2 id="总结">总结</h2>
+
+<p>在本文中，我们学习了如何使用网页清单和安装到主屏特性让PWA可安装。</p>
+
+<p>为了获得添加到主屏的更多信息，请阅读<a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">添加到主屏指南</a>。 浏览器支持当前限于安卓火狐58+，移动Chrome和安卓Webview 31+, 安卓Opera32+, 但是这些限制在不久的将来会改善的。.</p>
+
+<p>现在让我们转移到PWA的最后一个困惑 — 通过推送通知再次启动（re-engagement）。</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</p>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p>