Angular/React/VueでのPWAの始め方

今回は有名どころのWebフロントエンドフレームワークにおけるPWAの導入方法です。結論から言えば、新規アプリであれば導入は難しくなさそうです。

Angular

Angular CLIを使うのが基本です。まずAngular CLIをインストールします。

ついでAngularアプリを作成します。

そして作成したAngularアプリの中で、 @angular/pwa を追加します。

これでPWA対応が完了します。なお、開発用サーバの時点ではmanifest.jsonは確認できません。 ng build でビルドする必要があります。

React

幾つかのテンプレートがPWAに対応しています。一番手軽なものとしては、 create-react-app コマンドによるものです。

これで使えるようになる create-react-app コマンドで作ったReactアプリはPWAに対応しています。

これでPWAが使えるReactアプリができあがっています。なお、yarn start 、 yarn build のどちらでもmanifest.jsonが生成されています。

他にもpaulhoughton/react-pwaやpaulhoughton/preact-pwa、localnerve/react-pwa-referenceといったテンプレートが作られています。

Vue

VueはVue CLIを使ってアプリを作成することが多いでしょう。

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

プロジェクト内で vue add を実行します。

これでPWA対応が完了です。なお、Vueアプリの場合も開発サーバではmanifest.jsonが確認できません。ビルドした際だけ表示されます。

最近のWebフレームワークであれば、PWA対応はとても簡単になっています。バージョンが古いこともある既存のプロジェクトにおいては導入は難しそうですが、新規開発であればPWAの導入はさほど難しくないでしょう。