【Vue-cli】PWA プロジェクトを作ってみる

Web アプリケーションでありながらネイティブアプリケーションのような動作をさせることができる PWA（Progressive Web Apps）が最近注目されています。

Vue-cli のプロジェクト作成コマンド「vue create xxxx」でも「PWA にする？」のように聞かれるので、PWA プロジェクトを簡単に作成できるようです。

今回は vue create で PWA プロジェクトとそうでないプロジェクトを作って、その差分を確認してみたいと思います。

私自身、PWA についてほぼ知らないので差分についての解説はできません。ちょっと観察してみただけです。

プロジェクトを作成する

PWA じゃないプロジェクトを作る

まず、 PWA ではないプロジェクトを作成します。vue create 時の設定は次のようにしました。

C:\yyama>vue create non-pwa-project

Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

出来上がったプロジェクトのフォルダ／ファイル構成はこうです。

C:.
│  .browserslistrc
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  postcss.config.js
│  README.md
│  
├─public
│      favicon.ico
│      index.html
│      
└─src
    │  App.vue
    │  main.js
    │  
    ├─assets
    │      logo.png
    │      
    └─components
            HelloWorld.vue

PWA プロジェクトを作成

次に、 PWA プロジェクトを作成してみたいと思います。次のような設定で vue create してみました。

C:\yyama>vue create pwa-project

Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

PWA サポートにチェックを入れて作成しました。

作られたプロジェクトのフォルダ／ファイル構成はこうなりました。

C:.
│  .browserslistrc
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  postcss.config.js
│  README.md
│  vue
│  
├─node_modules
├─public
│  │  favicon.ico
│  │  index.html
│  │  manifest.json
│  │  robots.txt
│  │  
│  └─img
│      └─icons
│              android-chrome-192x192.png
│              android-chrome-512x512.png
│              apple-touch-icon-120x120.png
│              apple-touch-icon-152x152.png
│              apple-touch-icon-180x180.png
│              apple-touch-icon-60x60.png
│              apple-touch-icon-76x76.png
│              apple-touch-icon.png
│              favicon-16x16.png
│              favicon-32x32.png
│              msapplication-icon-144x144.png
│              mstile-150x150.png
│              safari-pinned-tab.svg
│              
└─src
    │  App.vue
    │  main.js
    │  registerServiceWorker.js
    │  
    ├─assets
    │      logo.png
    │      
    └─components
            HelloWorld.vue

比較してみる

フォルダ／ファイルを比較した結果です。

***** PWA
│  README.md
│  vue
│
***** NON PWA
│  README.md
│
*****

***** PWA
├─public
│  │  favicon.ico
│  │  index.html
│  │  manifest.json
│  │  robots.txt
│  │
│  └─img
│      └─icons
│              android-chrome-192x192.png
│              android-chrome-512x512.png
│              apple-touch-icon-120x120.png
│              apple-touch-icon-152x152.png
│              apple-touch-icon-180x180.png
│              apple-touch-icon-60x60.png
│              apple-touch-icon-76x76.png
│              apple-touch-icon.png
│              favicon-16x16.png
│              favicon-32x32.png
│              msapplication-icon-144x144.png
│              mstile-150x150.png
│              safari-pinned-tab.svg
│
***** NON PWA
├─public
│      favicon.ico
│      index.html
│
*****

***** PWA
    │  main.js
    │  registerServiceWorker.js
    │
***** NON PWA
    │  main.js
    │
*****

PWA プロジェクトはいくつかファイルが多いのに気づきます。

まず、プロジェクトフォルダ直下に vue というファイルがあります。中身は空っぽです。

あと、public フォルダに manifest.json 、robots.txt があります。

icon にはAndroid、iPhone、safari など各ブラウザ用のアイコンが格納されています。

src フォルダ配下には register-service-worker というファイルがありました。

これらのファイルが PWA アプリケーションには必要になるということが理解できたと思います。
（前述のとおり、何のためのファイルなのかは、知りませんｗ。今後勉強していきたいと思います。）