[ 目次 ]

• はじめに
• "@vue/pwa"モジュール追加
• "manifest.json"の修正
• 確認
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。以前にNuxt.jsで構築した本ブログをPWA対応する方法を記事にしましたが、今回はVue CLI 3のプロフィールサイトをPWA化していきたいと思います。

https://jp.vuejs.org/2018/08/11/vue-cli-3-0-is-here/

こちらのページを見ていて、やってみようと思った次第です。

"@vue/pwa"モジュール追加

既にVue CLI 3のプロジェクトが作成されている前提です。
以下のコマンドからモジュールを追加します。

$ vue add @vue/pwa

必要となるファイルが生成されます。
public/img/iconsディレクトリ配下に環境ごとのアイコン画像があります。デフォルトだとVueのアイコン画像になっているので、適した画像に変更しましょう。

"manifest.json"の修正

今回は以下のようにしました

{
  "name": "なかむ🇭🇰プロフィール", // サイトの名称
  "short_name": "なかむ🇭🇰プロフィール", // サイトの名称
  "icons": [
    {
      "src": "/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/", // サイトURI
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#ff5f5f"
}

@vue/cli-plugin-pwa のページにあるように "vue.config.js" のpwa設定でサイト名やアイコンなど変更できるようなのですが、反映されず "manifest.json" を直接いじってしまいました・・・

確認

確認方法は、以前の「Nuxt.jsで作った本ブログをPWA化する 」と同様に、iPhone + Safariからホーム画面に追加して試します。

最後に

今回は、Vue CLI 3 のPWA対応していきました。
Nuxt.jsの対応時にも記載しましたが、不足点がまだまだある認識です。
ノウハウが蓄積される毎にアップデートしていければと思います。