Mulesブログ

不動産業界に特化した業務効率化アプリ開発チームMulesのアカウントです。

Vuejs(QuasarFramework) + FirebaseでPWAを作成する

概要

Vuejs(QuasarFramework) + Firebaseで作成したウェブアプリをPWAにしてみます。 と言っても、今回変化するのは以下の3点くらいです。

  • ホーム画面に追加したときに指定したアイコンが表示されるようにする
  • ホーム画面に追加するときに、指定したアプリ名が自動で設定される
  • ホーム画面に追加したあとに、アプリを開くときに、URLのバーが無くなる

以下のようなものです。

f:id:mules_team:20181107135844j:plain

環境

参照リンク

Quasar Framwork公式サイト: https://quasar-framework.org/

Firebase公式サイト: https://firebase.google.com/docs/hosting/deploying?hl=ja

前提条件

Vuejs(QuasarFramework) + Firebaseでウェブアプリをデプロイする で、紹介したデプロイ済みのプロジェクトがあるという前提です。 https://mules-team.hatenablog.com/entry/2018/11/03/121254

Vuejsと、QuasarFrameworkの設定

PWA用のファイルをQuasar CLIで作成します。

$ quasar mode -a pwa

# 以下のように開発サーバーをpwaモードで起動した場合も、自動で必要なファイルが生成されます。
$ quasar dev -m pwa

rootディレクトリに、以下のようにフォルダとファイルが作成されていれば成功です。

.
└── src-pwa/
    ├── register-service-worker.js  # App-code *managing* service worker
    └── custom-service-worker.js    # Optional custom service worker file

PWA用の設定をquasar.conf.jsに書き込みます。

quasar.conf.jsのpwaの項目を以下のように編集します。 name,short_name,descrptionがコメントアウトされていると思うので、それを解除して、編集しましょう。 他の項目も設定可能ですが、今回は、その3つのみ修正します。

pwa: {
  // workboxPluginMode: 'InjectManifest',
  // workboxOptions: {},
  manifest: {
    name: 'Quasar Firebase APP',
    short_name: 'QuasarFire',
    description: 'QuasarFirebaseのPWAのテスト',
    display: 'standalone',
    orientation: 'portrait',
    background_color: '#ffffff',
    theme_color: '#027be3',
    icons: [
      {
        'src': 'statics/icons/icon-128x128.png',
        'sizes': '128x128',
        'type': 'image/png'
      },
      {
        'src': 'statics/icons/icon-192x192.png',
        'sizes': '192x192',
        'type': 'image/png'
      },
      {
        'src': 'statics/icons/icon-256x256.png',
        'sizes': '256x256',
        'type': 'image/png'
      },
      {
        'src': 'statics/icons/icon-384x384.png',
        'sizes': '384x384',
        'type': 'image/png'
      },
      {
        'src': 'statics/icons/icon-512x512.png',
        'sizes': '512x512',
        'type': 'image/png'
      }
    ]
  }
},

vueRouterMode をhistoryに変更します。

quasar.conf.jsを編集して、 vueRouterModeを'history'に変更します。

...
build: {
 scopeHoisting: true,
 vueRouterMode: 'history',
 ...
}
...

Quasar CLIで、Firebaseへのデプロイ用のビルドファイルを作成します。

モードをpwa、themeを、iosで指定してbuildします。

$ quasar build -m pwa -t ios

/dist/pwa-iosというフォルダが作成されていれば成功です。

Firebaseの設定とデプロイ

firebase.jsonを編集します。

firebase.jsonを編集してで、デプロイ用のフォルダを指定し直します。

{
  "hosting": {
    # ここを編集して、デプロ用のフォルダを指定し直す
    "public": "./dist/pwa-ios",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Firebaseへのデプロイを実行します。

$ firebase deploy

# firebase別アカウントでログインしてる場合は、ログアウト=>ログインし直してから実行してください。
$ firebase logout
$ firebase login
$ firebase deploy

出来上がったPWAをスマホで確認します

  • Firebaseでデプロイしたときに表示されるHosting URL: xxxxスマホからアクセスします。
  • ホーム画面に追加をクリックします。

f:id:mules_team:20181107135736j:plain

  • ホーム画面に追加の設定画面で、デフォルトの名前が、quasar.conf.jsで設定したものと同じになっていることを確認します。

f:id:mules_team:20181107135755j:plain

  • ホームに追加されたiconが、quasar.conf.jsで設定されたものになっているか確認します。

f:id:mules_team:20181107135829j:plain

  • ホームに追加されたiconからPWAを開きます。そのときに、URLバーが非表示になっていることを確認します。

f:id:mules_team:20181107135844j:plain

上記がすべてクリアされていれば成功です!お疲れ様でした!