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

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

More than 1 year has passed since last update.

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

※ 注意 ※

記事の情報が古くなっています。

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

はじめに

image.png

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

Angular CLI 最新版では、
- Service Worker
- Universal (SSR)
- App Shell
がサポートされているのでPWA1を作るのも簡単になりました。

早速やってみましょう:grinning:

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が空っぽだったりするのでちょっとイマイチですね...:sweat_smile:

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

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

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

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

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

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

7. ビルド

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

$ ng build --prod

8. ブラウザで表示

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

$ npx pushstate-server ./dist

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

9. 比較

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

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

PWA化前

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

App Shellを組み込むと、

PWA化後

約1500msに短縮されます。

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

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

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

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

まとめ

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

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

@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を提供する。 

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
ユーザーは見つかりませんでした