【15分でできる！】既存のVue.jsアプリをPWA化して、スマホの画面にアイコンを表示する方法(Android & IOS)

##やりたいこと
Vueで作ってしまったアプリケーションをPWAにしたい。初めから、PWAにするって決めていれば、[vue-pwa-boilerplate](https://github.com/vuejs-templates/pwa)を使えば簡単なのですが、今回は既存アプリをPWA化してみました。


##バージョンなど
```
node 8.9.4
npm 5.6.0
vue 2.9.6
firebase 6.2.2
```


プロジェクト用に作成したディレクトリ内で

```
・npm install -g vue-cli
・vue init webpack my-project

? Project name <Project name>
? Project description <description>
? Author <Author name>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

$ cd my-project
$ npm run dev
```

<img width="585" alt="スクリーンショット 2019-01-09 1.08.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/243062/04cbd736-37f9-b38a-3c6a-ede466d8c3b7.png">

##デプロイはこちら
https://qiita.com/tomokitk/private/7ad4e475a808da0291ca

この状態で、生成されたURLをスマホで開いて、ホーム画面に追加しても
![Screenshot_20190109-012519.jpg](https://qiita-image-store.s3.amazonaws.com/0/243062/9c279702-1c8c-ab08-a96b-8d206a768101.jpeg)




##PWA化して、スマホの画面にネイティブアプリっぽいアイコンをつける

1. manifest.jsonを作成し、static配下に配置する。また、iconsのイメージファイルもstaticに配置する。

・short_name: ユーザーのホーム画面でテキストとして使用
・name: ウェブアプリのインストールバナーに使用
・background_color:スプラッシュ画面(アプリが起動するまでの画面)の背景色
・theme_color:ツールバーの色
・display:表示形式の設定
"start_url": アプリ起動時のURL
・icons:スマホに表示されるアプリアイコンに使用
（今回はVue.jsにデフォルトで入っているVueのイメージを使います）

```manifest.json
{
"name": "VuePWATEST",
"short_name": "vuePWA",
"theme_color": "#14ce00",
"background_color": "#14ce00",
"display": "standalone",
"start_url": "https://vuepwatest.firebaseapp.com/",
"icons": [
    {
        "src": "/static/images/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    },
    {
        "src": "/static/images/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    },
    {
        "src": "/static/images/icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
    },
    {
        "src": "/static/images/icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    },
    {
        "src": "/static/images/icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
    },
    {
        "src": "/static/images/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "/static/images/icons/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    },
    {
        "src": "/static/images/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
    ]
  }
```
これを使うとmanifest.jsonが簡単に作れます。
https://app-manifest.firebaseapp.com/


2.index.htmlのheadタグ内で、manifest.jsonを定義

```index.html
<!DOCTYPE html>
<html>
　　　　<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="manifest" href="static/manifest.json">

    <!-- IOSでアイコンを表示されるために以下追加 -->
    <link rel="manifest" href="manifest.webmanifest" />
    <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"
    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"
    crossorigin="anonymous"></script>
    <title>vue-pwa</title>
　　　　</head>
  <body>
      <div id="app"></div>
      <!-- built files will be auto injected -->
  </body>
</html>

```
manifest.jsonを呼んだだけでは、IOSのsafariの場合、pwa化してもアイコンが出ないので、
PWACompatを使いました。
(https://developers.google.com/web/updates/2018/07/pwacompat)

以上！
あとは、　

```
npm run build

firebase delploy
```

してから、もう一度デプロイ時に生成されたURLをスマホで展開し、ホーム画面に追加する。

すると、manifest.jsonで設定したアイコンでホーム画面に追加できるようになります。
![Screenshot_20190109-015012.jpg](https://qiita-image-store.s3.amazonaws.com/0/243062/a8add6f6-671a-b85c-1560-5606e0d07e7c.jpeg)