Angular5にService Workerを導入してみた

概要

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

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

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

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

似たような並びに「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 i -g http-server

新規プロジェクト生成

ng new 任意のプロジェクト名 --service-worker --routing=true

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

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

cd 作成したプロジェクト名
ng build

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 の設定は、クライアントが使用する特定のリソースをキャッシュするように設定されている。

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