translate(content): service-worker-getting-started.md

Author: T2

aio-ja/content/guide/service-worker-getting-started.md

@@ -1,203 +1,196 @@
-# Getting Started with Service Workers
+# Service Workerを始める
 
-#### Prerequisites
+#### 前提条件
 
-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を設定できます。これを行うには、`--service-worker`フラグを`ng new`コマンドに追加します。
 
 ```sh
 ng new my-project --service-worker 
 ```
 
-The `--service-worker` flag takes care of configuring your app to 
-use service workers by adding the `service-worker` package along 
-with setting up the necessary files to support service workers. 
-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.
-2. Enable service worker build support in the CLI.
-3. Import and register the service worker.
-4. Create the service worker configuration file, which specifies the caching behaviors and other settings. 
-5. Build the project.
+1. Service Workerのパッケージを追加します。
+2. CLIでService Workerのビルドサポートを有効にします。
+3. Service Workerをインポートして登録します。
+4. キャッシングビヘイビアなどの設定を指定するService Workerの設定ファイルを作成します。
+5. プロジェクトをビルドします。
 
-### Step 1: Add the service worker package
+### ステップ1: Service Workerのパッケージを追加します
 
-Add the package `@angular/service-worker`, using the yarn utility as shown here:
+次のように、yarnを使用して、`@angular/service-worker`パッケージを追加してください。
 
 ```sh
 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マニフェストを生成する必要があります。CLIが既存のプロジェクトでマニフェストを生成するようにするためには、プロジェクトの`.angular-cli.json`ファイルで`serviceWorker`フラグを`true`に設定します。
 
 ```sh
 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`配列に追加してください。プロダクションモードで実行していないときに、Service Workerを無効にするように登録するためには、`register()`ヘルパーを使用してください。
 
 <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`ファイルは、CLIがあなたのサーバーに一緒にデプロイするために`dist/`にコピーする、事前構築されたService Workerのスクリプト名称です。
 
-### 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
 ```
 
-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ファイルが入っているディレクトリ(訳注:`ng build --prod`で作成されたフォルダ。通常なら`dist`)に移動し、Webサーバーを起動してください。
 
 ```sh
 cd dist
 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.
+**Tip:** 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).
-2. Go to the **Network tab**.
-3. Check the **Offline box**.
+1. ツールバーの右にあるメニューから**その他のツール** > **デベロッパー ツール**を選びます。
+2. **Networkタブ**を選びます。
+3. **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.
+「サイズ」列の下にある要求状態は、(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).
-* Anything under `assets`.
+* `index.html`
+* `favicon.ico`
+* ビルド成果物（JSおよびCSSバンドル）
+* `assets`の下にあるもの（訳注:assets下にさらに階層を作っている場合は、`ngsw-config.json`の設定を階層に合わせて`/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.
+1. シークレットウィンドウでテストする場合は、2つ目のタブを空白で開きます。これにより、テスト中にシークレットとキャッシュの状態が維持されます。
 
-2. Close the application tab, but not the window. This should also close the Developer Tools. 
+2. アプリケーションタブを閉じますが、ウィンドウは閉じません。これにより、開発者ツールも閉じる必要があります。
 
-3. Shut down `http-server`.
+3. `http-server`を落とします。
 
-4. Next, make a change to the application, and watch the service worker install the update.
+4. 次に、アプリケーションを変更して、Service Workerが更新プログラムをインストールするのを確認します。
 
-5. Open `src/app/app.component.html` for editing.
+5. 編集するために`src/app/app.component.html`を開きます。
 
-6. Change the text `Welcome to {{title}}!` to `Bienvenue à {{title}}!`.
+6. `Welcome to {{title}}!`のテキストを`Bienvenue à {{title}}!`に変えます。
 
-7. Build and run the server again:
+7. もう一度ビルドしてサーバーを起動します。
 
 ```sh
 ng build --prod
 cd dist
 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?
+1. 同じウィンドウでもう一度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`ログを見ると、`/ngsw.json`を要求しているService Workerを見ることができます。これは、Service Workerが更新をチェックする方法です。
 
-2. Refresh the page.
+2. ページを再読み込みします。
 
 <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)