##やりたいこと
Vueで作ってしまったアプリケーションをPWAにしたい。初めから、PWAにするって決めていれば、vue-pwa-boilerplateを使えば簡単なのですが、今回は既存アプリを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

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

この状態で、生成されたURLをスマホで開いて、ホーム画面に追加しても

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

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で設定したアイコンでホーム画面に追加できるようになります。