From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/manifest/background_color/index.html | 76 ++++ files/zh-cn/web/manifest/index.html | 413 +++++++++++++++++++++ 2 files changed, 489 insertions(+) create mode 100644 files/zh-cn/web/manifest/background_color/index.html create mode 100644 files/zh-cn/web/manifest/index.html (limited to 'files/zh-cn/web/manifest') diff --git a/files/zh-cn/web/manifest/background_color/index.html b/files/zh-cn/web/manifest/background_color/index.html new file mode 100644 index 0000000000..7284af26aa --- /dev/null +++ b/files/zh-cn/web/manifest/background_color/index.html @@ -0,0 +1,76 @@ +--- +title: background_color +slug: Web/Manifest/background_color +translation_of: Web/Manifest/background_color +--- +
{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}
+ + + + + + + + + + + + +
+
+

wobuhuisuanmin

+
+ +
Type
+ 		String
MandatoryNo
+ +

被装载其样式表之前的 background_color 构件限定了用于应用页的占位符的背景颜色来显示。此值用于由用户代理来绘制一个快捷方式的背景颜色，当样式表加载之前清单是可用的。

+ +

（原文：The background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded. This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.）

+ +

因此，background_color 应于 {{cssxref("background-color")}}网站样式表中的CSS属性匹配，以在启动Web应用程序和加载网站内容之间进行平滑过渡。

+ +

（原文：Therefore background_color should match the {{cssxref("background-color")}} CSS property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.）

+ +
+

注意：该 background_color 构件仅用于在从网络或存储介质加载主样式表时改善用户体验。{{cssxref("background-color")}} 当渐进式Web应用程序样式表可用时，用户代理不会将其用作CSS属性。

+
+ +

实例

+ +
"background_color": "red"
+ +

规范

+ + + + + + + + + + + + + + + + + + +
规范状态注释反馈
+

{{SpecName('Manifest', '#background_color-member', 'background_color')}}

+ 		+

{{Spec2('Manifest')}}

+ 		+

初始定义

+ 		+

Web App Manifest Working Group drafts

+
+ +

浏览器兼容性

+ + + +

{{Compat("html.manifest.background_color")}}

diff --git a/files/zh-cn/web/manifest/index.html b/files/zh-cn/web/manifest/index.html new file mode 100644 index 0000000000..e60724183c --- /dev/null +++ b/files/zh-cn/web/manifest/index.html @@ -0,0 +1,413 @@ +--- +title: Web App Manifest +slug: Web/Manifest +tags: + - Manifest + - manifest.json + - web app manifest +translation_of: Web/Manifest +--- +

Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

+ +

Web应用程序清单是被称为渐进式Web应用程序(PWA)的Web技术集合的一部分, 它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能, 比如离线可用和接收推送通知。

+ + + +

Web应用程序清单部署在您的HTML页面中，使用在你的文件的头部的一个链接标记：

+ +
+
<link rel="manifest" href="/manifest.json">
+
+ +

manifest 范例 

+ +
{
+  "name": "HackerWeb",
+  "short_name": "HackerWeb",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A simply readable Hacker News app.",
+  "icons": [{
+    "src": "images/touch/homescreen48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen168.png",
+    "sizes": "168x168",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }],
+  "related_applications": [{
+    "platform": "web"
+  }, {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
+  }]
+}
+ +

成员

+ +

background_color

+ +

为web应用程序预定义的背景颜色。此值在应用程序样式表中可以再次声明。它主要用于在样式表加载之前，当加载manifest，浏览器可以用来绘制web应用程序的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。

+ +
"background_color": "red"
+ +
+

注意：background_color只是在web应用程序加载时提高用户体验，而当web应用程序的样式表可用时，不能替代作为背景颜色使用。

+
+ +

description

+ +

提供有关Web应用程序的一般描述。

+ +
"description": "The app that helps you find the best food in town!"
+ +

dir

+ +

指定名称、短名称和描述成员的主文本方向。与lang一起配置，可以帮助正确显示右到左文本。

+ +
"dir": "rtl",
+"lang": "ar",
+"short_name": "أنا من التطبيق!"
+ +

可选值:

+ + + +
+

注意：当省略时，默认为auto

+
+ +

display

+ +

定义开发人员对Web应用程序的首选显示模式。

+ +
"display": "standalone"
+ +

有效值:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
显示模式描述后备显示模式
fullscreen全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏{{Glossary("chrome")}}。standalone
standalone让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的UI元素，但是可以包括其他UI元素，例如状态栏。minimal-ui
minimal-ui该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。 样式因浏览器而异。browser
browser该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。 这是默认的设置。(None)
+ +
+

Note: 您可以使用显示模式媒体功能，根据显示模式选择性地将CSS应用到您的应用程序。 这可用于在从URL启动网站和从桌面图标启动网站之间提供一致的用户体验。

+
+ +

icons

+ +

指定可在各种环境中用作应用程序图标的图像对象数组。 例如，它们可以用来在其他应用程序列表中表示Web应用程序，或者将Web应用程序与OS的任务切换器和/或系统偏好集成在一起。

+ +
"icons": [
+  {
+    "src": "icon/lowres.webp",
+    "sizes": "48x48",
+    "type": "image/webp"
+  },
+  {
+    "src": "icon/lowres",
+    "sizes": "48x48"
+  },
+  {
+    "src": "icon/hd_hi.ico",
+    "sizes": "72x72 96x96 128x128 256x256"
+  },
+  {
+    "src": "icon/hd_hi.svg",
+    "sizes": "72x72"
+  }
+]
+ +

图像对象可能包含以下值：

+ + + + + + + + + + + + + + + + + + + + + + +
字段描述
sizes包含空格分隔的图像尺寸的字符串。
src图像文件的路径。 如果src是一个相对URL，则基本URL将是manifest的URL。
type提示图像的媒体类型。此字段的目的是允许用户代理快速忽略不支持的媒体类型的图像。
+ +

lang

+ +

指定name和short_name成员中的值的主要语言。 该值是包含单个语言标记的字符串。

+ +
"lang": "en-US"
+ +

name

+ +

为应用程序提供一个人类可读的名称，例如在其他应用程序的列表中或作为图标的标签显示给用户。

+ +
"name": "Google I/O 2017"
+ +

orientation

+ +

定义所有Web应用程序顶级的默认方向 {{Glossary("Browsing context", "browsing contexts")}}.

+ +
​​"orientation": "portrait-primary"
+ +

方向可以是以下值之一：

+ + + + + +

指定一个布尔值，提示用户代理向用户指示指定的相关应用程序（请参见下文）可用，并建议通过Web应用程序。 只有当相关的本地应用程序确实提供了某些Web应用程序无法做到的事情时，才应该使用它。

+ +
"prefer_related_applications": false
+ +
+

Note: 如果省略,默认设置为 false.

+
+ + + +

指定一个“应用程序对象”数组，代表可由底层平台安装或可访问的本机应用程序 - 例如可通过Google Play Store获取的原生Android应用程序。 这样的应用程序旨在替代提供类似或等同功能的Web应用程序 - 就像Web应用程序的本机应用程序版本一样。

+ +
"related_applications": [
+  {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
+    "id": "com.example.app1"
+  }, {
+    "platform": "itunes",
+    "url": "https://itunes.apple.com/app/example-app1/id123456789"
+  }]
+ +

应用程序对象可能包含以下值：

+ + + + + + + + + + + + + + + + + + + + + + +
MemberDescription
platform可以找到应用程序的平台。
url可以找到应用程序的URL。
id用于表示指定平台上的应用程序的ID。
+ +

scope

+ +

定义此Web应用程序的应用程序上下文的导航范围。 这基本上限制了manifest可以查看的网页。 如果用户在范围之外浏览应用程序，则返回到正常的网页。

+ +

如果scope是相对URL，则基本URL将是manifest的URL。

+ +
"scope": "/myapp/"
+ +

short_name

+ +

为应用程序提供简短易读的名称。 这是为了在没有足够空间显示Web应用程序的全名时使用。

+ +
"short_name": "I/O 2017"
+
+ +

start_url

+ +

指定用户从设备启动应用程序时加载的URL。 如果以相对URL的形式给出，则基本URL将是manifest的URL。

+ +
"start_url": "./?utm_source=web_app_manifest"
+ +

theme_color

+ +

定义应用程序的默认主题颜色。 这有时会影响操作系统显示应用程序的方式（例如，在Android的任务切换器上，主题颜色包围应用程序）。

+ +
"theme_color": "aliceblue"
+ +

初始屏幕

+ +

在Chrome 47及更高版本中，从主屏幕启动的Web应用程序将显示启动画面。 这个启动画面是使用Web应用程序清单中的属性自动生成的，具体来说就是：name，background_color以及icons 中距设备最近128dpi的图标。

+ +

Mime类型

+ +

Manifests 应使用 application/manifest+json MIME 类型. 但是, 你不必非得这样做.

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Manifest')}}{{Spec2('Manifest')}}Initial definition.
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatUnknown}}{{CompatUnknown}}32.0{{CompatUnknown}}{{CompatChrome(39.0)}}
background_color{{CompatNo}}{{CompatChrome(46.0)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatChrome(46.0)}} [1]
theme_color{{CompatNo}}{{CompatChrome(46.0)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome(46.0)}} [1]
icons, name, short_name, and theme_color used for Add to home screen feature.{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(53)}}[2]{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Does not support lang or scope.

+ +

[2] The icons, name, short_name, and theme_color fields of the Web App Manifest (if present) can now be as the source of the homescreen/apps window icons, apps window title, homescreen icon title, and apps window color (respectively) for "Add to home screen" (Firefox Mobile only; see {{bug(1234558)}}).

-- cgit v1.2.3-54-g00ecf