Help us understand the problem. What is going on with this article?

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

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

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

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

Angular CLI

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

Angular CLIのインストール

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

https://nodejs.org

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を組み込む

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

ng add @angular/pwa

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

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

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

App Shellを組み込む(任意)

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化前は↓こんな感じです。 [ソース]

PWA化前

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

App Shellを組み込むと、

PWA化後

約1500msに短縮されます。

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

PWA化後(Service Workerキャッシュ有効)

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

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

おわりに

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

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

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

参考

https://angular.io/guide/service-worker-getting-started
https://angular.io/guide/app-shell
https://github.com/puku0x/angular-pwa-sample


  1. Webアプリにネイティブアプリ並のUXを提供するもの。Googleが提唱している。 

puku0x
Front-end engineer, ng-fukuoka organizer, Ph.D. in Engineering
https://github.com/puku0x
vega-c
家具・インテリア等のインターネット通信販売事業、越境ECプラットフォームの運営等
https://www.vega-c.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした