概要
すでに作成されているVue.jsのアプリケーションをPWA対応した際の覚書です。
目的
ホーム画面にPWAとして追加できるようにする。
- push通知とかは特に考えていない
環境
| key | value |
|---|---|
| macOS | Mojave 10.14.6 |
| vue | 2.5.18 |
| vue-cli | 3.0.5 |
パッケージの追加
vue add @vue/pwa
これでpwa対応に必要な設定やファイルをよしなに作ってくれる。
manifest.jsonの追加/修正
なぜかmanifest.jsonを追加してくれなかったの下記サイトで作成。public以下に配置。
アイコンも作成されるので、public/images/icons/*.pngとなるように配置。
生成されたやつをちょっと修正。
manifest.json
- "display": "browser",
+ "display": "standalone",
- "start_url": "/",
+ "start_url": "./index.html",
index.htmlの修正(iOS safari対応)
iOS版safariではこの記述を入れないとmanifest.jsonを読み込んでくれないらしい。
index.html
<meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="manifest" href="manifest.json" />
+ <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.10/pwacompat.min.js"
+ integrity="sha384-I1iiXcTSM6j2xczpDckV+qhhbqiip6FyD6R5CpuqNaWXvyDUvXN5ZhIiyLQ7uuTh"
+ crossorigin="anonymous"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
結果
build&deploy(自分の場合はfirebase)して、ホーム画面に追加するとPWAとして動作するを確認できました。