User Agent Client Hints를 사용하여 브라우저를 판단할 때 고려할 사항

개시하다

User Agent Client Hints(이하 UA-CH라고 함)를 사용한 브라우저 판정 처리는 구현할 기회가 있지만 몇 가지 주의할 점이 있어 요약했습니다.
!
환경 등

TypeScript4.5.4(ts 파일에 기술) 사용

크롬 등 Devol로 테스트하기 위해 문장에 실시간 함수로 기술

UA-CH 정보

한마디로 OS와 브라우저 정보를 얻을 수 있는 자바스크립트 API다.
window.navigator.userAgentData를 활용합니다.

const useAgentData = navigator.userAgentData; 
console.log(useAgentData)

위의 내용을 복제하고 콘솔을 사용한 경우

위에서 설명한 대로 OS 정보mobile:false의 느낌으로 정보를 얻을 수 있습니다.
주제 밖의 말이지만 비동기적으로 실행하면 더 자세한 정보를 얻을 수 있다.

(async() => {
const useAgentData = navigator.userAgentData;
const highEntropyValues = await useAgentData.getHighEntropyValues([
  "platform",
  "platformVersion",
  "architecture",
  "model",
  "uaFullVersion"
]);
console.log(useAgentData)
console.log("詳細",highEntropyValues)
})();

userAgent Data는 크롬에서 버전 90부터 사용할 수 있지만 이전에는 일반적으로 User Agent와 브라우저 판정이 있는 프로그램 라이브러리(UAParser 등)를 통해 OS의 종류와 브라우저의 버전 정보 등을 얻었다.
그러나 Chrome은 UserAgent에 대한 정보를 점차 줄이기로 결정했습니다.
(이 근처에는 자세히 설명하는 글이 많아 생략함)
주의해야 할 것은 현재 브라우저(주로safari)에 따라 UA-CH를 사용하여 얻을 수 없다는 것이다.
이것은 이 점을 의식하여 실시할 때의 주의점이다.

이루어지다

주의점 1: 유형 정의 파일 만들기

TypeScript 버전 4.5.4에서는 포함된 유형 정의window.navigator.userAgentData가 없으므로 폴더 아래에 파일 이름@types을 만들어 유형 정의를 수행합니다.[1]
window.d.ts

type Brand = {
  readonly brand: string;
  readonly version: string;
};

type NavigatorUAData = {
  readonly brands: Brand[];
  readonly mobile: boolean;
  readonly platform: string;
};

interface Navigator {
  userAgentData: NavigatorUAData;
}

window.d.ts 합병interface의 유형에 따라 Navigator의 오류를 제거합니다.

주의사항 2: 선택된 체인 설치

userAgentData JavaScript API에 제공되지 않은 브라우저에서 실행하면 오류가 발생하고 의도하지 않은 동작이 될 수 있으므로 자동 체인userAgentData을 추가하여 반환하십시오.

 const userAgentData = navigator?.userAgentData;

주의점 3: UA-CH를 통해 UAParser와 함께 사용할 수 없는 브라우저 판정

UA-CH에서 가져올 수 없는 브라우저(주로safari)에 대한 판정에 UAParser.js 등의 프로그램 라이브러리를 사용합니다.
UAParser를 사용했습니다. UserAgent와 다른 프로그램 라이브러리에 문제가 없습니다.
index.ts

(() => {
  if (navigator?.userAgentData){
    // UA-CHで取得できた際の処理
    console.log(navigator.userAgentData)
  } else {
    // UA-CHで取得できなかった為、UAParser.jsを利用する
    const browserInfo = uaParser.getBrowser() || '';
    // iPhoneだったら...など細かい処理
  }
})();

또 앞으로 사파리가 UA-CH에 대응할 때 취득 시 처리가 불가능할 경우 크롬이나 엣지만 UA-CH를 통과하고, 다른 브라우저는 UAParser를 통해 브라우저 판정 등에 공을 들여야 한다.
index.ts

(() => {
  const CHROME = 'Google Chrome'; // UA-CHでのChrome
  const EDGE = 'Microsoft Edge'; // UA-CHでのedge
  const userAgentData = navigator?.userAgentData;
  
  if (userAgentData?.brands.length){
    // UA-CHで取得できた際の処理
    const browserInfo = userAgentData.brands.find(
       (data) => data.brand === CHROME || data.brand === EDGE
    );
    
     console.log(browserInfo)
     
     if(browserInfo.brand === CHROME){
	console.log("Chromeの場合の処理")
     }
  } else {
    // UA-CHで取得できなかった為、UAParser.jsを利用する
  }
})();

참고 자료

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgentData
각주
지정undefined된tsconfig.json을 통해 자바스크립트의 API와 브라우저가 제공하는 API의 유형 정의를 결합할 수 있음↩︎