웹뷰(WebView) 감지 훅 만들기

웹 애플리케이션을 개발할 때, 웹뷰(WebView) 내에서 실행되는지 여부를 감지하는 것은 매우 중요합니다. 특히, 모바일 애플리케이션에서 웹뷰를 사용할 때 네이티브 코드와 상호작용하거나 특정 동작을 구현하려면, 웹뷰 환경을 정확히 인식해야 합니다. 이번 글에서는 React와 TypeScript를 사용하여 웹뷰 감지 훅을 구현하는 방법을 알아보겠습니다.

구현 코드

export function useDetectWebView() {
  const userAgent = navigator.userAgent;

  // iOS 웹뷰 감지
  const isIOS = /iPhone|iPad|iPod/.test(userAgent);
  const isWebKit = /AppleWebKit/.test(userAgent);
  const isSafari =
    /Safari/.test(userAgent) || /Version\/[\d.]+.*Safari/.test(userAgent); // Safari 또는 Version/{version}.Safari 패턴을 포함하지 않는 경우
  const isNotCriOS = !/CriOS/.test(userAgent);
  const isNotFxiOS = !/FxiOS/.test(userAgent);

  const isIOSWebView =
    isIOS && isWebKit && isNotCriOS && isNotFxiOS && !isSafari;

  // Android 웹뷰 감지
  const isAndroid = /Android/.test(userAgent);
  const isAndroidWebView = isAndroid && /wv/.test(userAgent);

  return {
    isWebView: isIOSWebView || isAndroidWebView,
    isIOSWebView,
    isAndroidWebView,
    isIOS,
    isAndroid,
  };
}

코드 설명

1. User-Agent 정보 가져오기

const userAgent = navigator.userAgent;

• navigator.userAgent는 현재 브라우저 또는 웹뷰의 사용자 에이전트 문자열을 반환합니다. 이 문자열에는 사용 중인 장치, 브라우저, 운영 체제 등의 정보가 포함되어 있습니다.

2. iOS 웹뷰 감지

const isIOS = /iPhone|iPad|iPod/.test(userAgent);
const isWebKit = /AppleWebKit/.test(userAgent);
const isSafari =
  /Safari/.test(userAgent) || /Version\/[\d.]+.*Safari/.test(userAgent);
const isNotCriOS = !/CriOS/.test(userAgent);
const isNotFxiOS = !/FxiOS/.test(userAgent);

const isIOSWebView =
  isIOS && isWebKit && isNotCriOS && isNotFxiOS && !isSafari;

• isIOS: 사용자 에이전트 문자열에 iPhone, iPad, 또는 iPod가 포함되어 있는지 확인하여 iOS 장치인지 감지합니다.
• isWebKit: 사용자 에이전트 문자열에 AppleWebKit가 포함되어 있는지 확인합니다.
• isSafari: Safari 브라우저인지 확인합니다.
• isNotCriOS와 isNotFxiOS: 크롬(CriOS) 및 파이어폭스(FxiOS) 브라우저가 아닌지 확인합니다.
• isIOSWebView: 위 조건들을 모두 만족하면서 Safari 브라우저가 아닌 경우, iOS 웹뷰로 간주합니다.

3. Android 웹뷰 감지

const isAndroid = /Android/.test(userAgent);
const isAndroidWebView = isAndroid && /wv/.test(userAgent);

• isAndroid: 사용자 에이전트 문자열에 Android가 포함되어 있는지 확인하여 Android 장치인지 감지합니다.
• isAndroidWebView: 사용자 에이전트 문자열에 wv가 포함되어 있는지 확인하여 Android 웹뷰인지 감지합니다.

4. 결과 반환

return {
  isWebView: isIOSWebView || isAndroidWebView,
  isIOSWebView,
  isAndroidWebView,
  isIOS,
  isAndroid,
};

• isWebView: iOS 웹뷰 또는 Android 웹뷰 중 하나라도 참이면 true를 반환합니다.
• isIOSWebView, isAndroidWebView, isIOS, isAndroid: 각각의 감지 결과를 반환합니다.

5. 결론

이 훅을 사용하면 웹 애플리케이션이 웹뷰 내에서 실행되고 있는지 쉽게 감지할 수 있습니다. 이를 통해 특정 환경에 맞는 동작을 구현하거나 네이티브 코드와의 상호작용을 보다 원활하게 처리할 수 있습니다.