4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

UserAgentって対応してないって…ってコト!?

Posted at

愚痴記事です

あしからず

画面周りを作ってる最中に起きたことでふと思い立った。

あ、userAgentって廃止するんだっけなぁ。

なんだかんだで、文字列正規表現で判定してるプロジェクトも多いし、概要くらいは知ってたけどブラウザの対応状況とかも一律にならないから今までのやりかたしかやってなかった。

まぁもう2023年だしそろそろuserAgentで実装するよりuserAgentDataで実装した方がいいなーと思って当初のチェックはしてなかった。

参考としてuserAgentの実装とuserAgentDataの実装方法

  • userAgentの実装方法
const isMatch = navigator.userAgent.match(/iPhone|Android.+Mobile/);
const isMobile = isMatch != null;
  • userAgentDataの実装方法
// 環境によりけりですが、こんな感じのデータが取れます。
{
  brands: [
    {
      brand: 'Not/A)Brand',
      version: '99'
    },
    {
      brand: 'Google Chrome',
      version: '115'
    },
    {
      brand: 'Chromium',
      version: '115'
    }
  ],
  mobile: false,
  platform: 'Windows',
}

const isMobile = navigator.userAgentData.mobile;

楽!!!それって最高じゃん!!
ってウキウキで実装したところconsole上でエラーが発生。

どうやらiPhone(Chrome)でもuserAgentDataがnullで取得されておる。なんだこれ?

どうやらPCはスケジュール通りに移行作業が行われてるようですが、SPブラウザはそれとは別のタイムラインで計画されている?
(どなたか詳しい方がいれば教えてください。)

なので最終的にこんな実装に落ち着きました。

const isMobile = () => {
  const { userAgent, userAgentData } = navigator;

  if (userAgentData == null) {
    return userAgent.match(/iPhone|Android.+Mobile/) != null;
  }
  return userAgentData.mobile;
}

余計面倒じゃん!!!!!!!!
喜びがない~・・・・

個人的な感想としては
新しくプロパティ追加したのであれば影響も僅かだろうし一気にやってほしいよなぁと思いながらも移行できない大人の事情があるのか。ブラウザの実装者も大変やなぁと現実を見て泣きそうになるあーみーでした。

中身がうっすい記事ですが、今回はここまでとなります。

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?