From 686269fd09a8f61e70c750fa3fb5694ffa3b833c Mon Sep 17 00:00:00 2001 From: Outvi V Date: Thu, 15 Apr 2021 13:37:40 +0800 Subject: feat: improve translation on pwa/a2hs --- .../add_to_home_screen/index.html | 122 ++++++++++----------- 1 file changed, 61 insertions(+), 61 deletions(-) (limited to 'files') 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/添加到主屏幕 --- -

添加到主屏幕（A2HS）添加到主屏幕（简称A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松便捷地将自己喜欢的Web应用程序（或网站）的快捷方式添加到主屏幕中，以便他们随后可以通过单点访问它。本指南说明了A2HS的使用方式，以及作为开发人员要使您的用户利用A2HS所需做的事情。

+

添加到主屏幕（Add to Home Screen，简称 A2HS）是现代智能手机浏览器中的一项功能，使开发人员可以轻松便捷地将自己喜欢的 Web 应用程序（或网站）的快捷方式添加到主屏幕中，以便用户随后可以通过单击访问它。本指南说明了 A2HS 的使用方式，以及作为开发人员为使用户能利用 A2HS 所需做的事情。

-

为什么选择A2HS？

+

为什么选择 A2HS？

-

A2HS被认为是渐进式Web应用程序哲学的一部分—为Web应用程序提供与原生应用程序相同的用户体验优势，因此它们可以在当今的生态系统战争中竞争。这部分是通过访问主屏幕上的应用程序图标来访问应用程序，然后将其整齐地显示在自己的窗口中的简单手势。A2HS使这成为可能。

+

A2HS被认为是渐进式 Web 应用程序哲学的一部分——为 Web 应用程序提供与原生应用程序相同的用户体验优势，因此它们可以在当今的生态系统战争中竞争。这部分是通过访问主屏幕上的应用程序图标来访问应用程序，然后将其整齐地显示在自己的窗口中的简单手势。A2HS使这成为可能。

-

哪些浏览器支持A2HS？

+

哪些浏览器支持 A2HS？

-

Mobile Chrome / Android Webview 从31版开始支持A2HS，Opera for Android从32版开始支持，Firefox for Android从58版开始支持。

+

Mobile Chrome / Android Webview 从 31 版开始支持 A2HS，Opera for Android 从 32 版开始支持，Firefox for Android 从 58 版 开始支持。

如何使用？

-

我们已经编写了一个非常简单的示例网站（观看我们的在线演示，并查看源代码)，该网站虽然功能不多，但是开发时使用了必要的代码，也可以将其添加到主屏幕中，并且service worker使其可以脱机使用。这个示例展示了一系列的狐狸图片。

+

我们已经编写了一个非常简单的示例网站（观看我们的在线演示，并查看源代码），该网站虽然功能不多，但是实现 A2HS 所必须的代码都有包含，Service Worker 也使其可以脱机使用。这个示例展示了一系列的狐狸图片。

-

如果您有适用于Android的Firefox，使用它导航到我们的示例：https://mdn.github.io/pwa-examples/a2hs/。你将会看到狐狸图片，但更重要的是，你将会看到一个带有加号（+）的“主页”图标—这是为具有必要功能的任何站点显示的“添加到主屏幕”图标。

+

如果您有适用于 Android 的 Firefox，使用它打开我们的示例：https://mdn.github.io/pwa-examples/a2hs/。你将会看到狐狸图片，但更重要的是，你将会看到一个带有加号（+）的“主页”图标——这是为具有必要功能的任何站点显示的“添加到主屏幕”图标。

-

+

地址栏的“添加到主屏幕”图标

-

点击此按钮将显示一个确认横幅—按下大“+ 添加到主屏幕”按钮即可完成操作，将应用添加到主屏幕。（注意：在Android 8及更高版本中，将首先显示系统级的“添加到主屏幕”权限对话框。）

+

点击此按钮将显示一个确认横幅，按下大大的“添加到主屏幕”按钮即可将应用添加到主屏幕。（注意：在 Android 8 及更高版本中，将首先显示系统级的“添加到主屏幕”权限对话框。）

-

+

确认横幅

-

如果您可以使用Mobile Chrome，则体验会略有不同；加载我们的网站后，您会看到一个弹出安装横幅，询问您是否要将此应用添加到主屏幕。

+

使用 Mobile Chrome 的体验则略有不同；加载我们的网站后，您会看到一个弹出安装横幅，询问您是否要将此应用添加到主屏幕。

-

+

Mobile Chrome 上的 A2HS 提示

-

注意：您可以在“Web App安装横幅”一文中找到有关Chrome安装横幅的更多信息。

+

注意：您可以在“Web App安装横幅”一文中找到有关 Chrome 安装横幅的更多信息。

-

如果您选择不将其添加到主屏幕，则可以稍后使用Chrome主菜单中的添加到主屏幕图标添加。

+

如果您选择不将其添加到主屏幕，则可以稍后使用 Chrome 主菜单中的添加到主屏幕图标添加。

无论使用哪种浏览器，当您选择将应用程序添加到主屏幕时，您都会看到它与短标题一起出现，就像原生应用程序一样。

-

+

桌面上的 PWA 图标

点按此图标可以将其打开，但是作为全屏应用程序，您将不再看到其周围的浏览器用户界面。

-

如何使应用程序支持A2HS？

+

如何使应用程序支持 A2HS？

要将您的应用添加到主屏幕，它需要满足以下条件：

Manifest

-

web manifest 以标准JSON格式编写，应放置在应用程序目录中的某个位置（最好是在根目录中），名称为somefilename.webmanifest(我们选择 manifest.webmanifest)。它包含多个字段，这些字段定义有关Web应用程序及其行为的某些信息。

+

Web manifest 以标准 JSON 格式编写，应放置在应用程序目录中的某个位置（最好是在根目录中），名称为 somefilename.webmanifest（这里我们将其命名为 manifest.webmanifest）。它包含多个字段，这些字段定义有关 Web 应用程序及其行为的某些信息。

-

注意：.webmanifest扩展名是在规范的“媒体类型注册”部分中指定的，但通常浏览器将支持带有其他适当扩展名的清单，例如：.json。

+

注意：.webmanifest 扩展名是在规范的“媒体类型注册”部分中指定的，但通常浏览器也支持带有其他适当扩展名的清单，例如 .json。

-

A2HS所需的字段如下：

+

A2HS 所需的字段如下：

-

我们的示例应用程序的manifest如下所示：

+

我们的示例应用程序的 manifest 如下所示：

{
   "background_color": "purple",
@@ -98,37 +98,37 @@ original_slug: Web/Progressive_web_apps/添加到主屏幕
 
 
合适的图标

 
-
如以上manifest所示，我们包括一个192 x 192像素的图标，供我们的应用使用。您可以根据需要添加更多尺寸；Android将为每个不同的用例选择最合适的尺寸。您还可以决定添加不同类型的图标，以便设备可以使用他们能够使用的最佳图标（例如，Chrome已经支持WebP格式）.

+
如以上 manifest 所示，我们包括一个 192 x 192 像素的图标，供我们的应用使用。您可以根据需要添加更多尺寸；Android 将为每个不同的用例选择最合适的尺寸。您还可以决定添加不同类型的图标，以便设备可以使用他们能够使用的最佳图标（例如，Chrome 已经支持 WebP 格式）。

 
-
请注意，每个图标对象中的 type 成员都指定了该图标的mimetype，因此浏览器可以快速读取该图标的类型，然后将其忽略，并在不支持该图标时采用其他图标。

+
请注意，每个图标对象中的 type 成员都指定了该图标的 MIME 类型，因此浏览器可以快速读取该图标的类型，并在不支持此类型时将其忽略并采用其他图标。

 
-
在设计图标方面，您应该遵循与任何Android图标相同的最佳做法（请参阅Android图标设计指南）。

+
在设计图标方面，您应该遵循与任何 Android 图标相同的最佳做法（请参阅 Android 图标设计指南）。

 
-
将HTML链接到manifest

+
将 HTML 链接到 manifest

 
-
要完成manifest的设置，您需要从应用程序主页的 HTML 中引用它：

+
要完成 manifest 的设置，您需要从应用程序主页的 HTML 中引用它：

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

 
-
一旦支持 manifest，支持 A2HS 的浏览器就会知道在哪里查找它。

+
一旦有了 manifest 声明，支持 A2HS 的浏览器就会知道在哪里查找它。

 
-
A2HS没有给你什么？

+
A2HS 不提供什么？

 
-
请记住，将应用程序添加到主屏幕时，它只会使该应用程序易于访问—不会将应用程序的资产和数据下载到您的设备上，也不会使该应用程序脱机使用或类似的操作。 为了使你的应用离线运行，你必须使用Service Worker API来离线存储资源，如果需要，还可以使用 Web storage 或 IndexedDB 来存储其数据。

+
请记住，将应用程序添加到主屏幕时，它只会使该应用程序易于访问，而不会将应用程序的资料和数据下载到您的设备上，也不会使该应用程序脱机使用或类似的操作。为了使应用离线运行，你必须使用 Service Worker API 来离线存储资源，如果需要，还可以使用 Web Storage 或 IndexedDB 来存储其数据。

 
 
在示例应用程序中，我们仅使用了一个service worker来存储所有必需的文件。service worker使用index.js 文件中的最终的代码块在网站上注册。然后，我们使用 Cache API 缓存网站的所有资产，并使用 sw.js 文件中的代码从缓存而不是网络中为它们提供服务。

 
-
桌面上的A2HS

+
桌面上的_A2HS

 
-
虽然最初旨在改善移动操作系统上的用户体验，但人们也提出了使PWA也可以安装在桌面平台上的趋势。

+
虽然 PWA 最初旨在改善移动操作系统上的用户体验，但也有人推进在桌面端安装 PWA 的进程。

 
 

-
注意：在撰写本文时，仅在较新版本的Chrome（在Windows中默认情况下，在macOS上的＃enable-desktop-pwas标志开启后）中支持以下功能。

+
注意：在撰写本文时，仅在较新版本的 Chrome 支持以下功能（在 Windows 上默认支持，在 macOS 则需开启 #enable-desktop-pwas 标志）。

 

 
 
添加安装按钮

 
-
为了使PWA可在桌面上安装，我们首先在文档中添加了一个按钮，以允许用户进行安装—桌面应用程序不会自动提供此按钮，并且需要通过用户手势来触发安装：

+
为了使 PWA 可在桌面上安装，我们首先在文档中添加了一个按钮，以允许用户进行安装—桌面应用程序不会自动提供此按钮，并且需要通过用户手势来触发安装：

 
 
<button class="add-button">Add to home screen</button>

 
@@ -140,30 +140,30 @@ original_slug: Web/Progressive_web_apps/添加到主屏幕
   left: 1px;
 }
-

用于处理安装的JavaScript

+

用于处理安装的_JavaScript

-

在index.js文件的底部，我们添加了一些JavaScript来处理安装。首先，我们声明一个deferredPrompt变量（我们将在后面解释），获得对安装按钮的引用，并初始设置为display: none：

+

在 index.js 文件的底部，我们添加了一些 JavaScript 代码来处理安装。首先，我们声明一个 deferredPrompt 变量（我们将在后面解释），获得对安装按钮的引用，并初始设置为 display: none：

let deferredPrompt;
 const addBtn = document.querySelector('.add-button');
 addBtn.style.display = 'none';
-

我们最初隐藏该按钮是因为PWA必须遵循A2HS标准才能安装。发生这种情况时，支持的浏览器将触发beforeinstallprompt事件。 然后，我们可以使用以下处理程序来处理安装：

+

我们最初隐藏该按钮是因为 PWA 必须满足 A2HS 标准才会安装。条件满足时，支持的浏览器将触发 beforeinstallprompt 事件。然后，我们可以使用以下处理程序来处理安装：

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';

所以我们在这里：

点击处理程序包含以下步骤：

-

So when the button is clicked, the install prompt appears.

+

于是，点击按钮后安装提示就会消失。

-

+

应用安装提示

-

如果用户选择安装，则将安装该应用程序（可作为独立的桌面应用程序使用），并且不再显示“安装”按钮（如果已经安装了该应用程序，则将不再触发onbeforeinstallprompt事件）。当您打开应用程序时，它将显示在其自己的窗口中：

+

如果用户选择安装，则将安装该应用程序（可作为独立的桌面应用程序使用），并且不再显示“安装”按钮（如果已经安装了该应用程序，则将不再触发 onbeforeinstallprompt 事件）。当您打开应用程序时，它将显示在其自己的窗口中：

-

+

安装后的应用界面

如果用户选择“取消”，则应用程序的状态将返回到单击按钮之前的状态。

-

注意：本部分的代码主要来自Pete LaPage的应用安装横幅/添加到主屏幕。

+

注意：本部分的代码主要来自 Pete LaPage 的应用安装横幅/添加到主屏幕。

其他

-- cgit v1.2.3-54-g00ecf