2017-10-16

Web ページが iOS のフルスクリーンモードで起動しているかチェックする方法

apple-mobile-web-app-capable を指定してフルスクリーンモードにした Web ページは、ホーム画面から起動すると Safari とは異なるプロセスになることは以前紹介した。

今回は、同じページを Safari ブラウザで開いているか、それともフルスクリーンモードの独立したアプリとして開いているかを判定してやろうと思う。

判定には navigator.standalone という JavaScript の API を使う。これは iOS Safari で開いた時のみ用意されている独自の API だ。PC やその他のブラウザで見た時は undefined になる。

これを利用して、以下のようにすれば、「ホーム画面から開いた時だけ別のページを表示する」といったことが可能になる。

<!-- body 直下に通常表示するページをラップして置いておく -->
<div id="wrapper-normal">
  <p>通常のブラウザで開かれました</p>
</div>

<!-- フルスクリーンモード時に表示したいコンテンツをラップし、デフォルトは非表示にしておく -->
<div id="wrapper-standalone" style="display: none;">
  <p>フルスクリーンモードで開かれました</p>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // navigator.standalone が true の時はフルスクリーンモードで起動されている
    if(navigator.standalone) {
      // コンテンツの表示・非表示を差し替える
      document.getElementById('wrapper-standalone').style.display = 'block';
      document.getElementById('wrapper-normal').style.display = 'none';
    }
  });
</script>

他にも UA からも判別できるみたい。

ちなみに Cordova アプリの WebView では navigator.standalone は false だった。