vue-cliでpwaの設定のやり方

iOSのステータスバーの色、もといステータスバーを消そうとして、設定の仕方がわからなかったメモ

通常の設定方法

metaタグに入れればおｋ

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

vue-cliの構築時にpwaを有効にした場合

プロジェクトルートにvue.config.jsを作成し、以下を記述

module.exports = {
  pwa: {
    themeColor: '#000000',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black'
  }
};

cliにて構築している場合、metaタグを入れてあっても、上記の設定(してない場合はデフォルト値)が反映されてしまい、タグが反映しない模様

その他

apple-mobile-web-app-status-bar-styleにて、透過させるblack-translucentオプションをした場合に上に白いバーが出てしまうのはノッチのせいらしい…
viewportタグで位置を変えても上か下に残ってしまって、おとなしくblackかwhiteを使うことにした。

以前はできたが、現在はピンチのズームも無効にできない模様。