VuetifyとPWAで色々やったときの備忘録

とりあえず

Vueプロジェクトの作成

$ vue create the-simplist

Vuetify、PWAの準備

$ vue add vuetify
$ vue add pwa

manifest.jsonの追加

/publics配下にmanifest.jsonを追加

{
  "name": "the-simplist",
  "short_name": "the-simplist",
  "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": "./index.html",
  "display": "standalone",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

firebaseにデプロイ

$ firebase init

上記コマンドを実行後、以下の手順で進む。

• Hostingを選択
• Use an existing projectを選択
• 対象プロジェクト名を選択
• What do you want to use as your public directory? distと回答
• Configure as a single-page app (rewrite all urls to /index.html)? Yesと回答 ✔ Firebase initialization complete! とでてきたら完了

ワークフォルダでビルド実行

$ npm run build

firebaseへデプロイ実行

$ firebase deploy

動作確認

スマホからアクセスしてみた。

• ホーム画面追加のダイアログ
  

• ホーム画面のアイコン
  

• PWAで起動している画面
  

• PWA化されたサイトの画面
  

ネィティブっぽくていいかんじ。