Vuejs(QuasarFramework) + FirebaseでPWAを作成する
概要
Vuejs(QuasarFramework) + Firebaseで作成したウェブアプリをPWAにしてみます。 と言っても、今回変化するのは以下の3点くらいです。
- ホーム画面に追加したときに指定したアイコンが表示されるようにする
- ホーム画面に追加するときに、指定したアプリ名が自動で設定される
- ホーム画面に追加したあとに、アプリを開くときに、URLのバーが無くなる
以下のようなものです。
環境
参照リンク
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
にスマホからアクセスします。 - ホーム画面に追加をクリックします。
- ホーム画面に追加の設定画面で、デフォルトの名前が、
quasar.conf.js
で設定したものと同じになっていることを確認します。
- ホームに追加されたiconが、
quasar.conf.js
で設定されたものになっているか確認します。
- ホームに追加されたiconからPWAを開きます。そのときに、URLバーが非表示になっていることを確認します。
上記がすべてクリアされていれば成功です!お疲れ様でした!