feat: 翻译了一部分 Service Worker

2018-03-23 17:00:19 +08:00 · 2018-03-23 17:00:19 +08:00 · 1e4bddbe26
parent 494553a567
commit 1e4bddbe26
4 changed files with 280 additions and 12 deletions
--- a/aio/content/guide/service-worker-communications.md
+++ b/aio/content/guide/service-worker-communications.md
@ -1,7 +1,11 @@
 # Service worker communication

+# 与 Service Worker 通讯
+
 Importing `ServiceWorkerModule` into your `AppModule` doesn't just register the service worker, it also provides a few services you can use to interact with the service worker and control the caching of your app.

+把 `ServiceWorkerModule` 导入到你的 `AppModule` 中不仅会注册 Service Worker，还会提供一些服务，让你能和 Service Worker 通讯，并控制你的应用缓存。
+
 #### Prerequisites

 #### 前提条件
@ -12,50 +16,93 @@ A basic understanding of the following:

 * [Getting Started with Service Workers](guide/service-worker-getting-started).

+  [Service Worker 快速起步](guide/service-worker-getting-started).
+
 <hr />

 ## `SwUpdate` service

+## `SwUpdate` 服务
+
 The `SwUpdate` service gives you access to events that indicate when the service worker has discovered an available update for your app or when it has activated such an update&mdash;meaning it is now serving content from that update to your app.

+`SwUpdate` 服务让你能访问一些事件，这些事件会指出 Service Worker 何时发现了可用的更新或者一个更新何时可以被激活 —— 这意味着它现在可以通过更新后的版本提供服务了。
+
 The `SwUpdate` service supports four separate operations:

+`SwUpdate` 服务支持四个独立的操作：
+
 * Getting notified of *available* updates. These are new versions of the app to be loaded if the page is refreshed.

+  获取出现*可用*更新的通知。如果要刷新页面，这些就是可加载的新版本。
+
 * Getting notified of update *activation*. This is when the service worker starts serving a new version of the app immediately.

+  获取更新*被激活*的通知。这时候 Service Worker 就可以立即使用这些新版本提供服务了。
+
 * Asking the service worker to check the server for new updates.

+  要求 Service Worker 向服务器查询是否有新版本。
+
 * Asking the service worker to activate the latest version of the app for the current tab.

+  要求 Service Worker 为当前页面激活该应用的最新版本。
+
 ### Available and activated updates

+### 有可用更新及已激活更新
+
 The two update events, `available` and `activated`, are `Observable` properties of `SwUpdate`:

+这两个更新事件 `available` 和 `activated`，都是 `SwUpdate` 的 `Observable` 属性：
+
 <code-example path="service-worker-getting-started/src/app/log-update.service.ts" linenums="false" title="log-update.service.ts" region="sw-update"> </code-example>

 You can use these events to notify the user of a pending update or to refresh their pages when the code they are running is out of date.

+你可以使用这些事件来通知用户有一个待做更新或当它们运行的代码已经过期时刷新页面。
+
 ### Checking for updates

+### 检查更新
+
 It's possible to ask the service worker to check if any updates have been deployed to the server. You might choose to do this if you have a site that changes frequently or want updates to happen on a schedule.

+可以要求 Service Worker 检查是否有任何更新已经发布到了服务器上。如果你的站点更新非常频繁，或者希望它按照计划进行定时更新，你就可以用它来实现。
+
 Do this with the `checkForUpdate()` method:

+通过调用 `checkForUpdate()` 方法来实现：
+
 <code-example path="service-worker-getting-started/src/app/check-for-update.service.ts" linenums="false" title="check-for-update.service.ts" region="sw-check-update"> </code-example>

 This method returns a `Promise` which indicates that the update check has completed successfully, though it does not indicate whether an update was discovered as a result of the check. Even if one is found, the service worker must still successfully download the changed files, which can fail. If successful, the `available` event will indicate availability of a new version of the app.

+该方法返回一个用来表示检查更新已经成功完成的 `Promise`，不过它不会指出是否确实发现了一个更新。
+即使找到了一个，Service Worker 还必须成功下载更新过的文件，而这可能会失败。如果成功了，就会通过一个 `available` 事件来表明当前应用有一个可用的新版本。
+
 ### Forcing update activation

+### 强制激活更新
+
 If the current tab needs to be updated to the latest app version immediately, it can ask to do so with the `activateUpdate()` method:

+如果当前页需要立即更新到最新的应用版本，可以通过 `activateUpdate()` 方法来要求立即这么做：
+
 <code-example path="service-worker-getting-started/src/app/prompt-update.service.ts" linenums="false" title="prompt-update.service.ts" region="sw-activate"> </code-example>

 Doing this could break lazy-loading into currently running apps, especially if the lazy-loaded chunks use filenames with hashes, which change every version.

+这可能会让惰性加载的模块进入当前正在运行的应用中，特别是如果惰性加载的模块文件名中使用了哈希时，这将会改变每一个版本。
+
 ## More on Angular service workers

+## 关于 Angular Service Worker 的更多知识
+
 You may also be interested in the following:

+你可能对下列内容感兴趣：
+
 * [Service Worker in Production](guide/service-worker-devops).
+
+  [产品环境下的 Service Worker](guide/service-worker-devops).
--- a/aio/content/guide/service-worker-getting-started.md
+++ b/aio/content/guide/service-worker-getting-started.md
@ -1,5 +1,7 @@
 # Getting started with service workers

+# Service Worker 快速起步
+
 #### Prerequisites

 #### 前提条件
@ -10,14 +12,25 @@ A basic understanding of the following:

 * [Introduction to Angular service workers](guide/service-worker-intro).

+  [Angular Service Worker 简介](guide/service-worker-intro).
+
 <hr />

 Beginning in Angular 5.0.0, you can easily enable Angular service worker support in any CLI project. This document explains how to enable Angular service worker support in new and existing projects. It then uses a simple example to show you a service worker in action, demonstrating loading and basic caching.  

+从 Angular 5.0.0 开始，你就可以轻松为任何 CLI 项目启用 Angular Service Worker 的支持了。
+这个文档解释了你要如何在新项目和现有项目中启用 Angular Service Worker 的支持。
+然后使用一个简单的例子为你展示 Service Worker 实战，以演示加载和基本的缓存功能。
+
 ## Adding a service worker to a new application

+## 为新项目添加 Service Worker
+
 If you're generating a new CLI project, you can use the CLI to set up the Angular service worker as part of creating the project. To do so, add the `--service-worker` flag to the `ng new`  command:

+如果你正在生成一个新的 CLI 项目，可以 使用 CLI 在创建项目时就准备好 Angular Service Worker。
+只要在 `ng new` 命令中添加 `--service-worker` 标志就可以了：
+
 ```sh

 ng new my-project --service-worker 
@ -31,24 +44,45 @@ For information on the details, see the following section
 which covers the process in detail as it shows you how to add a 
 service worker manually to an existing app.

+`--service-worker` 标志会通过添加 `service-worker` 包及其它必须的文件，来帮你配置好 Service Worker。
+这个过程的细节和向现有项目中手动添加 Service Worker 的支持是一样的。要了解详情，参见下面的部分。
+
 ## Adding a service worker to an existing app

+## 向现有工程中添加 Service Worker
+
 To add a service worker to an existing app:

+要把 Service Worker 添加到现有应用中，就要：
+
 1. Add the service worker package.

+   添加 Service Worker 包。
+
 2. Enable service worker build support in the CLI.

+   在 CLI 中启用 Service Worker 的构建支持。
+
 3. Import and register the service worker.

+   导入并注册这个 Service Worker。
+
 4. Create the service worker configuration file, which specifies the caching behaviors and other settings. 

+   创建 Service Worker 的配置文件，它指定了缓存行为和其它设置。
+
 5. Build the project.

+   构建该项目。
+
 ### Step 1: Add the service worker package

+### 步骤 1：添加 Service Worker 包
+
 Add the package `@angular/service-worker`, using the yarn utility as shown here:

+添加 `@angular/service-worker` 包，使用 yarn 工具时的用法如下：
+
 ```sh

 yarn add @angular/service-worker
@ -57,8 +91,13 @@ yarn add @angular/service-worker

 ### Step 2: Enable service worker build support in the CLI

+### 步骤 2：在 CLI 中启用 Service Worker 的构建支持
+
 To enable the Angular service worker, the CLI must generate an Angular service worker manifest at build time. To cause the CLI to generate the manifest for an existing project, set the `serviceWorker` flag to `true` in the project's `.angular-cli.json` file as shown here:

+要启用 Angular Service Worker，CLI 必须在构建时生成一个 Angular Service Worker 的 `manifest` 文件。
+要让 CLI 为现有项目生成 `manifest`，就要在该项目的 `.angular-cli.json` 文件中 `serviceWorker` 标识设置为 `true`。命令如下：
+
 ```sh

 ng set apps.0.serviceWorker=true
@ -67,33 +106,56 @@ ng set apps.0.serviceWorker=true

 ### Step 3: Import and register the service worker

+### 步骤 3：导入并注册 Service Worker
+
 To import and register the Angular service worker:

+要导入并注册 Angular Service Worker 就要：
+
 At the top of the root module, `src/app/app.module.ts`, import `ServiceWorkerModule` and `environment`.

+在根模块 `src/app/app.module.ts` 的顶部导入 `ServiceWorkerModule` 和 `environment`。
+
 <code-example path="service-worker-getting-started/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts" region="sw-import"> </code-example>

 Add `ServiceWorkerModule` to the `@NgModule` `imports` array. Use the `register()` helper to take care of registering the service worker, taking care to disable the service worker when not running in production mode.

+把 `ServiceWorkerModule` 添加到 `@NgModule` 的 `imports` 数组中。使用 `register()` 来帮助管理 Service Worker 的注册并在非产品环境下运行时禁用 Service Worker。
+
 <code-example path="service-worker-getting-started/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts" region="sw-module"> </code-example>

 The file `ngsw-worker.js` is the name of the prebuilt service worker script, which the CLI copies into `dist/` to deploy along with your server.

+`ngsw-worker.js` 文件是内置的 Service Worker 脚本的名字，CLI 会把它复制到 `dist/` 目录下，让它随你的服务器一起发布。
+
 ### Step 4: Create the configuration file, `ngsw-config.json`

+### 步骤 4：创建配置文件 `ngsw-config.json`
+
 The Angular CLI needs a service worker configuration file, called `ngsw-config.json`. The configuration file controls how the service worker caches files and data 
 resources.

+Angular CLI 需要一个名叫 `ngsw-config.json` 的 Service Worker 配置文件。
+这个配置文件会控制 Service Worker 如何缓存各个文件和数据资源。
+
 You can begin with the boilerplate version from the CLI, which configures sensible defaults for most applications.

+你可以从 CLI 创建的样板项目开始，它已经配置好了适合大多数应用的默认选项。
+
 Alternately, save the following as `src/ngsw-config.json`:

+另外，你也可以把下列内容保存为 `src/ngsw-config.json`：
+
 <code-example path="service-worker-getting-started/src/ngsw-config.json" linenums="false" title="src/ngsw-config.json"> </code-example>

 ### Step 5: Build the project

+### 步骤 5：构建本项目
+
 Finally, build the project: 

+最后，构建本项目：
+
 ```sh

 ng build --prod
@ -102,17 +164,31 @@ ng build --prod

 The CLI project is now set up to use the Angular service worker.

+现在，这个 CLI 项目就可以使用 Angular Service Worker 了。
+
 ## Service worker in action: a tour

+## Service Worker 实战：向导
+
 This section demonstrates a service worker in action, 
 using an example application. 

+本节用一个范例应用来演示一下 Service Worker 实战。
+
 ### Serving with `http-server`

+### 用 `http-server` 启动开发服务器
+
 Because `ng serve` does not work with service workers, you must use a seperate HTTP server to test your project locally. You can use any HTTP server. The example below uses the [http-server](https://www.npmjs.com/package/http-server) package from npm. To reduce the possibility of conflicts, test on a dedicated port.

+由于 `ng serve` 对 Service Worker 无效，所以必须用一个独立的 HTTP 服务器在本地测试你的项目。
+你可以使用任何 HTTP 服务器。下面这个例子使用来自 npm 中的 [http-server](https://www.npmjs.com/package/http-server) 包。
+为了减小端口冲突的可能性，我们在一个专用端口上进行测试。
+
 To serve with `http-server`, change to the directory containing your web files and start the web server: 

+要想使用 `http-server` 服务器，进入包含这些 web 文件的目录，并启动开发服务器：
+
 ```sh

 cd dist
@ -122,69 +198,123 @@ http-server -p 8080

 ### Initial load

+### 最初的加载
+
 With the server running, you can point your browser at http://localhost:8080/. Your application should load normally.

+在服务器运行起来之后，你可以在浏览器中访问 http://localhost:8080/。你的应用像通常一样加载。
+
 **Tip:** When testing Angular service workers, it's a good idea to use an incognito or private window in your browser to ensure the service worker doesn't end up reading from a previous leftover state, which can cause unexpected behavior.

+**提示：** 当测试 Angular Service Worker 时，最好使用浏览器中的隐身或隐私窗口，以确保 Service Worker 不会从以前的残留状态中读取数据，否则可能导致意外的行为。
+
 ### Simulating a network issue

+### 模拟网络出问题
+
 To simulate a network issue, disable network interaction for your application. In Chrome: 

+要想模拟网络出问题的情况，可以为你的应用禁用网络交互。在 Chrome 中：
+
 1. Select **Tools** > **Developer Tools** (from the Chrome menu located at the top right corner).

+   选择 **Tools** > **Developer Tools** （从右上角的 Chrome 菜单）。
+
 2. Go to the **Network tab**.

+   进入 **Network 页**。
+
 3. Check the **Offline box**.

+   勾选 **Offline** 复选框。
+
 <figure>
  <img src="generated/images/guide/service-worker/offline-checkbox.png" alt="The offline checkbox in the Network tab is checked">
 </figure>

 Now the app has no access to network interaction.

+现在，本应用不能再和网络进行交互了。
+
 For applications that do not use the Angular service worker, refreshing now would display Chrome's Internet disconnected page that says "There is no Internet connection". 

+对于那些不使用 Angular Service Worker 的应用，现在刷新将会显示 Chrome 的“网络中断”页，提示“没有可用的网络连接”。
+
 With the addition of an Angular service worker, the application behavior changes. On a refresh, the page loads normally. 

+有了 Angular Service Worker，本应用的行为就不一样了。刷新时，页面会正常加载。
+
 If you look at the Network tab, you can verify that the service worker is active.

+如果你看看 Network 页，就会发现 Service Worker 是激活的。
+
 <figure>
  <img src="generated/images/guide/service-worker/sw-active.png" alt="Requests are marked as from ServiceWorker">
 </figure>

 Notice that under the "Size" column, the requests state is `(from ServiceWorker)`. This means that the resources are not being loaded from the network. Instead, they are being loaded from the service worker's cache.

+注意，在 “Size” 列中，请求的状态是 `(from ServiceWorker)`。
+这表示该资源不是从网络上加载的，而是从 Service Worker 的缓存中。
+
 ### What's being cached?

+### 什么被缓存了？
+
 Notice that all of the files the browser needs to render this application are cached. The `ngsw-config.json` boilerplate configuration is set up to cache the specific resources used by the CLI:

+注意，浏览器要渲染的所有这些文件都被缓存了。
+`ngsw-config.json` 样板文件被配置成了要缓存 CLI 用到的那些文件：
+
 * `index.html`.

 * `favicon.ico`.

 * Build artifacts (JS and CSS bundles).

+  构建结果（JS 和 CSS 包）。
+
 * Anything under `assets`.

+  `assets` 下的所有文件。
+
 ### Making changes to your application

+### 修改你的应用
+
 Now that you've seen how service workers cache your application, the 
 next step is understanding how updates work. 

+现在，你已经看到了 Service Worker 如何缓存你的应用，接下来的步骤讲它如何进行更新。
+
 1. If you're testing in an incognito window, open a second blank tab. This will keep the incognito and the cache state alive during your test.

+   如果你正在隐身窗口中测试，请打开第二个空白页。这会让该隐身窗口和缓存的状态在测试期间持续活着。
+
 2. Close the application tab, but not the window. This should also close the Developer Tools. 

+   关闭该应用的页面，而不是整个窗口。这也会同时关闭开发者工具。
+
 3. Shut down `http-server`.

+   关闭 `http-server`。
+
 4. Next, make a change to the application, and watch the service worker install the update.

+   接下来，对应用进行一些修改，并且观察 Service Worker 安装这些更新。
+
 5. Open `src/app/app.component.html` for editing.

+   打开 `src/app/app.component.html` 供编辑。
+
 6. Change the text `Welcome to {{title}}!` to `Bienvenue à {{title}}!`.

+   把文本 `Welcome to {{title}}!` 改为 `Bienvenue à {{title}}!`。
+
 7. Build and run the server again:

+   再次构建并运行此服务器：
+
 ```sh

 ng build --prod
@ -195,30 +325,50 @@ http-server -p 8080

 ### Updating your application in the browser

+### 在浏览器中更新你的应用
+
 Now look at how the browser and service worker handle the updated application.

+现在，看看浏览器和 Service Worker 如何处理这个更新后的应用。
+
 1. Open http://localhost:8080 again in the same window. What happens?

+   再次在同一个窗口中打开 <http://localhost:8080>，发生了什么？
+
 <figure>
  <img src="generated/images/guide/service-worker/welcome-msg-en.png" alt="It still says Welcome to Service Workers!">
 </figure>

 What went wrong? Nothing, actually. The Angular service worker is doing its job and serving the version of the application that it has **installed**, even though there is an update available. In the interest of speed, the service worker doesn't wait to check for updates before it serves the application that it has cached.

+错在哪里？哪里也没错，真的。Angular Service Worker 正在做自己的工作，并且用它**已经安装过**的版本提供服务，虽然，已经有新版本可用了。由于更关注速度，所以 Service Worker 并不会在启动它已经缓存过的版本之前先等待检查更新。
+
 If you look at the `http-server` logs, you can see the service worker requesting `/ngsw.json`. This is how the service worker checks for updates.

+如果你看看 `http-server` 的 log，就会发现 Service Worker 请求了 `/ngsw.json` 文件，这是 Service Worker 正在检查更新。
+
 2. Refresh the page.

+   刷新页面。
+
 <figure>
  <img src="generated/images/guide/service-worker/welcome-msg-fr.png" alt="The text has changed to say Bienvenue à app!">
 </figure>

 The service worker installed the updated version of your app *in the background*, and the next time the page is loaded or reloaded, the service worker switches to the latest version.

+Service Worker *在后台*安装好了这个更新后的版本，下次加载或刷新页面时，Service Worker 就切换到最新的版本了。
+
 <hr />

 ## More on Angular service workers

+## 关于 Angular Service Worker 的更多知识
+
 You may also be interested in the following:

+你可能对下列内容感兴趣：
+
 * [Communicating with service workers](guide/service-worker-communications).
+
+  [与 Service Worker 通讯](guide/service-worker-communications).
--- a/aio/content/guide/service-worker-intro.md
+++ b/aio/content/guide/service-worker-intro.md
@ -1,58 +1,129 @@
 # Angular service worker introduction

+# Angular 的 Service Worker 简介
+
 Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with natively-installed code.

+Service Worker 可以增强传统的 Web 发布模式，并使应用程序能够提供可与本机代码媲美的高可靠、高性能的用户体验。
+
 At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.

+简单来说，Service Worker 就是一段运行在 Web 浏览器中，并为应用管理缓存的脚本。
+
 Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them. For example, they can query a local cache and deliver a cached response if one is available. Proxying isn't limited to requests made through programmatic APIs, such as `fetch`; it also includes resources referenced in HTML and even the initial request to `index.html`. Service worker-based caching is thus completely programmable and doesn't rely on server-specified caching headers.

+Service Worker 的功能就像一个网络代理。它们会拦截所有由应用发出的 HTTP 请求，并选择如何给出响应。
+比如，它们可以查询局部缓存，如果有缓存的响应数据，就用它做出响应。
+这种代理行为不会局限于通过程序调用 API（比如`fetch`）发起的请求，还包括 HTML 中对资源的引用，甚至对 `index.html` 的首次请求。
+ 基于 Service Worker 的缓存是完全可编程的，并且不依赖于服务端指定的那些控制缓存策略的头。
+
 Unlike the other scripts that make up an application, such as the Angular app bundle, the service worker is preserved after the user closes the tab. The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application. If the service worker is designed to do so, it can *completely satisfy the loading of the application, without the need for the network*. 

+不像应用中的其它脚本（如 Angular 的应用包），Service Worker 在用户关闭浏览器页标签时仍然会被保留。
+下次浏览器加载本应用时，Service Worker 会首先加载，然后拦截加载本应用时的对每一项资源的请求。
+如果这个 Service Worker 就是为此而设计的，它就能*完全满足应用加载时的需求，而不需要依赖网络*。
+
 Even across a fast reliable network, round-trip delays can introduce significant latency when loading the application. Using a service worker to reduce dependency on the network can significantly improve the user experience. 

+即使在快速可靠的网络中，往返延迟也可能在加载应用程序时产生显著的延迟。使用 Service Worker 来减少对网络的依赖可以显着改善用户体验。
+
 ## Service workers in Angular

+## Angular 中的 Service Worker
+
 Angular applications, as single-page applications, are in a prime position to benefit from the advantages of service workers. Starting with version 5.0.0, Angular ships with a service worker implementation. Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs.

+作为单页面应用，Angular 应用位于从 Service Worker 中受益的首要位置。
+从 Angular v5.0.0 开始，Angular 提供了一份 Service Worker 的实现。
+Angular 开发人员可以从这个 Service Worker 加强的可靠性和性能中获益，而不用再针对底层 API 写代码。
+
 Angular's service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content. 

+Angular 的 Service Worker 的设计目标是优化那些使用慢速、不可靠网络的最终用户的体验，同时还要尽可能减小提供过期内容的风险。
+
 The Angular service worker's behavior follows that design goal:

+Angular 的 Service Worker 的行为遵循下列设计目标：
+
 * Caching an application is like installing a native application. The application is cached as one unit, and all files update together.

+  像安装原生应用一样缓存应用。该应用作为整体被缓存，它的所有文件作为整体进行更新。
+
 * A running application continues to run with the same version of all files. It does not suddenly start receiving cached files from a newer version, which are likely incompatible.

+  正在运行的应用使用所有文件的同一版本继续运行。不要突然开始接收来自新版本的、可能不兼容的缓存文件。
+
 * When users refresh the application, they see the latest fully cached version. New tabs load the latest cached code.

+  当用户刷新本应用时，他们会看到最新的被完全缓存的版本。新的页标签中会加载最新的缓存代码。
+
 * Updates happen in the background, relatively quickly after changes are published. The previous version of the application is served until an update is installed and ready.

+  在更改发布之后，相对较快的在后台进行更新。在一次完整的更新完成之前，仍然使用应用的上一个版本。
+
 * The service worker conserves bandwidth when possible. Resources are only downloaded if they've changed.

+  只要有可能，Service Worker 就会尽量节省带宽。它只会下载那些发生了变化的资源。
+
 To support these behaviors, the Angular service worker loads a *manifest* file from the server. The manifest describes the resources to cache and includes hashes of every file's contents. When an update to the application is deployed, the contents of the manifest change, informing the service worker that a new version of the application should be downloaded and cached. This manifest is generated from a user-provided configuration file called `ngsw-config.json`, by using a build tool such as the Angular CLI.

+要支持这些行为，Angular 的 Service Worker 会从服务器上下载一个 `manifest` 文件。
+这个 `manifest` 文件描述要缓存的资源，并包含每个文件内容的哈希值。
+当发布了应用的一个新版本时，`manifest` 的内容就会改变，通知 Service Worker 应该下载并缓存应用的一个新版本了。
+这个 manifest 是从用户使用 Angular CLI 等构建工具提供的一个名叫 `ngsw-config.json` 的文件中生成的。
+
 Installing the Angular service worker is as simple as including an `NgModule`. In addition to registering the Angular service worker with the browser, this also makes a few services available for injection which interact with the service worker and can be used to control it. For example, an application can ask to be notified when a new update becomes available, or an application can ask the service worker to check the server for available updates.

+安装 Angular 的 Service Worker 就像引入一个 `NgModule` 一样简单。
+除了使用浏览器注册 Angular 的 Service Worker 之外，还要制作一些可供注入的服务，它们可以与 Service Worker 交互，并控制它。
+比如，应用可以要求当新的更新已经就绪时通知自己，或要求 Service Worker 检查服务器，看是否有可用的更新。
+
 ## Prerequisites

+## 前提条件
+
 To use Angular service workers, you must have the following Angular and CLI versions:

+要想使用 Angular Service Worker，你要使用下列 Angular 和 CLI 版本：
+
 * Angular 5.0.0 or later.

+  Angular 5.0.0 或更高。
+
 * Angular CLI 1.6.0 or later.

+  Angular CLI 1.6.0 或更高。
+
 Your application must run in a web browser that supports service workers. Currently, the latest versions of Chrome and Firefox are supported. To learn about other browsers that are service worker ready, see the [Can I Use](http://caniuse.com/#feat=serviceworkers) page.

+你的应用必须运行在支持 Service Worker 的 Web 浏览器中。目前，Chrome 和 Firefox 的最新版本 都已经支持了。
+要想知道其它浏览器是否支持，参见 [Can I Use](http://caniuse.com/#feat=serviceworkers) 页。
+
 ## Related resources

+## 相关资源
+
 For more information about service workers in general, see [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/). 

+要了解更多关于 Service Worker 的普遍性信息，参见 [Service Worker 简介](https://developers.google.com/web/fundamentals/primers/service-workers/)。
+
 For more information about browser support, see the [browser support](https://developers.google.com/web/fundamentals/primers/service-workers/#browser_support) section of [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/), Jake Archibald's [Is Serviceworker ready?](https://jakearchibald.github.io/isserviceworkerready/), and 
 [Can I Use](http://caniuse.com/#feat=serviceworkers). 

+要了解关于浏览器支持度的更多信息，参见 [Service Worker 简介](https://developers.google.com/web/fundamentals/primers/service-workers/) 中的[浏览器支持](https://developers.google.com/web/fundamentals/primers/service-workers/#browser_support)部分、Jake Archibald 写的[Serviceworker 好了吗？](https://jakearchibald.github.io/isserviceworkerready/)和 [Can I Use](http://caniuse.com/#feat=serviceworkers)。
+
 The remainder of this Angular documentation specifically addresses the Angular implementation of service workers. 

+本文档的其余部分会专注于讲 Angular 中的 Service Worker 实现。
+
 ## More on Angular service workers

+## 关于 Angular Service Worker 的更多信息
+
 You may also be interested in the following:

+你可能还对下列内容感兴趣：
+
 * [Getting Started with service workers](guide/service-worker-getting-started).
+
+  [Service Worker 快速起步](guide/service-worker-getting-started).
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@ -401,33 +401,33 @@
          ]
        },
        {
-          "title": "Service Workers",
-          "tooltip": "Angular service workers: Controlling caching of application resources.",
+          "title": "Service Worker",
+          "tooltip": "Angular 的 Service Worker：控制应用的资源缓存。",
          "children": [
            {
              "url": "guide/service-worker-intro",
-              "title": "Introduction",
-              "tooltip": "Angular's implementation of service workers improves user experience with slow or unreliable network connectivity."
+              "title": "简介",
+              "tooltip": "Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。"
            },
            {
              "url": "guide/service-worker-getting-started",
-              "title": "Getting Started",
-              "tooltip": "Enabling the service worker in a CLI project and observing behavior in the browser."
+              "title": "快速起步",
+              "tooltip": "在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。"
            },
            {
              "url": "guide/service-worker-communications",
-              "title": "Service Worker Communication",
-              "tooltip": "Services that enable you to interact with an Angular service worker."
+              "title": "与 Service Worker 通讯",
+              "tooltip": "那些能让你和 Angular 的 Service Worker 通讯的服务类。"
            },
            {
              "url": "guide/service-worker-devops",
-              "title": "Service Worker in Production",
-              "tooltip": "Running applications with service workers, managing application update, debugging, and killing applications."
+              "title": "产品环境下的 Service Worker",
+              "tooltip": "使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。"
            },
            {
              "url": "guide/service-worker-config",
-              "title": "Service Worker Configuration",
-              "tooltip": "Configuring service worker caching behavior."
+              "title": "Service Worker 的配置",
+              "tooltip": "配置 Service Worker 的缓存行为。"
            }
          ]
        },