feat: proofread app_structure.html

1 files changed, 40 insertions, 39 deletions

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 2ffb7591e0..16b028e52b 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
@@ -5,66 +5,66 @@ translation_of: Web/Progressive_web_apps/App_structure
 ---
 <div>{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Progressive_web_apps/Offline_Service_workers", "Web/Progressive_web_apps")}}</div>
 
-<p class="summary">现在，我们已经知道了 PWAs 背后的原理， 让我们来看一个推荐的 PWA 结构，这来自一个真实的应用 。我们从分析 <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 这个应用开始：为什么它要这样构建？这样做有什么好处？</p>
+<p class="summary">现在，我们已经知道了 PWA 背后的原理， 让我们来看一个推荐的 PWA 结构，这个案例来自一个真实的应用。我们从分析 <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 这个应用开始：为什么它要这样构建？这样做又有什么好处？</p>
 
 <h2 id="应用架构">应用架构</h2>
 
 <p>渲染网站主要有两种方法 - 在服务器上或在客户端上。它们都有其优点和缺点，你可以适当地混合使用这两种方法</p>
 
 <ul>
- <li>服务器端渲染（SSR）意思是在服务器上渲染网页，因此首次加载会更快，但是在不同页面之间导航都需要下载新的HTML内容。 它在浏览器中运行良好，但它受到加载速度的制约，因而带来可以感知的性能延迟——加载一个页面就需要和服务器之间一次往返。（原文：but it suffers in terms of loading speed and therefore general perceived performance — loading every single page requires a new round trip to the server.）</li>
+ <li>服务器端渲染（SSR）的意思是在服务器上渲染网页，因此首次加载会更快，但是在不同页面之间导航都需要下载新的HTML内容。它的跨浏览器兼容性良好，但代价是页间加载时间延长，也就是总体感知上的性能降低：每加载一个页面，都需要一个服务器请求往返的时间。</li>
  <li>客户端渲染（CSR）允许在导航到不同页面时几乎立即在浏览器中更新网站，但在开始时需要更多的初始下载和客户端上的额外渲染。 首次访问时网站速度较慢，但后续访问速度要快得多。</li>
 </ul>
 
-<p>将SSR与CSR混合可以获得最佳结果 - 您可以在服务器上渲染网站，缓存其内容，然后在客户端需要时更新渲染。 由于SSR，第一页加载很快，并且页面之间的导航是平滑的，因为客户端可以仅使用已更改的部分重新渲染页面。</p>
+<p>将 SSR 与 CSR 混用可以获得最佳效果：您可以在服务器上渲染网站，缓存其内容，然后在客户端需要时更新渲染。因为使用了 SSR，第一页加载很快；因为客户端可以仅使用已更改的部分重新渲染页面，所以页面之间的导航也是平滑的。</p>
 
-<p>PWA可以使用您喜欢的任何方法构建，但有些方法会更适合。最流行的方法是“app shell”概念，它完全按照上述方式混合SSR和CSR，此外还遵循“离线优先”方法，我们将在后续文章中详细解释并在我们的示例应用程序中使用。还有一种涉及<a href="/en-US/docs/Web/API/Streams_API">Streams API</a>的新方法，我们将简要提及。</p>
+<p>您可以按自己喜欢的方式构建 PWA，但有些方式更合适。最流行的是“App Shell”概念，它完全按照上述方式混用 SSR 和 CSR；此外还遵循“离线优先”方法，这个我们将在后续文章中详细解释，也会在示例应用程序中使用。我们还会简要提及另一种涉及<a href="/en-US/docs/Web/API/Streams_API">Streams API</a>的新方法</p>
 
-<h2 id="App_shell（可以理解为程序的外壳）">App shell（可以理解为程序的外壳）</h2>
+<h2 id="App_shell_概念">App shell 概念</h2>
 
-<p>App shell意图尽快加载最小的用户界面，然后缓存它，以便在后续访问时可以离线使用，然后加载应用程序的所有内容。这样，下次有人从设备访问应用程序时，UI立即从缓存加载，并从服务器请求新内容（如果它已在缓存中不可用）。</p>
+<p>App shell 概念试图尽快加载最小用户界面，然后缓存它，以便在后续访问时可以离线使用，然后再加载应用程序的所有内容。这样，下次有人从设备访问应用程序时，UI 立即从缓存加载；如果缓存数据不可用的话，就从服务器请求新内容。</p>
 
-<p>这种结构很快，并且当用户立即看到内容而不是加载动画或空白页时也感觉很快。如果网络连接不可用，它还允许离线访问网站。</p>
+<p>这种结构的页面很快，给用户的感觉也很快：用户会立即看到内容而不是加载动画或空白页。如果网络连接不可用，它还允许离线访问网站。</p>
 
-<p>我们可以通过<a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>控制从服务器请求的内容以及从缓存中检索的内容，这将在下一篇文章中详细解释 - 现在让我们关注结构本身。</p>
+<p>我们可以通过 <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> 控制从服务器请求的内容以及从缓存中检索的内容，这将在下一篇文章中详细解释。现在让我们关注这个结构本身。</p>
 
 <h3 id="我为什么要用它？">我为什么要用它？</h3>
 
-<p><span class="tlid-translation translation" lang="zh-CN"><span class="alt-edited">这种架构允许网站从所有 PWA 功能中获益最多 - 它可以缓存应用</span><span title=""> app shell</span><span class="alt-edited"> 并以极大地提高性能的方式管理动态内容。 除了基本 shell 之外，您还可以添加其他功能，例如</span></span><a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">添加到主屏幕</a><span class="tlid-translation translation" lang="zh-CN"><span class="alt-edited">或</span></span><a href="/en-US/docs/Web/API/Push_API">推送通知</a><span class="tlid-translation translation" lang="zh-CN"><span class="alt-edited">，你可以放心如果用户的浏览器不支持应用程序仍然可以正常工作 - 这是渐进增强的美妙之处。</span></span></p>
+<p><span class="tlid-translation translation" lang="zh-CN"><span class="alt-edited">这种架构允许网站从 PWA 功能中获益最多：它可以缓存</span><span title=""> app shell</span><span class="alt-edited"> 并以性能提升极大的方式管理动态内容。 除了基本外壳之外，您还可以添加其他功能，例如</span></span><a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">添加到主屏幕</a><span class="tlid-translation translation" lang="zh-CN"><span class="alt-edited">或</span></span><a href="/en-US/docs/Web/API/Push_API">推送通知</a><span class="tlid-translation translation" lang="zh-CN"><span class="alt-edited">。即使用户的浏览器不支持这些功能，你也可以放心应用可以正常运行，这就是渐进增强的美妙之处。</span></span></p>
 
-<p><span class="tlid-translation translation" lang="zh-CN"><span title="">该网站感觉就像一个原生应用，具有即时交互和可靠的性能，同时保留了网络的所有好处。</span></span></p>
+<p><span class="tlid-translation translation" lang="zh-CN"><span title="">在不妥协 web 优势的前提下，网站感觉就像一个原生应用，交互及时、性能可靠。</span></span></p>
 
 <h3 id="可链接、渐进式和响应式">可链接、渐进式和响应式</h3>
 
-<p><span class="tlid-translation translation" lang="zh-CN"><span title="">记住 PWA 的优点并在设计应用程序时牢记这一点非常重要。</span> <span title="">app shell 方法允许网站：</span></span></p>
+<p><span class="tlid-translation translation" lang="zh-CN"><span title="">记住 PWA 的优点并在设计应用程序时牢记这一点非常重要。</span> <span title="">app shell 方案允许网站：</span></span></p>
 
 <ul>
- <li>可链接：即使它的行为类似于原生应用，它仍然是一个网站 - 您可以单击页面中的链接和当您想共享它时向某人发送URL。</li>
- <li>渐进式：从“好用的旧的基本网站”开始，逐步添加新功能，同时记住检测它们是否在浏览器中可用，并优雅地处理在没有支持的情况下出现的任何错误。例如，离线模式下 service workers 的帮助只是一个额外的特性使网站体验更好，但没有它网站应仍然是完全可用的。</li>
- <li>响应式：响应式网页设计也适用于渐进式网络应用程序，因为它们主要用于移动设备。 有许多不同的设备与浏览器 - 使您的网站适用于不同的屏幕尺寸，视口或像素密度，使用 <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a>，<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">CSS media queries</a>，<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>，和 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> 等技术是很重要的。</li>
+ <li>可链接（Linkable）：即使行为类似于原生应用，它仍然是一个网站：您可以点击页面内的链接，也可以通过发送 URL 的方式分享网站给别人。</li>
+ <li>渐进式（Progressive）：从“美好的旧式基础网站”开始，逐步添加新功能，在过程中检测其在浏览器上的可用性，并且优雅地处理不支持案例下发生的报错。举个例子，service workers 辅助下的离线模式只是提升网站体验的额外特性，但没有它网站也仍然完全可用。</li>
+ <li>响应式（Responsive）：响应式网页设计也适用于渐进式网络应用程序，因为它们都主要用于移动设备。拥有浏览器的设备太多太杂，所以确保网站在不同屏幕宽度、视口和像素密度上都可以访问就变得尤为重要。<a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a>、<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">CSS media queries</a>、<a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> 和 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> 等技术都可以助您实现这个目标。</li>
 </ul>
 
-<h2 id="不同的概念：流">不同的概念：流</h2>
+<h2 id="另一种概念：流">另一种概念：流</h2>
 
-<p>使用 <a href="/zh-CN/docs/Web/API/Streams_API">Streams API</a> 可以实现完全不同的服务器端或客户端渲染方法。在service worker帮助下，流可以极大改进我们解析内容的方式。 </p>
+<p>使用 <a href="/zh-CN/docs/Web/API/Streams_API">Streams API</a> 可以实现完全不同的服务器端或客户端渲染方法。在 service worker 的帮助下，它可以极大改进内容解析的方式。</p>
 
-<p>应用程序外壳模型要求在网站开始呈现之前可以使用所有资源。 它与HTML不同，因为浏览器实际上已经流式传输数据，您可以看到元素在网站上加载和呈现的时间。 但是，为了使JavaScript“可操作”，必须完整地下载它。</p>
+<p>App shell 概念要求在网站开始呈现之前所有资源就已可用。在 HTML 的下载过程中，用户可以从网站的加载和渲染过程看出资源的下载进度，但 JavaScript 必须完全下载完成才能运行。</p>
 
-<p>Streams API允许开发人员直接访问来自服务器的数据流 - 如果您想对数据执行操作（例如，向视频添加过滤器），则不再需要等待所有数据流 下载并转换为blob（或其他） - 您可以立即开始。 它提供细粒度控制 - 流可以启动，与另一个流链接，取消，检查错误等等。</p>
+<p>Streams API 则允许开发人员直接访问来自服务器的数据流。如果您想对数据执行操作（例如给视频添加过滤器），不再需要等待所有数据流下载并转换为 blob（或者别的），而是可以立即开始。它提供精细的粒度控制，将数据流启动、与另一个流链接、取消、查错等等。</p>
 
-<p>从理论上讲，流媒体是一种更好的模型，但它也更复杂，在撰写本文时（2018年3月），Streams API仍然是一项正在进行的工作，并且尚未在任何主流浏览器中完全可用。 当它可用时，它将是提供内容的最快方式 - 在性能方面的好处将是巨大的。</p>
+<p>从理论上讲，数据流是更好的模型，但也更复杂。在撰写本文时（2018年3月），Streams API 的制订仍在进行，并且在任何主流浏览器都不完全可用。当它可用时，它将是提供内容的最快方式，在性能上会有巨大的好处。</p>
 
-<p>有关工作示例和更多信息，请参阅 <a href="/zh-CN/docs/Web/API/Streams_API">Streams API documentation</a>.</p>
+<p>有关可用实例和更多信息，请参阅 <a href="/zh-CN/docs/Web/API/Streams_API">Streams API 文档</a>。</p>
 
 <h2 id="示例应用的结构">示例应用的结构</h2>
 
-<p><a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 这个网站的结构比较简单: 他包含一个HTML页面（index.heml），一个CSS样式表（style.css）,一些图片，js脚本和字体，它的文件结构如下所示：</p>
+<p><a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 这个网站的结构比较简单：它包含一个HTML页面（index.heml）、一个CSS样式表（style.css）、一些图片、JS 脚本和字体。它的文件结构如下所示：</p>
 
 <p><img alt="Folder structure of js13kPWA." src="https://mdn.mozillademos.org/files/15925/js13kpwa-directory.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 320px;"></p>
 
-<h3 id="HTML页面">HTML页面</h3>
+<h3 id="HTML_页面">HTML 页面</h3>
 
-<p>从HTML页面的角度，有一个id为content的标签，这个标签外部的所有内容，都是app shell（程序外壳）</p>
+<p>从 HTML 的角度，App Shell 就是 content 节之外的一切：</p>
 
 <pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
@@ -100,17 +100,18 @@ translation_of: Web/Progressive_web_apps/App_structure
 &lt;/body&gt;
 &lt;/html&gt;</pre>
 
-<p>head标签包含了一些基本的内容，例如标题，网页描述，CSS引用，web manifest文件，game.js和app.js，整个程序的初始化工作，会在app.js中完成。body标签中包括header，main和footer三个部分，header中包含了一张图片，main标签包含了网页标题、描述和一个区域，用来放置网页的主体，我们称之为content，footer内部则放置作者信息和链接（原文：copy and links）</p>
+<p>{{htmlelement("head")}} 一节包含一些基本信息，例如标题、描述、CSS 链接、描述文件、游戏内容的 JS 文件，以及 app.js，也就是我们这个 JavaScript 应用程序的入口点。{{htmlelement("body")}} 标签分为 {{htmlelement("header")}}（包含一张带链接的图片）、{{htmlelement("main")}} 页面主体（有标题、描述和放置内容的区域），以及 {{htmlelement("footer")}}（包含版权信息和链接）。</p>
+</p>
 
-<p>这个应用的唯一工作就是列出js13kGames 2017年比赛中的A-Frame（一个用来构建虚拟现实（VR）应用的网页开发框架，译者注） 项目列表。如你所见，这是一个很普通的单页应用，目的是用一个简单的东西来展示PWA的真实功能。</p>
+<p>这个应用的唯一功能就是列出 js13kGames 2017 年比赛中的A-Frame（一个用来构建虚拟现实（VR）应用的网页开发框架，译者注）项目列表。如你所见，这是一个很普通的单页应用，目的是用一个简单的东西来展示 PWA 的真实功能。</p>
 
-<h3 id="CSS部分">CSS部分</h3>
+<h3 id="CSS_部分">CSS 部分</h3>
 
-<p>CSS部分也是尽可能的简单：运用@font-face来加载和使用自定义字体以及给HTML元素提供简单的样式，总体的目标是让页面在移动端和桌面设备上运行（通过使用响应式布局）</p>
+<p>CSS 部分也是尽可能的简单：运用 {{cssxref("@font-face")}} 来加载和使用自定义字体，以及给 HTML 元素提供简单的样式，总体的目标是通过使用响应式布局，让页面在移动端和桌面设备上都漂亮。</p>
 
-<h3 id="主要的JavaScript代码">主要的JavaScript代码</h3>
+<h3 id="主角_app.js">主角 app.js</h3>
 
-<p>app.js所做的一些工作我们会在下一篇文章中详细分析，首先它用下面的模板生成了content中的内容</p>
+<p>我们会在下一篇文章中详细分析 app.js 所做的这些工作。首先它用下面的模板生成了 content 中的内容：</p>
 
 <pre class="brush: js">var template = "&lt;article&gt;\n\
     &lt;img src='data/img/SLUG.jpg' alt='NAME'&gt;\n\
@@ -137,13 +138,13 @@ for(var i=0; i&lt;games.length; i++) {
 };
 document.getElementById('content').innerHTML = content;</pre>
 
-<p>接着，它注册了一个service worker：</p>
+<p>接着，它注册了一个 service worker：</p>
 
 <pre class="brush: js">if('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
 };</pre>
 
-<p>下面这部分代码实现了一个功能：点击按钮时请求用户授权，用来向用户推送通知</p>
+<p>下面这部分代码实现了一个功能：点击按钮时请求用户授权，用来向用户推送通知。</p>
 
 <pre class="brush: js">var button = document.getElementById("notifications");
 button.addEventListener('click', function(e) {
@@ -154,7 +155,7 @@ button.addEventListener('click', function(e) {
     });
 });</pre>
 
-<p>最后这部分是创建通知的代码，它会随机展示游戏列表中的一个项目</p>
+<p>最后这部分是创建通知的代码，它会随机展示游戏列表中的一个项目：</p>
 
 <pre class="brush: js">function randomNotification() {
     var randomItem = Math.floor(Math.random()*games.length);
@@ -171,11 +172,11 @@ button.addEventListener('click', function(e) {
 
 <h3 id="service_worker">service worker</h3>
 
-<p>最后我们来快速浏览一下 service worker相关的文件sw.js，他首先映入game.js这个文件file:</p>
+<p>最后我们来快速浏览一下 service worker 相关的文件 sw.js。它首先引入 game.js 这个文件：</p>
 
 <pre class="brush: js">self.importScripts('data/games.js');</pre>
 
-<p>接着，程序会对app shell和主体内容（content）里面的数据创建一个缓存列表</p>
+<p>接着，程序会对 app shell 和主体内容里面的数据创建一个缓存列表：</p>
 
 <pre class="brush: js">var cacheName = 'js13kPWA-v1';
 var appShellFiles = [
@@ -204,7 +205,7 @@ for(var i=0; i&lt;games.length; i++) {
 }
 var contentToCache = appShellFiles.concat(gamesImages);</pre>
 
-<p>下面的代码用来配置service worker，缓存上述列表的工作就在这里发生</p>
+<p>下面的代码用来配置 service worker，缓存上述列表的工作就发生在这里：</p>
 
 <pre class="brush: js">self.addEventListener('install', function(e) {
   console.log('[Service Worker] Install');
@@ -216,7 +217,7 @@ var contentToCache = appShellFiles.concat(gamesImages);</pre>
   );
 });</pre>
 
-<p>最后，如果条件允许，service worker将从缓存中请求content中所需的数据，从而提供离线应用功能</p>
+<p>最后，如果条件允许，service worker 将从缓存中请求 content 中所需的数据，从而提供离线应用功能：</p>
 
 <pre class="brush: js">self.addEventListener('fetch', function(e) {
   e.respondWith(
@@ -235,7 +236,7 @@ var contentToCache = appShellFiles.concat(gamesImages);</pre>
 
 <h3 id="JavaScript_数据">JavaScript 数据</h3>
 
-<p>项目中所用的游戏数据放置在data文件夹下面，以JavaScript对象的形式提供(<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/data/games.js">games.js</a>):</p>
+<p>项目中所用的游戏数据放置在 data 文件夹下面，以JavaScript对象的形式提供（<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/data/games.js">games.js</a>）：</p>
 
 <pre class="brush: js">var games = [
     {
@@ -265,10 +266,10 @@ var contentToCache = appShellFiles.concat(gamesImages);</pre>
     }
 ];</pre>
 
-<p>每一个入口在data/img文件夹下面都有属于它自己的图片。这些就是我们的内容数据，我们通过js将这些数据加载到主体内容中</p>
+<p>每一个入口在 data/img 文件夹下面都有属于它自己的图片。这些就是我们的内容数据，我们通过 JS 将这些数据加载到主体内容中。</p>
 
 <h2 id="下一步">下一步</h2>
 
-<p>下一篇文章我们会探讨更多的细节，关于service worker.如何帮助我们缓存app shell 和内容，从而让我们实现离线功能</p>
+<p>下一篇文章中，我们会探讨更多的细节：service worker 如何帮助我们缓存 app shell 和内容，从而让我们实现离线功能。</p>
 
 <p>{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}</p>