From 4eecb2a07047e024a8180d69b537795eb89c7657 Mon Sep 17 00:00:00 2001 From: Outvi V Date: Thu, 15 Apr 2021 13:38:39 +0800 Subject: feat: minor passage formattings --- .../progressive_web_apps/app_structure/index.html | 18 ++++---- .../installable_pwas/index.html | 14 +++---- .../offline_service_workers/index.html | 8 ++-- .../responsive/media_types/index.html | 48 +++++++++++----------- 4 files changed, 43 insertions(+), 45 deletions(-) (limited to 'files/zh-cn/web') diff --git a/files/zh-cn/web/progressive_web_apps/app_structure/index.html b/files/zh-cn/web/progressive_web_apps/app_structure/index.html index 5dd89fb30a..87c946d0b4 100644 --- a/files/zh-cn/web/progressive_web_apps/app_structure/index.html +++ b/files/zh-cn/web/progressive_web_apps/app_structure/index.html @@ -20,9 +20,9 @@ translation_of: Web/Progressive_web_apps/App_structure

您可以按自己喜欢的方式构建 PWA，但有些方式更合适。最流行的是“App Shell”概念，它完全按照上述方式混用 SSR 和 CSR；此外还遵循“离线优先”方法，这个我们将在后续文章中详细解释，也会在示例应用程序中使用。我们还会简要提及另一种涉及Streams API的新方法

-

App shell 概念

+

App Shell 概念

-

App shell 概念试图尽快加载最小用户界面，然后缓存它，以便在后续访问时可以离线使用，然后再加载应用程序的所有内容。这样，下次有人从设备访问应用程序时，UI 立即从缓存加载；如果缓存数据不可用的话，就从服务器请求新内容。

+

App Shell 概念试图尽快加载最小用户界面，然后缓存它，以便在后续访问时可以离线使用，然后再加载应用程序的所有内容。这样，下次有人从设备访问应用程序时，UI 立即从缓存加载；如果缓存数据不可用的话，就从服务器请求新内容。

这种结构的页面很快，给用户的感觉也很快：用户会立即看到内容而不是加载动画或空白页。如果网络连接不可用，它还允许离线访问网站。

@@ -30,7 +30,7 @@ translation_of: Web/Progressive_web_apps/App_structure

我为什么要用它？

-

这种架构允许网站从 PWA 功能中获益最多：它可以缓存 app shell 并以提升大量性能的方式管理动态内容。除了基本外壳之外，您还可以添加其他功能，例如添加到主屏幕或推送通知。即使用户的浏览器不支持这些功能，你也可以放心应用可以正常运行，这就是渐进增强的美妙之处。

+

这种架构允许网站从 PWA 功能中获益最多：它可以缓存 App Shell 并以提升大量性能的方式管理动态内容。除了基本外壳之外，您还可以添加其他功能，例如添加到主屏幕或推送通知。即使用户的浏览器不支持这些功能，你也可以放心应用可以正常运行，这就是渐进增强的美妙之处。

在不妥协 web 优势的前提下，网站感觉就像一个原生应用，交互及时、性能可靠。

@@ -172,11 +172,11 @@ button.addEventListener('click', function(e) {

service worker

-

最后我们来快速浏览一下 service worker 相关的文件 sw.js。它首先引入 game.js 这个文件：

+

最后我们来快速浏览一下 Service Worker 相关的文件 sw.js。它首先引入 game.js 这个文件：

self.importScripts('data/games.js');
-

接着，程序会对 app shell 和主体内容里面的数据创建一个缓存列表：

+

接着，程序会对 App Shell 和主体内容里面的数据创建一个缓存列表：

var cacheName = 'js13kPWA-v1';
 var appShellFiles = [
@@ -205,7 +205,7 @@ for(var i=0; i<games.length; i++) {
 }
 var contentToCache = appShellFiles.concat(gamesImages);
-

下面的代码用来配置 service worker，缓存上述列表的工作就发生在这里：

+

下面的代码用来配置 Service Worker，缓存上述列表的工作就发生在这里：

self.addEventListener('install', function(e) {
   console.log('[Service Worker] Install');
@@ -217,7 +217,7 @@ var contentToCache = appShellFiles.concat(gamesImages);
); }); -

最后，如果条件允许，service worker 将从缓存中请求 content 中所需的数据，从而提供离线应用功能：

+

最后，如果条件允许，Service Worker 将从缓存中请求内容所需的数据，从而提供离线应用功能：

self.addEventListener('fetch', function(e) {
   e.respondWith(
@@ -236,7 +236,7 @@ var contentToCache = appShellFiles.concat(gamesImages);

JavaScript 数据

-

项目中所用的游戏数据放置在 data 文件夹下面，以JavaScript对象的形式提供（games.js）：

+

项目中所用的游戏数据放置在 data 文件夹下面，以 JavaScript 对象的形式提供（games.js）：

var games = [
     {
@@ -270,6 +270,6 @@ var contentToCache = appShellFiles.concat(gamesImages);

下一步

-

下一篇文章中，我们会探讨更多的细节：service worker 如何帮助我们缓存 app shell 和内容，从而让我们实现离线功能。

+

下一篇文章中，我们会探讨更多的细节：Service Worker 如何帮助我们缓存 App Shell 和内容，从而让我们实现离线功能。

{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Progressive_web_apps/Offline_Service_workers", "Web/Progressive_web_apps")}}

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 5d811a91fc..7dd27bf167 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 @@ -14,7 +14,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs

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

-

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

+

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

要求

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

清单文件

+

清单文件 (Manifest)

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

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

-

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

+

js13kPWA 的 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 清单规范中显式指定的，所以这里我们使用这个扩展名。

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

@@ -83,7 +83,7 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs

添加到主屏

-

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

+

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

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

diff --git a/files/zh-cn/web/progressive_web_apps/offline_service_workers/index.html b/files/zh-cn/web/progressive_web_apps/offline_service_workers/index.html index ec7611613a..7b0a3f813f 100644 --- a/files/zh-cn/web/progressive_web_apps/offline_service_workers/index.html +++ b/files/zh-cn/web/progressive_web_apps/offline_service_workers/index.html @@ -53,9 +53,9 @@ translation_of: Web/Progressive_web_apps/Offline_Service_workers console.log('[Service Worker] Install'); }); -

在install的监听函数中, 我们可以初始化缓存并添加离线应用时所需的文件，js13kPWA 应用确实也是这么做的。

+

在 install 的监听函数中, 我们可以初始化缓存并添加离线应用时所需的文件，js13kPWA 应用确实也是这么做的。

-

首先，创建一个存储缓存名字的变量，app shell 所需的文件也被记录在一个数组上：

+

首先，创建一个存储缓存名字的变量，App Shell 所需的文件也被记录在一个数组上：

var cacheName = 'js13kPWA-v1';
 var appShellFiles = [
@@ -101,7 +101,7 @@ var contentToCache = appShellFiles.concat(gamesImages);

有两件事需要在这里解释一下：{{domxref("ExtendableEvent.waitUntil")}} 做了什么？{{domxref("Caches","caches")}} 对象又是什么东西？

-

Service Worker 会等到 waitUntil 里面的代码执行完毕之后才开始安装。它返回的是一个 Promise——因为安装过程可能需要一些时间，而我们必须等待它完成，所以这是必须的。

+

Service Worker 会等到 waitUntil 里面的代码执行完毕之后才开始安装。它返回的是一个 Promise——因为安装过程可能需要一些时间，而我们必须等待它完成。

caches 是一个特殊的 {{domxref("CacheStorage")}} 对象，它能在 Service Worker 指定的范围内提供数据存储的能力（Service Worker 在注册时，第二个参数是选填的，可以被用来指定你想让 Service Worker 控制的内容的子目录，译者注）。因为 Web Storage 的执行是同步的（此处理解为 Web Storage 并不返回一个 Promise，译者注），在 Service Worker 中使用 Web Storage 将不会有效果，所以我们使用 Cache API 作为替代。

@@ -146,7 +146,7 @@ var contentToCache = appShellFiles.concat(gamesImages);

更新

-

还有一点需要考虑：当我们的应用有了一个新版本，并且它包含了一些可用的新资源时，我们应该如何去更新它的Service Worker？我们存放在缓存名称中的版本号是这个问题的关键：

+

还有一点需要考虑：当我们的应用有了一个新版本，并且它包含了一些可用的新资源时，我们应该如何去更新它的 Service Worker？我们存放在缓存名称中的版本号是这个问题的关键：

var cacheName = 'js13kPWA-v1';
diff --git a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html index 0887a22619..aed512780b 100644 --- a/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html +++ b/files/zh-cn/web/progressive_web_apps/responsive/media_types/index.html @@ -6,24 +6,24 @@ original_slug: Web/Guide/CSS/Getting_started/Media ---

{{CSSTutorialTOC}} {{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Tables", "表格")}}

-

本章节是 CSS入门教程 指南的第14章也是最后一部分。 这本指南主要描述了用来展示文档的CSS的属性及其值，本章节依旧着眼于这个目标，同时也会介绍CSS样式表的结构。

+

本章节是 CSS 入门教程指南的第 14 章也是最后一部分。本指南主要描述了用来展示文档的 CSS 的属性及其值，本章节依旧着眼于这个目标，同时也会介绍 CSS 样式表的结构。

-

信息: Media

+

为不同媒介提供的样式信息

-

CSS的作用是将网页文档以更友好的展现方式呈现给用户。

+

CSS 的作用是将网页文档以更友好的展现方式呈现给用户。

-

例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法。

+

例如，假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS 就能根据媒介种类控制展示文档的方法。

-

CSS通过使用{{CSSXref("@media")}} 的格式来对特定的媒介指定适配规则。

+

CSS通过使用 {{CSSXref("@media")}} 来对特定的媒介指定适配规则。

示例

我们的站点上有一个导航区域允许用户浏览。

-

在标签语言中，导航区域父元素的id是 nav-area.(在 {{HTMLVersionInline(5)}}中, 可以使用 {{HTMLElement("nav")}} 元素代替带有id属性的 {{HTMLElement("div")}}。)

+

在标签语言中，导航区域父元素的 id 是 nav-area。（在 {{HTMLVersionInline(5)}}, 可以使用 {{HTMLElement("nav")}} 元素代替带有 id 属性的 {{HTMLElement("div")}}。）

-

为了网页在被打印的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的:

+

为了在打印网页的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的：

@media print {
   #nav-area {display: none;}
@@ -57,37 +57,37 @@ original_slug: Web/Guide/CSS/Getting_started/Media
 

 
更多

 
-
一些其他指定媒介类型的规则。

+
还有其它一些对 CSS 规则指定适用媒介类型的方式。

 
-
类型可以在样式表通过link方式加到文档时被指定，这是文档的标签语言允许的 。例如，在HTML中，你可以通过在 LINK 标签上添加media属性来指定媒介类型。

+
有些标签语言可能允许在链接引用样式表时指定媒介类型。例如，在 HTML 中，你可以通过在 link 标签上添加 media 属性来指定媒介类型。

 
-
在CSS中，你可以在样式表开头使用 {{CSSXref("@import")}} 一个url来引入另外的样式表，同时指定其媒介类型。

+
在 CSS 中，你可以在样式表开头 {{CSSXref("@import")}} 一个 url 来引入另外的样式表，同时指定其媒介类型。

 
 
根据这些知识，你可以区分在不同的文件中定义不同媒介的样式规则。有时这也是结构化样式表的好方法。

 
-
想获取媒介类型更多细节，请参考CSS规范中的 Media 部分。

+
想获取媒介类型更多细节，请参考 CSS 规范中的 Media 部分。

 
 
接下来将介绍更多 {{cssxref("display")}} 属性的例子: XML data.

 

 
 
打印

 
-
CSS有一些特性能够支持打印和分页媒体。

+
CSS 有一些支持打印和分页媒体的特性。

 
-
 {{cssxref("@page")}} 规则能够设置页间距，对于双面打印，还可以分开设置 @page:left 和 @page:right。

+
 {{cssxref("@page")}} 规则能够设置页间距。对于双面打印，还可以分开设置 @page:left 和 @page:right。

 
-
对于打印媒介，可以使用适当的长度单位，像是英寸(in)、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用em来配合字体大小和百分比。

+
对于打印媒介，可以使用适当的长度单位，像是英寸（in）、点（1pt = 1/72 inch）、厘米（cm）还有毫米（mm）。这等同于使用 em 来配合字体大小和百分比。

 
 
可以通过使用 {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} 和 {{cssxref("page-break-inside")}} 属性来控制文档内容的分页边界。

 
 

 
示例

 
-
这个规则把四个方向的页边距都设置为1 inch:

+
这个规则把四个方向的页边距都设置为 1 inch：

 
 
@page {margin: 1in;} 

 
-
这个规则确保每个H1元素都从新的一页开始:

+
这个规则确保每个 H1 元素都从新的一页开始：

 
 
h1 {page-break-before: always;}
 

@@ -96,18 +96,16 @@ original_slug: Web/Guide/CSS/Getting_started/Media
 

 
更多细节

 
-
想获取更多细节，请参考CSS规范中的 Paged media 部分。

+
想获取更多细节，请参考 CSS 规范中的 Paged media 部分。

 
-
像CSS的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候Mozilla浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。

+
像 CSS 的其他特性一样，打印也依赖于你的浏览器及其设置。例如，在打印的时候 Mozilla 浏览器支持默认的间距，页眉和页脚。而当其他用户打印你的文档时，你无法预知他会使用的什么样的浏览器和设置，因此你也不能完全控制打印情况。

 

 
 
用户界面

 
-
CSS有一些特殊的属性能够支持设备的用户界面，像电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。

+
CSS 有一些特殊的属性能够支持设备的用户界面，例如电脑显示器。这使得文档的展示随着用户界面的情况而动态地变化。

 
-
并没有针对用户界面设备的特殊媒介类型。

-
-
下面有五种特殊的选择器:

+
下面有五种特殊的选择器：

 
 
@@ -117,7 +115,7 @@ original_slug: Web/Guide/CSS/Getting_started/Media
   
-   
+   
@@ -129,11 +127,11 @@ original_slug: Web/Guide/CSS/Getting_started/Media
   
-   
+   
-   
+   

  
   

    E{{cssxref(":hover")}}当鼠标悬浮任何E元素上当鼠标悬浮在此元素上
   

   

    E{{cssxref(":focus")}}

   

    E{{cssxref(":link")}}当元素超链接到一个url但是用户还没有访问过当元素超链接到一个 url 但是用户还没有访问过
   

   

    E{{cssxref(":visited")}}当元素超链接到一个url但是用户已经访问过当元素超链接到一个 url 但是用户已经访问过
   

  
 

-- 
cgit v1.2.3-54-g00ecf