Vue.jsで「AndroidかつWebViewで閲覧されている」場合の表示の出し分け

やりたいこと

• AndroidかつWebViewで閲覧されている時、特別な表示を出したい
  • この条件だとFacebookログインができないので、ログインボタンを押せないようにしたり注意書きを出したりしたい
  • 参考 : Android埋め込みブラウザーにおけるFBログイン認証のサポート終了
• 開発はVue.jsを利用
• 実機で動作検証もしておきたい

実装方法

UserAgentの判定

UserAgentに Android と wv がどちらも含まれる場合を以下のように判定する。
参考 : AndroidのWebViewを完璧に切り分けたい | 曖昧/旬

methods: {
    showNoticeAboutFacebookLogin() {
      const regexpA = /Android/i
      const regexpB = /wv/i
      if (window.navigator.userAgent.search(regexpA) && window.navigator.userAgent.search(regexpB) !== -1) {
        return true
      }
      return false
    }
}

表示の出し分け

上記の判定から v-if と v-else を利用して表示を出し分ける。

<a v-if="showNoticeAboutFacebookLogin()" class="fb--cannotUse" disabled>
  Facebookでログイン
</a>
<a v-else :href="facebookLoginUrl" class="fb">
  Facebookでログイン
</a>
<p v-if="showNoticeAboutFacebookLogin()" class="notice">
  Facebookをご利用の方はブラウザからログインしてください。
</p>

.fb--cannotUse {
  ...
  pointer-events: none;
}

.notice {
  ...
  color: #d00000;
}

実機検証

localhost上で立ち上げている場合、下記の方法で簡単に実機検証ができる。

8080以外のポート番号で立ち上げている場合も、Chrome InspectのPort forwardingの設定のポート番号を書き換えれば良い。

アプリ内ブラウザのUserAgentの内容は下記が詳しい。

Androidで wv が付くアプリ内ブラウザの一例として、LINEで確認してみる。
Keepメモなど自分だけが見られるチャットルームにURLとして http://localhost:ポート番号 を入力して送信する。
URLはリンクになるので、タップしてアプリ内ブラウザを立ち上げて動作を確認する。
Chrome Inspectを利用している状態であれば、アプリ内ブラウザからでもlocalhostの内容を確認できる。