Angular8でPWAを導入しIvyのパフォーマンスを検証
現在(11/19, 2019)、Angularのバージョン8.2.14。これでPWAアプリを作るための新規プロジェクト作成手順を。
※なおPWAとService Workerのナレッジと動作確認方法はこの本を参考にした。
AngularによるモダンWeb開発 基礎編 第2版
前提確認：必要なもの
サーバー側に、
- https通信
- HTTP/2プロトコル対応
- HTTP/2圧縮
が必要だがFirebase Hostingで問題ない。
「本日（2016年10月5日）は Firebase Hosting で HTTP/2 が利用できるようになった…略…、Firebase Hosting で HTTP/2 を利用するために必要なことは何もありません。*」[Firebase Hosting が HTTP/2 に対応]
ローカルで試す場合、
-- HTTPSいらない --
「例外として開発時に利用するhttp://localhostからはhttp通信でServer Workerを利用可能」
node, npm はインストール済み。
$ node --version
v10.15.3
$ nmp --version
6.4.1
Angularプロジェクトを作成。
- 下記コマンドでAngular CLIをインストール
$ npm install -g @angular/cli@latest
- プロジェクトフォルダに移動し新しいプロジェクトを作成
$ ng new my-app --routing --style=scss
最後に、Successfully initialized git.と出力されていれば成功。
- プロジェクトができたら、プロジェクトフォルダに移動。
$ cd my-app
-
ng --versionでバージョンを確認。
$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 7.1.4
Node: 10.15.3
OS: win32 x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.11.4
@angular-devkit/build-angular 0.11.4
@angular-devkit/build-optimizer 0.11.4
@angular-devkit/build-webpack 0.11.4
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@ngtools/webpack 7.1.4
@schematics/angular 7.1.4
@schematics/update 0.11.4
rxjs 6.3.3
typescript 3.1.6
webpack 4.23.1
ア、アレ？バージョン７・・・。
何度最初からやってもこうなるので仕方なく次のコマンドでアップグレードする。
$ ng update @angular/cli @angular/core
バージョン確認。
$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.19
Node: 10.15.3
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.19
@angular-devkit/build-angular 0.803.19
@angular-devkit/build-optimizer 0.803.19
@angular-devkit/build-webpack 0.803.19
@angular-devkit/core 8.3.19
@angular-devkit/schematics 8.3.19
@angular/cli 8.3.19
@ngtools/webpack 8.3.19
@schematics/angular 8.3.19
@schematics/update 0.803.19
rxjs 6.5.3
typescript 3.5.3
webpack 4.39.2
オケ。
Service Workerをインストール
以下のコマンド。
$ ng add @angular/pwa --project=my-app
インストールしたらプリフェッチ機能（デフォルトでassets内のすべてのファイル、app直下のindex.html、すべてのCSSファイル、.JSファイルをプリフェッチしてくれるよう設定されている）をngsw-config.jsonファイルで確認してみる。
ngsw-config.jsonでプリフェッチを設定。デフォルトの状態。
App Shellインストール（任意）
App Shellてなんだ？ 任意だが調べてみる。
「ネイティブ アプリのように瞬時に、そしてネットワーク環境に依存せず確実に読み込めるPWA を構築するアーキテクチャの一つ。
これがどういうものかというと、まずアプリケーションを構築する静的なパーツであるナビゲーション等を予めレンダリングして index.html に組み込んでおきます。（表現方法を変えると、アプリケーションの一部分をプリレンダリングしているということです）
ユーザーはアプリケーションが瞬時に応答したと認識し体感レスポンスが向上します」SSR の知識ゼロから始める Angular Universalより。
…要はロードが早くなるようだ。しかしGetting Started With App Shell Using Angularによるとロード時間755msが711msに改善。たいして変わらない。わたしはやめておく。入れたい場合は以下のコマンド。
$ ng generate app-shell --clientProject=my-app --universalProject=my-app
Materialを使いたいのでインストール。
$ ng add @angular/material
以下の様に聞かれたらthemeは好きなものを選んでエンター。
? Choose a prebuilt theme name, or "custom" for a custom theme:
Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ]
Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
Purple/Green [ Preview: https://material.angular.io?theme=purple-green ]
> Custom
参考：
Indigo/Pink Deep Purple/Amber
Pink/Blue Grey Purple/Green
とりあえずCustomにしておく。
次の質問は
両方とも Y を入力してエンター。
? Set up HammerJS for gesture recognition? Y
? Set up browser animations for Angular Material? (Y/n) Y
ビルド方法
以下のコマンドでまずビルド。
$ ng build --prod --output-path=dist --delete-output-path=true
App-shell入れてたら以下のコマンドでビルド（App-shell入れてても上のコマンドでApp-shell使わないビルドはできる）
$ ng run my-app:app-shell
ビルドが完了するとdistフォルダができてる。この中にコンパイルされたファイル群がある。index.htmlもある。
App-shellビルドした場合はdist/＜ProjectName＞というフォルダができて、その中にファイル群がある。
動作確認
PWA開発には以下の制限あり
1. ng serveコマンドで動作確認できない
2. Production用のビルドを行わないと動作確認できない
上記書籍AngularによるモダンWeb開発 基礎編 第2版
そのやり方は以下の通り。
- どのディレクトリからでもいいので次のコマンドでhttp-serverをインストール。
$ npm install -g http-server
- そしたら、プロジェクトルートのフォルダに移って、次のコマンドでhttp-serverを起動。
$ http-server ./dist -p9000 -c-1 -o
./dist : distフォルダをルートディレクトリに
-p3000 : port番号を9000に指定
-c-1 : キャッシュを消してから起動
-o : ブラウザを開く
初期画面が勝手に開く。
- より簡単な方法 つぎのコマンド
$ npx node-static ./dist --spa --port=9000
これでも同じ。
初期画面をhttp://127.0.0.1:9000/ にアクセスして開く。
F12を押してChromeデベロッパー・ツールを開く（Macの場合はCommand＋Option＋Iキー）。
ApplicationをクリックするとService Workerがあるのが見える。そしてグリーンのランプがついていて、Status activated and runningとなっている。良さそうだ。
Networkをクリックしてページをリロードしてみる。するといろいろなファイルがService Workerからプリフェッチされているのがわかる。
Ivyのパフォーマンスを検証する
Angular8ではデフォルトではIvyはオフになっている。
Ivyなしでのパフォーマンス
distフォルダのサイズは1,092,046 バイト
Ivyありでのパフォーマンス
オンの仕方。
以下のファイルを編集
//tsconfig.json
{
"compilerOptions": { ... },
"angularCompilerOptions": {
"enableIvy": true
}
}
キャッシュをクリアしてロード。
Scriptingが614mgから436mgに大幅に改善。
distフォルダのサイズは1,081,833 バイト。これはほとんど変わらん。
以上。
参考：
Angular CLI v8でPWAを作ってみよう！
Getting Started With App Shell Using Angular
Angular v8がリリースされました！バンドルサイズ削減され、新レンダリングエンジンIvyのプレビュー版が利用可能に！