Angular 2
サービスワーカー

前書き

アプリケーションにサービスワーカーを追加する

あなたがmobile.angular.ioに相談している場合には、最初に--mobileがもう動作しません。

開始するには、角度のあるクリティカルなプロジェクトを作成することができます。

ng new serviceWorking-example
cd serviceWorking-example

今重要なことは、私たちがする必要があるサービスワーカーを使用したいと思っていることです。

ng set apps.0.serviceWorker = true

なんらかの理由で@ angular / service-workerがインストールされていない場合は、次のメッセージが表示されます。

あなたのプロジェクトはserviceWorker = trueで設定されていますが、@ angular / service-workerはインストールされていません。 npm install --save-dev @angular/service-workerを実行してもう一度やり直すか、.agn-cli.jsonでng set apps.0.serviceWorker=false実行してください。

.angular-cli.jsonを確認すると、次のように表示されます： "serviceWorker"：true

このフラグがtrueの場合、サービスビルダーとサービスビルダーがセットアップされます。

ngsw-manifest.jsonファイルが生成されます（または、プロジェクトのルートにngsw-manifest.jsonを作成する場合に備えて拡張されます。通常、これはルーティングを指定するために行われます。将来は自動的に行われます） dist / rootにコピーして、サービスワーカースクリプトをそこにコピーします。サービスワーカーを登録するための短いスクリプトがindex.htmlに追加されます。

今我々が生産モードでアプリを構築する場合は、ng build --prod

dist / folderをチェックしてください。

そこに3つの新しいファイルが表示されます：

• worker-basic.min.js
• sw-register.HASH.bundle.js
• ngsw-manifest.json

また、index.htmlにはこのsw-registerスクリプトが含まれています。このスクリプトは、私たちのために角度サービスワーカー（ASW）を登録します。

ブラウザのページを更新します（ChromeのWebサーバーによって提供されます）

開発者ツールを開きます。アプリケーション - >サービスワーカーに移動します。

サービスワーカーが稼動しているのはいいですね！

今、私たちのアプリケーションは、より速く読み込む必要があり、我々はオフラインでアプリケーションを使用できるようにする必要があります。

クロムコンソールでオフラインモードを有効にすると、 http：// localhost：4200 / index.htmlのアプリがインターネットに接続せずに動作しているはずです。

しかし、 http：// localhost：4200 /には問題があり、ロードされません。これは静的コンテンツキャッシュがマニフェストにリストされているファイルのみを扱うためです。

たとえば、マニフェストが/index.htmlのURLを宣言すると、/index.htmlへのリクエストはキャッシュによって応答されますが、/または/ some / routeへのリクエストはネットワークに送られます。

ルートリダイレクションプラグインが入ってきます。マニフェストからルーティング設定を読み込み、設定されたルートを指定されたインデックスルートにリダイレクトします。

現在、この構成セクションは手書きでなければなりません（19-7-2017）。最終的には、アプリケーションソースに存在するルート構成から生成されます。

したがって、プロジェクトのルートにngsw-manifest.jsonを作成すると

{
  "routing": {
    "routes": {
      "/": {
        "prefix": false
      }
    },
    "index": "/index.html"
  }
}

私たちはhttp：// localhost：4200 /に行くと、 http：// localhost：4200 / index.htmlにリダイレクトする必要があります。

ルーティングの詳細については、 公式のドキュメントをこちらからお読みください

ここでは、サービスワーカーに関するその他のドキュメントを見つけることができます：

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://docs.google.com/document/d/19S5ozevWighny788nI99worpcIMDnwWVmaJDGf_RoDY/edit#

SW precacheライブラリを使用してサービスを実装する別の方法を見ることができます。

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers