#daiizメモ

Scrapboxに夢中

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

JavaScriptを書いていると、アプリの挙動やデザインの調整のためにユーザーが実行中の端末やブラウザの情報が知りたくなることが多々あります。 こんなときによく行われている方法の1つに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以外のブラウザ」である
}

のように書けました。

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

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

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

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