0
Help us understand the problem. What are the problem?

posted at

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

やりたいこと

実装方法

UserAgentの判定

UserAgentに Androidwv がどちらも含まれる場合を以下のように判定する。
参考 : 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-ifv-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の内容を確認できる。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?