##やりたいこと
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のイメージを使います）
{
"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を定義
<!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で設定したアイコンでホーム画面に追加できるようになります。
