Angular/React/VueでのPWAの始め方
今回は有名どころのWebフロントエンドフレームワークにおけるPWAの導入方法です。結論から言えば、新規アプリであれば導入は難しくなさそうです。
Angular
Angular CLIを使うのが基本です。まずAngular CLIをインストールします。
| npm i -g @angular/cli |
ついでAngularアプリを作成します。
| ng new hello –routing |
そして作成したAngularアプリの中で、 @angular/pwa を追加します。
| hello | |
| ng add @angular/pwa –project=hello |
これでPWA対応が完了します。なお、開発用サーバの時点ではmanifest.jsonは確認できません。 ng build でビルドする必要があります。
React
幾つかのテンプレートがPWAに対応しています。一番手軽なものとしては、 create-react-app コマンドによるものです。
| npm install -g create-react-app |
これで使えるようになる create-react-app コマンドで作ったReactアプリはPWAに対応しています。
| create-react-app hello | |
| cd hello | |
| yarn start |
これでPWAが使えるReactアプリができあがっています。なお、yarn start 、 yarn build のどちらでもmanifest.jsonが生成されています。
他にもpaulhoughton/react-pwaやpaulhoughton/preact-pwa、localnerve/react-pwa-referenceといったテンプレートが作られています。
Vue
VueはVue CLIを使ってアプリを作成することが多いでしょう。
| npm install -g @vue/cli |
まずプロジェクトを作成します。
| vue create hello |
プロジェクト内で vue add を実行します。
| cd hello | |
| vue add @vue/pwa |
これでPWA対応が完了です。なお、Vueアプリの場合も開発サーバではmanifest.jsonが確認できません。ビルドした際だけ表示されます。
最近のWebフレームワークであれば、PWA対応はとても簡単になっています。バージョンが古いこともある既存のプロジェクトにおいては導入は難しそうですが、新規開発であればPWAの導入はさほど難しくないでしょう。
コメントは受け付けていません。