ホーム画面に追加したspaサイトで遷移すると上部にバーが出るのを消す

iPadでspaで簡単なサイトを作って「ホームに画面に追加」をして疑似アプリケーション化して使っていたのですが、いつのまにか遷移すると「上部にバー」が出るようになってしまいました。「完了」を押すとバー自体は消えるのですが、せっかくの専用端末化が台無しです。ということで調査しました。

※縮めています＆ダークモードなので灰色。

環境

• iPadOS 13.1.3

たぶん、どこかのバージョンで治る気がしますが...。

方法

結論から書くとmanifestファイルを追加します。

index.html

<!-- タイトルバーを消す設定 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 追加 -->
<link rel="manifest" href="manifest.json">

manifest.json

{  
  "name": "サンプルアプリ",  
  "short_name": "サンプル",  
  "display": "standalone",  
  "scope": "/",  
  "start_url": "/"  
}

nuxtの場合

• manifest.jsonをstaticに入れます
• nuxt.config.jsに以下を追加します。

nuxt.config.js

  head: {
    ...
    meta: [
      ...
      { name: 'apple-mobile-web-app-capable', content: 'yes' },  
      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }
      ...
    ]
    ...
    link: [
      { rel: 'manifest', href: '/manifest.json'},
    ]
  }
  ...

メモ

前はmanifest無くてもできていたと思うのですが...。ハマったのでメモしておきます。