Chrome app なのか Chome browser なのか調べる方法

JavaScriptを書いていると、アプリの挙動やデザインの調整のためにユーザーが実行中の端末やブラウザの情報が知りたくなることが多々あります。 こんなときによく行われている方法の１つにwindow.navigator.userAgentを調べる方法があります。 この判定法だと、例えば

if(navigator.userAgent.indexOf('Android') > 0) {
    // ユーザーがAndroid端末を使っている場合の処理
}

のように分岐処理が書けます。

しかし

上記の方法だと、残念ながら、実行環境が chromeアプリ なのか chromeブラウザ なのかまでは判別できません。*1chromeアプリでは外部画像の読み込みでXMLHttpRequest (XHR) を利用するなどブラウザでの処理方法と異なる点があり、これらも考慮したライブラリみたいなものをつくろうとすると、判別できないのは結構困るのです。

そこで考えてみました

chromeアプリにしか実装されていないオブジェクトがあるはずだ、と思い、consoleでいろいろ試し探してみました

ありました！！ chrome.app.windowの有無によって区別できそうです！*2

Object	chrome以外のブラウザ	chromeブラウザ	chromeアプリ
chrome	No	Yes	Yes
chrome.app	No	Yes	Yes
chrome.app.window	No	No	Yes

これをつかえば判定文は

if(chrome != undefined) {
    if(chrome.app.window != undefined) {
        // 「chrome アプリ」である
    }else {
        // 「chrome ブラウザ」である
    }
}else {
    // 「chrome以外のブラウザ」である
}

のように書けました。

あまり格好良い方法ではありませんがJavaScriptでchromeアプリとchromeブラウザの判別を実現できました。*3

*1:navigator.userAgent の結果が２つとも同じでした。

*2:表中の「Yes」は、「Objectが存在する」という意味です。

*3:私が知らないだけで、きっと、もっとしっかりした判別方法があると思っています。