angular-cn/aio/content/guide/service-worker-communicatio...

109 lines
5.3 KiB
Markdown
Raw Normal View History

# 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
#### 前提条件
A basic understanding of the following:
2018-03-03 08:06:01 -05:00
对下列知识有基本的了解:
* [Getting Started with Service Workers](guide/service-worker-getting-started).
2018-03-24 04:33:17 -04:00
[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:
2018-03-03 08:06:01 -05:00
`SwUpdate` 服务支持四个独立的操作:
* Getting notified of *available* updates. These are new versions of the app to be loaded if the page is refreshed.
2018-03-03 08:06:01 -05:00
2018-03-24 01:12:42 -04:00
获取出现*可用*更新的通知。如果要刷新页面,这些就是可加载的新版本。
* Getting notified of update *activation*. This is when the service worker starts serving a new version of the app immediately.
2018-03-03 08:06:01 -05:00
2018-03-24 01:12:42 -04:00
获取更新*被激活*的通知。这时候 Service Worker 就可以立即使用这些新版本提供服务了。
* Asking the service worker to check the server for new updates.
2018-03-03 08:06:01 -05:00
2018-03-24 01:12:42 -04:00
要求 Service Worker 向服务器查询是否有新版本。
* Asking the service worker to activate the latest version of the app for the current tab.
2018-03-24 01:12:42 -04:00
要求 Service Worker 为当前页面激活该应用的最新版本。
### Available and activated updates
### 有可用更新及已激活更新
The two update events, `available` and `activated`, are `Observable` properties of `SwUpdate`:
这两个更新事件 `available``activated`,都是 `SwUpdate``Observable` 属性:
Merge remote-tracking branch 'en/master' into aio # Conflicts: # aio/content/guide/ajs-quick-reference.md # aio/content/guide/animations.md # aio/content/guide/aot-compiler.md # aio/content/guide/architecture-components.md # aio/content/guide/architecture-modules.md # aio/content/guide/architecture-next-steps.md # aio/content/guide/architecture-services.md # aio/content/guide/architecture.md # aio/content/guide/attribute-directives.md # aio/content/guide/bootstrapping.md # aio/content/guide/browser-support.md # aio/content/guide/cheatsheet.md # aio/content/guide/comparing-observables.md # aio/content/guide/component-interaction.md # aio/content/guide/component-styles.md # aio/content/guide/dependency-injection-in-action.md # aio/content/guide/dependency-injection-pattern.md # aio/content/guide/dependency-injection.md # aio/content/guide/deployment.md # aio/content/guide/displaying-data.md # aio/content/guide/dynamic-component-loader.md # aio/content/guide/elements.md # aio/content/guide/feature-modules.md # aio/content/guide/form-validation.md # aio/content/guide/forms.md # aio/content/guide/glossary.md # aio/content/guide/hierarchical-dependency-injection.md # aio/content/guide/i18n.md # aio/content/guide/lazy-loading-ngmodules.md # aio/content/guide/lifecycle-hooks.md # aio/content/guide/ngmodule-faq.md # aio/content/guide/ngmodule-vs-jsmodule.md # aio/content/guide/ngmodules.md # aio/content/guide/npm-packages.md # aio/content/guide/observables-in-angular.md # aio/content/guide/observables.md # aio/content/guide/pipes.md # aio/content/guide/practical-observable-usage.md # aio/content/guide/providers.md # aio/content/guide/quickstart.md # aio/content/guide/reactive-forms.md # aio/content/guide/router.md # aio/content/guide/rx-library.md # aio/content/guide/security.md # aio/content/guide/service-worker-communications.md # aio/content/guide/service-worker-getting-started.md # aio/content/guide/service-worker-intro.md # aio/content/guide/setup-systemjs-anatomy.md # aio/content/guide/setup.md # aio/content/guide/singleton-services.md # aio/content/guide/structural-directives.md # aio/content/guide/styleguide.md # aio/content/guide/template-syntax.md # aio/content/guide/testing.md # aio/content/guide/typescript-configuration.md # aio/content/guide/universal.md # aio/content/guide/updating.md # aio/content/guide/upgrade.md # aio/content/guide/user-input.md # aio/content/guide/visual-studio-2015.md # aio/content/marketing/docs.md # aio/content/navigation.json # aio/content/tutorial/toh-pt0.md # aio/content/tutorial/toh-pt1.md # aio/content/tutorial/toh-pt2.md # aio/content/tutorial/toh-pt3.md # aio/content/tutorial/toh-pt4.md # aio/content/tutorial/toh-pt5.md # aio/content/tutorial/toh-pt6.md # aio/ngsw-manifest.json # aio/package.json # aio/src/app/custom-elements/api/api-list.component.html # aio/src/app/custom-elements/api/api-list.component.ts # aio/src/index.html # aio/tools/transforms/templates/api/base.template.html # aio/tools/transforms/templates/api/class.template.html # aio/tools/transforms/templates/api/directive.template.html # aio/tools/transforms/templates/api/enum.template.html # aio/tools/transforms/templates/api/includes/class-overview.html # aio/tools/transforms/templates/api/includes/deprecation.html # aio/tools/transforms/templates/api/includes/export-as.html # aio/tools/transforms/templates/api/includes/info-bar.html # aio/tools/transforms/templates/api/includes/interface-overview.html # aio/tools/transforms/templates/api/includes/selectors.html # aio/tools/transforms/templates/api/lib/directiveHelpers.html # aio/tools/transforms/templates/api/lib/githubLinks.html # aio/tools/transforms/templates/api/lib/memberHelpers.html # aio/tools/transforms/templates/api/package.template.html # aio/yarn.lock # packages/common/http/src/module.ts # packages/common/src/common_module.ts # packages/common/src/directives/ng_for_of.ts # packages/common/src/directives/ng_if.ts # packages/common/src/directives/ng_template_outlet.ts # packages/common/src/location/location.ts # packages/common/src/pipes/async_pipe.ts # packages/common/src/pipes/json_pipe.ts # packages/common/src/pipes/number_pipe.ts # packages/common/src/pipes/slice_pipe.ts # packages/core/src/change_detection/change_detector_ref.ts # packages/core/src/di/injectable.ts # packages/core/src/linker/template_ref.ts # packages/core/src/linker/view_container_ref.ts # packages/core/src/metadata/di.ts # packages/core/src/metadata/ng_module.ts # packages/core/src/render/api.ts # packages/forms/src/directives/form_interface.ts # packages/forms/src/directives/ng_form.ts # packages/forms/src/directives/ng_model.ts # packages/forms/src/directives/reactive_directives/form_control_name.ts # packages/forms/src/directives/select_control_value_accessor.ts # packages/forms/src/directives/validators.ts # packages/forms/src/form_providers.ts # packages/forms/src/model.ts # packages/forms/src/validators.ts # packages/router/src/config.ts # packages/router/src/router.ts # packages/router/src/router_module.ts # packages/router/src/router_state.ts
2018-10-21 05:43:29 -04:00
<code-example path="service-worker-getting-started/src/app/log-update.service.ts" linenums="false" header="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()` 方法来实现:
Merge remote-tracking branch 'en/master' into aio # Conflicts: # aio/content/guide/ajs-quick-reference.md # aio/content/guide/animations.md # aio/content/guide/aot-compiler.md # aio/content/guide/architecture-components.md # aio/content/guide/architecture-modules.md # aio/content/guide/architecture-next-steps.md # aio/content/guide/architecture-services.md # aio/content/guide/architecture.md # aio/content/guide/attribute-directives.md # aio/content/guide/bootstrapping.md # aio/content/guide/browser-support.md # aio/content/guide/cheatsheet.md # aio/content/guide/comparing-observables.md # aio/content/guide/component-interaction.md # aio/content/guide/component-styles.md # aio/content/guide/dependency-injection-in-action.md # aio/content/guide/dependency-injection-pattern.md # aio/content/guide/dependency-injection.md # aio/content/guide/deployment.md # aio/content/guide/displaying-data.md # aio/content/guide/dynamic-component-loader.md # aio/content/guide/elements.md # aio/content/guide/feature-modules.md # aio/content/guide/form-validation.md # aio/content/guide/forms.md # aio/content/guide/glossary.md # aio/content/guide/hierarchical-dependency-injection.md # aio/content/guide/i18n.md # aio/content/guide/lazy-loading-ngmodules.md # aio/content/guide/lifecycle-hooks.md # aio/content/guide/ngmodule-faq.md # aio/content/guide/ngmodule-vs-jsmodule.md # aio/content/guide/ngmodules.md # aio/content/guide/npm-packages.md # aio/content/guide/observables-in-angular.md # aio/content/guide/observables.md # aio/content/guide/pipes.md # aio/content/guide/practical-observable-usage.md # aio/content/guide/providers.md # aio/content/guide/quickstart.md # aio/content/guide/reactive-forms.md # aio/content/guide/router.md # aio/content/guide/rx-library.md # aio/content/guide/security.md # aio/content/guide/service-worker-communications.md # aio/content/guide/service-worker-getting-started.md # aio/content/guide/service-worker-intro.md # aio/content/guide/setup-systemjs-anatomy.md # aio/content/guide/setup.md # aio/content/guide/singleton-services.md # aio/content/guide/structural-directives.md # aio/content/guide/styleguide.md # aio/content/guide/template-syntax.md # aio/content/guide/testing.md # aio/content/guide/typescript-configuration.md # aio/content/guide/universal.md # aio/content/guide/updating.md # aio/content/guide/upgrade.md # aio/content/guide/user-input.md # aio/content/guide/visual-studio-2015.md # aio/content/marketing/docs.md # aio/content/navigation.json # aio/content/tutorial/toh-pt0.md # aio/content/tutorial/toh-pt1.md # aio/content/tutorial/toh-pt2.md # aio/content/tutorial/toh-pt3.md # aio/content/tutorial/toh-pt4.md # aio/content/tutorial/toh-pt5.md # aio/content/tutorial/toh-pt6.md # aio/ngsw-manifest.json # aio/package.json # aio/src/app/custom-elements/api/api-list.component.html # aio/src/app/custom-elements/api/api-list.component.ts # aio/src/index.html # aio/tools/transforms/templates/api/base.template.html # aio/tools/transforms/templates/api/class.template.html # aio/tools/transforms/templates/api/directive.template.html # aio/tools/transforms/templates/api/enum.template.html # aio/tools/transforms/templates/api/includes/class-overview.html # aio/tools/transforms/templates/api/includes/deprecation.html # aio/tools/transforms/templates/api/includes/export-as.html # aio/tools/transforms/templates/api/includes/info-bar.html # aio/tools/transforms/templates/api/includes/interface-overview.html # aio/tools/transforms/templates/api/includes/selectors.html # aio/tools/transforms/templates/api/lib/directiveHelpers.html # aio/tools/transforms/templates/api/lib/githubLinks.html # aio/tools/transforms/templates/api/lib/memberHelpers.html # aio/tools/transforms/templates/api/package.template.html # aio/yarn.lock # packages/common/http/src/module.ts # packages/common/src/common_module.ts # packages/common/src/directives/ng_for_of.ts # packages/common/src/directives/ng_if.ts # packages/common/src/directives/ng_template_outlet.ts # packages/common/src/location/location.ts # packages/common/src/pipes/async_pipe.ts # packages/common/src/pipes/json_pipe.ts # packages/common/src/pipes/number_pipe.ts # packages/common/src/pipes/slice_pipe.ts # packages/core/src/change_detection/change_detector_ref.ts # packages/core/src/di/injectable.ts # packages/core/src/linker/template_ref.ts # packages/core/src/linker/view_container_ref.ts # packages/core/src/metadata/di.ts # packages/core/src/metadata/ng_module.ts # packages/core/src/render/api.ts # packages/forms/src/directives/form_interface.ts # packages/forms/src/directives/ng_form.ts # packages/forms/src/directives/ng_model.ts # packages/forms/src/directives/reactive_directives/form_control_name.ts # packages/forms/src/directives/select_control_value_accessor.ts # packages/forms/src/directives/validators.ts # packages/forms/src/form_providers.ts # packages/forms/src/model.ts # packages/forms/src/validators.ts # packages/router/src/config.ts # packages/router/src/router.ts # packages/router/src/router_module.ts # packages/router/src/router_state.ts
2018-10-21 05:43:29 -04:00
<code-example path="service-worker-getting-started/src/app/check-for-update.service.ts" linenums="false" header="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" header="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
2018-03-24 01:12:42 -04:00
## 关于 Angular Service Worker 的更多信息
You may also be interested in the following:
2018-03-03 08:06:01 -05:00
2018-03-24 04:33:17 -04:00
你可能还对下列内容感兴趣:
* [Service Worker in Production](guide/service-worker-devops).
2018-03-24 04:33:17 -04:00
[生产环境下的 Service Worker](guide/service-worker-devops)。