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版では簡易なWebサーバーhttp-serverをローカルにインストールしhttp-serverをdist/（ビルドファイルの吐き出し先）を見るように立ち上げて確認している。

そのやり方は以下の通り。

どのディレクトリからでもいいので次のコマンドで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のプレビュー版が利用可能に！