More than 3 years have passed since last update.

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

Last updated at 2020-06-28Posted at 2018-06-18

2020/06/29 Angular CLI v10 に対応しました

2018年のng-japanでも PWA（Progressive Web App¹）が取り上げられましたね！
対応ブラウザも増えてきて、PWAは最近かなり注目されていると思います。

Angular CLIを使えば比較的簡単にPWAを作成できます。早速やってみましょう！

※ 本記事は「Angular CLI 1.6 で PWA を作ってみよう！」を加筆修正したものです
※ 記事中のソース及びコマンドはAngular CLI v10系を対象としています。
※ 最終的な成果物はこちら→ https://github.com/puku0x/angular-pwa-sample

Angular CLIのインストール

最新のAngular CLIはNode.js v10以降のみ対応しています。

Node.jsのバージョンがv10よりも古い、または未インストールの場合は上記のページにアクセスしてインストールしてください（nvmやnodebrew等のツールを利用してもOK）。

Node.jsをインストール後、下記コマンドでAngular CLIをインストールしてください。

$ npm i -g @angular/cli

新しいプロジェクトを作成します。

$ ng new my-app --routing --style=scss

プロジェクトができたら、次のステップに向けて作業ディレクトリに移動しましょう。

$ cd my-app

下記のコマンドを実行してService Workerを組み込みましょう。

ng add @angular/pwa

プロジェクトが複数ある場合は、下記のように指定します。

ng add @angular/pwa --project=my-app

@angular/pwaを追加すると、Service Worker以外にもmanifest.webmanifestやアイコン等、PWAとして機能させるのに必要ファイル一式が作成されます。

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

下記のコマンドを実行するとApp Shellが生成されます。

$ ng g app-shell --client-project=my-app

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

パスを変更する場合

$ ng g app-shell --client-project=my-app --route=my-path

ng runでビルドします。

$ ng run my-app:app-shell --configuration=production

作成したアプリを確認してみましょう。

$ npx node-static ./dist/my-app/browser --spa --port=9000

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

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

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

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

App Shellを組み込むと、

約1500msに短縮されます。

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

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

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

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

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

皆さんもこれを期にAngularでPWAを作ってみましょう！