Angular8を使って爆速でPWAを作成する

岡 春奈

2019.08.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Angularはアップデートが盛んでワクワクしますね！
v8からめちゃめちゃ簡単にAngularアプリをPWA化できるようになったので試してみたいと思います。

Angular8のアップデート内容はこちらの記事でまとめられているので、参考にしてください。

Angular v8がリリースされました！バンドルサイズ削減され、新レンダリングエンジンIvyのプレビュー版が利用可能に！

PWAのメリット

PWA（Progressive Web Apps）

  • インストール不要
  • webプッシュ通知（Androidのみ）
  • オフラインでの動作
  • ネイティブアプリに近いUI

これによりUXを向上させることが期待できます！
また、PWA未対応のブラウザであっても、webアプリとしての動作は可能です。

ストアに上げる必要も無いのでアップデートの度に審査を通す必要もなく、開発の自由度も上がりますね。

PWA化に必要な作業

  • Service Workerの追加
  • manifest.jsonの追加

  • Firebaseの設定（プッシュ通知をする場合）

環境

Angular CLI: 8.3.2
Node: 10.16.3
OS: linux x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.2
@angular-devkit/core         8.3.2
@angular-devkit/schematics   8.3.2
@schematics/angular          8.3.2
@schematics/update           0.803.2
rxjs                         6.4.0

やってみる

プロジェクト作成

$ ng new angular-pwa
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

パッケージ追加

ng add @angular/pwa --project angular-pwa

実行すると、以下の操作を行います。

  • @angular/service-worker の追加
  • CLIでService Workerのビルドサポートを有効化
  • アプリケーションモジュールにService Workerをインポー
  • index.html の更新
    • manifest.webmanifest リンクの追加
    • theme=color のメタタグを追加

これだけでPWAになってます。

App shellの生成

パフォーマンスを上げるためにApp shellを生成します。
これもngコマンドで実行できます。

$ ng generate app-shell --client-project angular-pwa --universal-project angular-pwa

実行すると、 angular.json が更新されて server と app-shell の列が追加されます。

ビルド

ng run angular-pwa:app-shell

dist配下に {project-name}-server のディレクトリが作成されています。

動作確認

$ http-server -p 8080 -c-1 dist/angular-pwa

今回作成したものはこちらです。

デフォルトのwelcomeページですが、スマホで動作を確認してみて下さい。

ソースコード

Github

AWS