ServiceWorker
Angular5
@tomy0610

Angular5でService Workerを導入してみた

ServiceWorkerAngular5

概要

  • 新規のアプリケーションに対してService Workerを導入する手順について説明する
  • 既存のアプリケーションに導入する場合は、公式チュートリアル の「既存のアプリケーションにService Workerを追加する」を参照のこと。

Service Worker とは

雑に言うと、Service Worker（サービスワーカー）は、Webブラウザで実行され、アプリのキャッシュを管理するスクリプトのこと。

従来のWebアプリに対して、スマートフォンのネイティブアプリの様なユーザー体験（オフラインでも動く、PUSH通知する・・・などなど）をできるようにする仕組み。

Angularは「Angular Service Worker」と称し、特にService Workerを提供することに対して強い責任感とパフォーマンスをコミットしている様子。

Angular とは

今更ですが、Angular とは、JavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワーク。開発時の使用言語は、JavaScriptも当然使えるが、TypeScript が推奨とされている。
2019年10月現在の最新バージョンは「Angular6」

似たような並びに「React.js」「Vue.js」などがある。
これらのどれが一番良いかはよく議論の対象になるが、正直「好みの問題」であり、厳密には目的がそれぞれ違うので一概には言えない。

「React.js」はFacebook、「Angular」はGoogleと、大手が開発している謎の安心感がある。「Vue.js」は企業ではなく個人が開発し、人気が増えていったF/W。

前提条件

  • Node.js がインストールされていること
  • angular-cli がインストールされていること
  • angular-cli のバージョンが、Angular5が作成可能なバージョン(1.7.x)になっていること（Angular5から Service Worker のサポートが有効になったため）
    • angular-cli のバージョン確認は以下でできる。
ng -v
  • 簡易サーバ起動用にnpmのhttp-serverを入れておく（任意）
npm i -g http-server

プロジェクト作成

  • 任意のディレクトリを作成して、その中に移動し、新規アプリプロジェクトを生成
新規プロジェクト生成
ng new 任意のプロジェクト名 --service-worker --routing=true

モジュールのインストール（npm install）まで行うため、処理完了までに 3~4分ほどかかる

  • オプション
    • --service-worker：Service Workerを使うために必要なファイルをアプリケーションに設定
    • --routing：ルーティングモジュール付きで生成する場合： true（falseの場合は省略可）

動作確認

  • 作成したディレクトリに移動し、ビルドする
cd 作成したプロジェクト名
ng build
  • Webファイルが入っているディレクトリに移動し、簡易Webサーバ起動
cd dist
http-server -p 8080

※ ng serve はService Workerと連携しないので、起動テストするためには、別のHTTPサーバーを使用する必要があり、今回はnpmのhttp-serverを使用。

  • Webプラウザをプライベートモードもしくはシークレットモード等で起動し、http://localhost:8080 でAngularテストページが表示されたら成功。Ctrl + C でサーバ終了。

※ Angular Service Workerをテストする時は、以前の状態が残存していると、Service Workerが読み取ったときに予期しない動作を引き起こし終了する可能性があるため、ブラウザでシークレットウィンドウまたはプライベートウィンドウを使うことが推奨されています。

何がキャッシュされているのか？

Webブラウザがアプリをレンダリングするために必要な全てのファイルがキャッシュされていることに注意する。
src/ngsw-config.json の設定は、クライアントが使用する特定のリソースをキャッシュするように設定されている。

  • index.html
  • favicon.ico
  • ビルド成果物（JSおよびCSSバンドル）
  • assets の下にあるもの

とりあえず以上。（また追記するかもしれません）

Edit request
0