Corredor

ウェブ、プログラミングの勉強メモ。

2020-11-28 : このブログは2020年末をもって更新停止する予定です。
2021年以降は Neo's World (https://neos21.net/) で記事を公開していきますので、今後はコチラをご覧ください。
このブログの記事は2021年以降、Neo's World に順次移行していきます。元記事および本ブログは移行次第削除する予定です。

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

アイソモーフィックJavaScript

アイソモーフィックJavaScript

  • 作者: Jason Strimpel,Maxime Najim,牧野聡
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2017/07/04
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

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.standalonefalse だった。