Angular CLI 1.6 で PWA を作ってみよう！

この記事はAngular Advent Calendar 2017の22日目の記事です。

##※ 注意 ※
記事の情報が古くなっています。

Angular CLI 6.0.0以降をお使いの場合は「Angular CLI v6でPWAを作ってみよう！」を参照してください。

##はじめに

Angular CLIは今やAngularを使ったSPA開発には欠かすことのできないものです。

Angular CLI 最新版では、

• Service Worker
• Universal (SSR)
• App Shell
  がサポートされているのでPWA¹を作るのも簡単になりました。

早速やってみましょう

1. Angular CLIのインストール

Angular CLIをインストールしましょう。
※ 執筆時点では 1.6.1 が最新

$ npm install -g @angular/cli

2. 新規アプリ作成

ng newで新しいアプリを作ります。

$ ng new my-app --routing --service-worker

--service-workerオプションを付けると自動でService Workerが組み込まれます。

3. @angular/platform-serverのインストール

アプリが生成されたディレクトリに移動して、

$ cd my-app

npmで@angular/platform-serverをインストールします。

$ npm install @angular/platform-server --save

4. Universal用のファイル生成

Angular CLI 1.6からSchematicsにUniversalが追加されました。

$ ng generate universal my-universal-app

これだけでUniversal用のファイル生成と.angular-cli.jsonの設定をやってくれます。
以前と比較すると非常に簡単になりましたね！

5. App Shellの生成

App ShellはUIが機能するために必要な最小限のHTML/CSS/JavaScriptです。アプリのロード中に表示するプレースホルダーとして利用することで、アプリが起動するまでの体感スピードを上げることができます。

下記のコマンドで生成可能です。

$ ng generate app-shell shell --universal-app=my-universal-app

パスはデフォルトで/shellとなりますが、--routeオプションで変更可能です。

パスを変更する場合

$ ng generate app-shell shell --universal-app=my-universal-app --route=my-path 

6. もうちょっとPWAっぽくする

このままでも良いのですが、manifest.jsonが無かったりApp Shellが空っぽだったりするのでちょっとイマイチですね...

https://github.com/puku0x/angular-pwa-sample を参考に

• manifest.json 追加
• ランチャー用アイコン 追加

と手を加えてみましょう。

この他、アプリの見た目が気になる場合は

• Angular Material 追加
• App Shellにプログレスバー 追加

などすると良いと思います。

「とりあえず動作確認したいだけ」という場合は省略してOKです。

7. ビルド

いつもと同じようにビルドします。特別なことはしません。

$ ng build --prod

8. ブラウザで表示

アプリをブラウザで表示してみましょう。

$ npx pushstate-server ./dist

サーバ起動後、ブラウザでlocalhost:9000を開くと表示されます。

9. 比較

何もしていないときと比べて表示速度がどれだけ改善されたか見てみましょう（ここからプレビューできます）。Chromeの開発者ツール等で回線速度を3Gに設定すると比較しやすくなると思います。

PWA化前は↓こんな感じです。 [ソース]

ツールバーが表示される（First Paint）まで約2000msといったところでしょうか。

App Shellを組み込むと、

約1500msに短縮されます。

さらに、Service Workerが登録されキャッシュが有効になると、

アイコンが表示される（First Meaningful Paint）まで含めて約500msになります。

かなり高速化できましたね

まとめ

最新のAngular CLIではPWA実装が非常に簡単になりました。

2017年はPWA元年らしいので、皆さんもこれを機にPWAデビューしてみましょう まだ間に合います！

@angular/service-workerについては今回はキャッシュ用途のみでしたが、アプリの更新監視やプッシュ通知などもあるので今後活用していきたいところです。

今回のサンプルはここからダウンロードできます。

明日はic_lifewoodさんです！

参考URL

https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e
https://blog.angular-university.io/angular-app-shell/

1. Googleが提唱するProgressive Web Appsの略。Webアプリにネイティブアプリ並のUXを提供する。 ↩