From cf8c1596d48f31ad71b87546d0758ca5c335a4d0 Mon Sep 17 00:00:00 2001 From: Outvi V Date: Sat, 20 Mar 2021 01:13:40 +0800 Subject: feat: proofread app_structure.html --- .../progressive_web_apps/app_structure/index.html | 79 +++++++++++----------- 1 file changed, 40 insertions(+), 39 deletions(-) (limited to 'files/zh-cn') 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 ---
{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Progressive_web_apps/Offline_Service_workers", "Web/Progressive_web_apps")}}
-

现在，我们已经知道了 PWAs 背后的原理， 让我们来看一个推荐的 PWA 结构，这来自一个真实的应用 。我们从分析 js13kPWA 这个应用开始：为什么它要这样构建？这样做有什么好处？

+

现在，我们已经知道了 PWA 背后的原理， 让我们来看一个推荐的 PWA 结构，这个案例来自一个真实的应用。我们从分析 js13kPWA 这个应用开始：为什么它要这样构建？这样做又有什么好处？

应用架构

渲染网站主要有两种方法 - 在服务器上或在客户端上。它们都有其优点和缺点，你可以适当地混合使用这两种方法

-

将SSR与CSR混合可以获得最佳结果 - 您可以在服务器上渲染网站，缓存其内容，然后在客户端需要时更新渲染。 由于SSR，第一页加载很快，并且页面之间的导航是平滑的，因为客户端可以仅使用已更改的部分重新渲染页面。

+

将 SSR 与 CSR 混用可以获得最佳效果：您可以在服务器上渲染网站，缓存其内容，然后在客户端需要时更新渲染。因为使用了 SSR，第一页加载很快；因为客户端可以仅使用已更改的部分重新渲染页面，所以页面之间的导航也是平滑的。

-

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

+

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

-

App shell（可以理解为程序的外壳）

+

App shell 概念

-

App shell意图尽快加载最小的用户界面，然后缓存它，以便在后续访问时可以离线使用，然后加载应用程序的所有内容。这样，下次有人从设备访问应用程序时，UI立即从缓存加载，并从服务器请求新内容（如果它已在缓存中不可用）。

+

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

-

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

+

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

-

我们可以通过service worker控制从服务器请求的内容以及从缓存中检索的内容，这将在下一篇文章中详细解释 - 现在让我们关注结构本身。

+

我们可以通过 service worker 控制从服务器请求的内容以及从缓存中检索的内容，这将在下一篇文章中详细解释。现在让我们关注这个结构本身。

我为什么要用它？

-

这种架构允许网站从所有 PWA 功能中获益最多 - 它可以缓存应用 app shell 并以极大地提高性能的方式管理动态内容。 除了基本 shell 之外，您还可以添加其他功能，例如添加到主屏幕或推送通知，你可以放心如果用户的浏览器不支持应用程序仍然可以正常工作 - 这是渐进增强的美妙之处。

+

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

-

该网站感觉就像一个原生应用，具有即时交互和可靠的性能，同时保留了网络的所有好处。

+

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

可链接、渐进式和响应式

-

记住 PWA 的优点并在设计应用程序时牢记这一点非常重要。 app shell 方法允许网站：

+

记住 PWA 的优点并在设计应用程序时牢记这一点非常重要。 app shell 方案允许网站：

-

不同的概念：流

+

另一种概念：流

-

使用 Streams API 可以实现完全不同的服务器端或客户端渲染方法。在service worker帮助下，流可以极大改进我们解析内容的方式。 

+

使用 Streams API 可以实现完全不同的服务器端或客户端渲染方法。在 service worker 的帮助下，它可以极大改进内容解析的方式。

-

应用程序外壳模型要求在网站开始呈现之前可以使用所有资源。 它与HTML不同，因为浏览器实际上已经流式传输数据，您可以看到元素在网站上加载和呈现的时间。 但是，为了使JavaScript“可操作”，必须完整地下载它。

+

App shell 概念要求在网站开始呈现之前所有资源就已可用。在 HTML 的下载过程中，用户可以从网站的加载和渲染过程看出资源的下载进度，但 JavaScript 必须完全下载完成才能运行。

-

Streams API允许开发人员直接访问来自服务器的数据流 - 如果您想对数据执行操作（例如，向视频添加过滤器），则不再需要等待所有数据流 下载并转换为blob（或其他） - 您可以立即开始。 它提供细粒度控制 - 流可以启动，与另一个流链接，取消，检查错误等等。

+

Streams API 则允许开发人员直接访问来自服务器的数据流。如果您想对数据执行操作（例如给视频添加过滤器），不再需要等待所有数据流下载并转换为 blob（或者别的），而是可以立即开始。它提供精细的粒度控制，将数据流启动、与另一个流链接、取消、查错等等。

-

从理论上讲，流媒体是一种更好的模型，但它也更复杂，在撰写本文时（2018年3月），Streams API仍然是一项正在进行的工作，并且尚未在任何主流浏览器中完全可用。 当它可用时，它将是提供内容的最快方式 - 在性能方面的好处将是巨大的。

+

从理论上讲，数据流是更好的模型，但也更复杂。在撰写本文时（2018年3月），Streams API 的制订仍在进行，并且在任何主流浏览器都不完全可用。当它可用时，它将是提供内容的最快方式，在性能上会有巨大的好处。

-

有关工作示例和更多信息，请参阅 Streams API documentation.

+

有关可用实例和更多信息，请参阅 Streams API 文档。

示例应用的结构

-

js13kPWA 这个网站的结构比较简单: 他包含一个HTML页面（index.heml），一个CSS样式表（style.css）,一些图片，js脚本和字体，它的文件结构如下所示：

+

js13kPWA 这个网站的结构比较简单：它包含一个HTML页面（index.heml）、一个CSS样式表（style.css）、一些图片、JS 脚本和字体。它的文件结构如下所示：

Folder structure of js13kPWA.

-

HTML页面

+

HTML 页面

-

从HTML页面的角度，有一个id为content的标签，这个标签外部的所有内容，都是app shell（程序外壳）

+

从 HTML 的角度，App Shell 就是 content 节之外的一切：

<!DOCTYPE html>
 <html lang="en">
@@ -100,17 +100,18 @@ translation_of: Web/Progressive_web_apps/App_structure
 </body>
 </html>
-

head标签包含了一些基本的内容，例如标题，网页描述，CSS引用，web manifest文件，game.js和app.js，整个程序的初始化工作，会在app.js中完成。body标签中包括header，main和footer三个部分，header中包含了一张图片，main标签包含了网页标题、描述和一个区域，用来放置网页的主体，我们称之为content，footer内部则放置作者信息和链接（原文：copy and links）

+

{{htmlelement("head")}} 一节包含一些基本信息，例如标题、描述、CSS 链接、描述文件、游戏内容的 JS 文件，以及 app.js，也就是我们这个 JavaScript 应用程序的入口点。{{htmlelement("body")}} 标签分为 {{htmlelement("header")}}（包含一张带链接的图片）、{{htmlelement("main")}} 页面主体（有标题、描述和放置内容的区域），以及 {{htmlelement("footer")}}（包含版权信息和链接）。

+

-

这个应用的唯一工作就是列出js13kGames 2017年比赛中的A-Frame（一个用来构建虚拟现实（VR）应用的网页开发框架，译者注） 项目列表。如你所见，这是一个很普通的单页应用，目的是用一个简单的东西来展示PWA的真实功能。

+

这个应用的唯一功能就是列出 js13kGames 2017 年比赛中的A-Frame（一个用来构建虚拟现实（VR）应用的网页开发框架，译者注）项目列表。如你所见，这是一个很普通的单页应用，目的是用一个简单的东西来展示 PWA 的真实功能。

-

CSS部分

+

CSS 部分

-

CSS部分也是尽可能的简单：运用@font-face来加载和使用自定义字体以及给HTML元素提供简单的样式，总体的目标是让页面在移动端和桌面设备上运行（通过使用响应式布局）

+

CSS 部分也是尽可能的简单：运用 {{cssxref("@font-face")}} 来加载和使用自定义字体，以及给 HTML 元素提供简单的样式，总体的目标是通过使用响应式布局，让页面在移动端和桌面设备上都漂亮。

-

主要的JavaScript代码

+

主角 app.js

-

app.js所做的一些工作我们会在下一篇文章中详细分析，首先它用下面的模板生成了content中的内容

+

我们会在下一篇文章中详细分析 app.js 所做的这些工作。首先它用下面的模板生成了 content 中的内容：

var template = "<article>\n\
     <img src='data/img/SLUG.jpg' alt='NAME'>\n\
@@ -137,13 +138,13 @@ for(var i=0; i<games.length; i++) {
 };
 document.getElementById('content').innerHTML = content;
-

接着，它注册了一个service worker：

+

接着，它注册了一个 service worker：

if('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
 };
-

下面这部分代码实现了一个功能：点击按钮时请求用户授权，用来向用户推送通知

+

下面这部分代码实现了一个功能：点击按钮时请求用户授权，用来向用户推送通知。

var button = document.getElementById("notifications");
 button.addEventListener('click', function(e) {
@@ -154,7 +155,7 @@ button.addEventListener('click', function(e) {
     });
 });
-

最后这部分是创建通知的代码，它会随机展示游戏列表中的一个项目

+

最后这部分是创建通知的代码，它会随机展示游戏列表中的一个项目：

function randomNotification() {
     var randomItem = Math.floor(Math.random()*games.length);
@@ -171,11 +172,11 @@ button.addEventListener('click', function(e) {
 
 
service worker

 
-
最后我们来快速浏览一下 service worker相关的文件sw.js，他首先映入game.js这个文件file:

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

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

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

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

 
 
var cacheName = 'js13kPWA-v1';
 var appShellFiles = [
@@ -204,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');
@@ -216,7 +217,7 @@ var contentToCache = appShellFiles.concat(gamesImages);

   );
 });
-

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

+

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

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

JavaScript 数据

-

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

+

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

var games = [
     {
@@ -265,10 +266,10 @@ var contentToCache = appShellFiles.concat(gamesImages);
} ]; -

每一个入口在data/img文件夹下面都有属于它自己的图片。这些就是我们的内容数据，我们通过js将这些数据加载到主体内容中

+

每一个入口在 data/img 文件夹下面都有属于它自己的图片。这些就是我们的内容数据，我们通过 JS 将这些数据加载到主体内容中。

下一步

-

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

+

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

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

-- cgit v1.2.3-54-g00ecf