From 7d67996891901cd893106e8191508b93c7e93e92 Mon Sep 17 00:00:00 2001 From: Outvi V Date: Mon, 22 Mar 2021 10:05:01 +0800 Subject: feat: proofread installable_pwas --- .../installable_pwas/index.html | 58 +++++++++++----------- 1 file changed, 29 insertions(+), 29 deletions(-) (limited to 'files/zh-cn') 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 index 149b2de4d7..5d811a91fc 100644 --- a/files/zh-cn/web/progressive_web_apps/installable_pwas/index.html +++ b/files/zh-cn/web/progressive_web_apps/installable_pwas/index.html @@ -12,36 +12,36 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs ---
{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}
-

在上一篇文章，我们了解了如何通过service worker让js13kPWA 离线工作，我们可以更进一步，让用户如同本地应用一样在支持的移动浏览器上安装web应用。这篇文章讲述如何通过网页清单和添加到主屏特性来做到这一点。

+

在上一篇文章，我们了解了如何通过 Service Worker 让 js13kPWA 离线工作。我们还可以更进一步，让用户如同本地应用一样在支持的移动浏览器上安装 web 应用。这篇文章讲述如何通过网页清单和添加到主屏特性来做到这一点。

-

这些技术允许应用从设备主屏直接启动，而不是启动浏览器键入URL。你的web应用可以作为一等公民和本地应用肩并肩。这样更容易访问，而且你可以指定应用全屏运行，没有浏览器界面，这样看起来更像一个本地应用。

+

这些技术允许应用从设备主屏直接启动，而不需启动浏览器键入 URL。你的 web 应用可以作为一等公民和本地应用肩并肩。这样更容易访问，你还可以指定应用全屏运行，没有浏览器界面，这样看起来更像一个本地应用。

要求

-

为了成为可安装网站，需要下列事情就位：

+

可安装网站需要满足以下条件：

清单文件

-

关键元素是一份网页清单，它通过JSON形式列举了网站的所有信息。

+

离线访问的关键在于一份网页清单，它通过 JSON 形式列举了网站的所有信息。

-

它通常位于网页应用的根目录。包含一些有用的信息，比如应用的标题，在一个移动OS上显示的代表该应用的不同大小的图标（例如，主屏图标）的路径，和用于加载或启动画面的背景颜色。这些信息是浏览器在安装web应用时和在主屏上显示应用需要的。

+

它通常位于网页应用的根目录，包含一些有用的信息，比如应用的标题、在移动设备操作系统上显示的代表该应用的不同大小的图标（例如主屏图标）的路径，和用于加载页或启动画面的背景颜色。浏览器需要这些信息来安装 web 应用并使其在主屏上显示。

-

js13kPWA web应用的js13kpwa.webmanifest文件包含在index.html文件的{{htmlelement("head")}}段，如下行所示：

+

js13kPWA web 应用的 js13kpwa.webmanifest 文件包含在 index.html 文件的 {{htmlelement("head")}} 段，如下行所示：

<link rel="manifest" href="js13kpwa.webmanifest">
-

注意：过去有一些常用的扩展名用于清单：manifest.webapp 在Firefox OS应用清单中很流行，许多人使用manifest.json作为网页清单因为内容是JSON格式的。但是，.webmanifest 扩展名是在W3C清单规范 中显示指定的，所以应该坚持这种做法。

+

注意：有一些常用的扩展名曾用于这类清单文件：manifest.webapp 在 Firefox OS 应用清单中很流行，而许多人使用 manifest.json 作为网页清单（因为内容是 JSON 格式的）。但是，.webmanifest 扩展名是在W3C 清单规范中显式指定的，所以这里我们使用这个扩展名。

-

文件的内容是这个样子的:

+

文件的内容是这个样子的：

{
     "name": "js13kGames Progressive Web App",
@@ -66,34 +66,34 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs
     "background_color": "#B12A34"
 }
-

大部分字段无需解释，但是让我们分解一下文档并且详细解释这些字段：

+

大部分字段无需解释，但是我们还是详细解释一下为妙：

-

一份网页清单最少需要name和一个图标 (带有 src, size 和 type)。description, short_name, 和start_url最好要提供。还有在上述列表之外的字段你可以使用 — 请查看 网页应用清单参考获得详细情况。

+

一份网页清单最少需要 name 和一个图标 (带有 src, size 和 type)。最好也要提供 description、short_name、和 start_url。除了上述字段，还有一些其它的字段供您使用，请查看网页应用清单参考获取详细信息。

添加到主屏

-

"添加到主屏" (或者英语短语a2hs) 是移动浏览器实现的一个特性，它利用网页清单中的信息来在设备主屏上显示应用图标和文字。应用必须满足上述必备条件才可以正常工作。

+

"添加到主屏" (或者英语短语 a2hs) 是移动浏览器实现的一个特性，它利用网页清单中的信息来在设备主屏上显示应用图标和文字。只有应用满足上述必备条件，这个功能才可以正常运作。

-

当用户使用一个支持的移动浏览器访问一个PWA时，他应该显示一个横幅信息表示可以安装这个应用。

+

当用户使用支持的移动浏览器访问 PWA 时，浏览器会显示一条横幅信息表示可以安装这个应用。

Add to Home screen popup of js13kPWA.

-

在用户单击这个横幅后，安装横幅信息会显示，它是浏览器基于网页清单信息创建的，名字和图标可以在提示中看到。

+

在用户单击这个横幅后，安装横幅信息会显示出来。它是浏览器基于网页清单信息创建的，名字和图标可以在提示中看到。

Install banner of js13kPWA.

-

如果用户单击安装到主屏按钮，会显示这样应用的图标的样子，让用户确认是否安装这个应用。

+

如果用户单击安装到主屏按钮，会显示应用图标的样子，让用户确认是否安装这个应用。

Add to Home screen popup of js13kPWA.

@@ -101,23 +101,23 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs

-

之后，用户可以立刻启动并使用应用。注意，PWA有时（取决于浏览器和移动操作系统）会在图标右下角显示一个浏览器图片用于告诉用户这是一个网页应用。

+

之后，用户可以立刻启动并使用应用。注意，在某些浏览器/移动操作系统中，PWA 会在图标右下角显示浏览器图标，告诉用户这是一个网页应用。

启动画面

-

在一些浏览器中，可以通过清单信息产生一个启动画面，当PWA启动时显示。

+

在一些浏览器中，可以通过清单信息产生一个启动画面，当 PWA 启动时显示。

-

图标、主题和背景色用于创建这个启动画面。

+

这个启动画面由给定的图标、主题和背景色生成。

总结

-

在本文中，我们学习了如何使用网页清单和安装到主屏特性让PWA可安装。

+

在本文中，我们学习了如何使用网页清单和安装到主屏特性让 PWA 可安装。

-

为了获得添加到主屏的更多信息，请阅读添加到主屏指南。 浏览器支持当前限于安卓火狐58+，移动Chrome和安卓Webview 31+, 安卓Opera32+, 但是这些限制在不久的将来会改善的。.

+

为了获得添加到主屏的更多信息，请阅读添加到主屏指南。 浏览器支持当前限于 Android 平台上的 Firefox 58+、Mobile Chrome、 Android Webview 31+ 以及 Android Opera 32+, 但是将来这些限制的影响会逐渐减小。

-

现在让我们转移到PWA的最后一个困惑 — 通过推送通知再次启动（re-engagement）。

+

现在让我们将目光转移到 PWA 的最后一个难点：通过推送通知再次启动（re-engagement）。

{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}

-- cgit v1.2.3-54-g00ecf