コンテンツへスキップ
Tags

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

by : 2018/08/30

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

Angular

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

npm i -g @angular/cli

view raw
index.sh
hosted with ❤ by GitHub

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

ng new hello –routing

view raw
index.sh
hosted with ❤ by GitHub

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

hello
ng add @angular/pwa –project=hello

view raw
index.sh
hosted with ❤ by GitHub

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

React

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

npm install -g create-react-app

view raw
index.sh
hosted with ❤ by GitHub

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

create-react-app hello
cd hello
yarn start

view raw
index.sh
hosted with ❤ by GitHub

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

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

Vue

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

npm install -g @vue/cli

view raw
index.sh
hosted with ❤ by GitHub

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

vue create hello

view raw
index.sh
hosted with ❤ by GitHub

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

cd hello
vue add @vue/pwa

view raw
index.sh
hosted with ❤ by GitHub

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


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

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。