Angular/React/VueでのPWAの始め方
今回は有名どころのWebフロントエンドフレームワークにおけるPWAの導入方法です。結論から言えば、新規アプリであれば導入は難しくなさそうです。
Angular
Angular CLIを使うのが基本です。まずAngular CLIをインストールします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm i -g @angular/cli |
ついでAngularアプリを作成します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ng new hello –routing |
そして作成したAngularアプリの中で、 @angular/pwa
を追加します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hello | |
ng add @angular/pwa –project=hello |
これでPWA対応が完了します。なお、開発用サーバの時点ではmanifest.jsonは確認できません。 ng build
でビルドする必要があります。
React
幾つかのテンプレートがPWAに対応しています。一番手軽なものとしては、 create-react-app
コマンドによるものです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install -g create-react-app |
これで使えるようになる create-react-app
コマンドで作ったReactアプリはPWAに対応しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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を使ってアプリを作成することが多いでしょう。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install -g @vue/cli |
まずプロジェクトを作成します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
vue create hello |
プロジェクト内で vue add
を実行します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cd hello | |
vue add @vue/pwa |
これでPWA対応が完了です。なお、Vueアプリの場合も開発サーバではmanifest.jsonが確認できません。ビルドした際だけ表示されます。
最近のWebフレームワークであれば、PWA対応はとても簡単になっています。バージョンが古いこともある既存のプロジェクトにおいては導入は難しそうですが、新規開発であればPWAの導入はさほど難しくないでしょう。
コメントは受け付けていません。