概要

すでに作成されている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となるように配置。

App Manifest Generator

生成されたやつをちょっと修正。

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として動作するを確認できました。

成果物

アプリ

umaaji-calculator

PR

Feature/#36 PWA対応

参考