User-Agent를 사용한 장치 감지

특정 플랫폼이나 장치에 대한 기능을 구현하고 싶었던 적이 있습니까? 모바일 사용자에게만 화면이나 일부 콘텐츠를 표시하거나 사용자의 장치에 따라 다른 작업을 실행하는 것과 같습니다.

나는 보통 데스크탑에서 검색할 때 모바일 사용자만을 위한 것이 분명한 사이트의 콘텐츠를 접하게 됩니다.

User-Agent는 이 시나리오에서 도움이 될 수 있습니다.

MDN defines 사용자 에이전트는 다음과 같습니다.

The User-Agent request header is a characteristic string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent.

사용자 에이전트 문자열의 일반적인 형식은 다음과 같습니다.

모질라/5.0 ( <system-information> ) <platform> ( <platform-details> ) <extensions>

사용자의 장치 감지

사용자가 모바일에 있는지 확인하려면 아래 예에서 볼 수 있듯이 사용자 에이전트 문자열에서 "Mobi"를 찾아야 합니다.

const BUTTON = document.querySelector("button");

const { userAgent } = window.navigator;

// Set device to "mobile" if "Mobi" exists in userAgent else set device to "desktop"
const device = userAgent.includes("Mobi") ? "mobile 📱" : "desktop 💻";

BUTTON.addEventListener("click", () => alert(`You are on ${device}`));

위의 예는

데스크톱 데모


모바일 데모

브라우저에서 테스트

브라우저에서 이를 테스트하려면 개발자 도구를 열고 '장치 전환' 아이콘을 클릭하세요. 변경 사항을 적용하려면 페이지를 새로고침하세요.

실제 예

다음은 내 React 애플리케이션에서 이에 대한 실제 예입니다.

페더레이션 로그인에서 이것을 사용했습니다.

// Context API for device
import { createContext, useEffect, useState } from "react";

export type TDevice = "mobile" | "desktop";

export const DeviceContext = createContext<TDevice>("mobile");

const DeviceContextProvider: React.FC = ({ children }) => {
  const [device, setDevice] = useState<TDevice>("mobile");

  useEffect(() => {
    const { userAgent } = navigator;
    // Set device state
    userAgent.includes("Mobi") ? setDevice("mobile") : setDevice("desktop");
  }, []);

  return (
    <DeviceContext.Provider value={device}>{children}</DeviceContext.Provider>
  );
};

export default DeviceContextProvider;

// login with provider hook
const useLoginWithProvider = (redirect: (path: string) => void) => {
  const device = useContext(DeviceContext);
  const [signInAttempt, setSignInAttempt] = useState(false);

  const login = async (provider: string) => {
    if (device === "mobile") { // Check if user is mobile
      firebase.auth().signInWithRedirect(providers[provider]);
      setSignInAttempt(true);
    } else {
      firebase
        .auth()
        .signInWithPopup(providers[provider])
        .then(handleResult)
        .catch(error => setError(error.message));
    }
  };

  useEffect(() => {
    if (signInAttempt) {
      firebase
        .auth()
        .getRedirectResult()
        .then(handleResult)
        .catch(error => setError(error.message));
    }
  }, []);

  return login;
};

export default useLoginWithProvider;

결론

분명히 이것이 미디어 쿼리를 대체하기 위한 것이 아니라는 것을 알 수 있지만 이것은 프로젝트에서 매우 유용할 수 있습니다. 미디어 쿼리는 주로 반응형 페이지에 사용되는 반면 이 방법은 장치별 기능이나 콘텐츠에 사용됩니다. 이는 주로 모바일 앱이 데스크톱 버전과 다르게 동작하기를 원할 때 유용합니다.
이를 사용하여 특히 프로그레시브 웹 앱을 다룰 때 모바일 사용자에게 앱과 같은 경험을 제공할 수 있습니다.

Read more from MDN docs

사진 제공: Daniel Korpai on Unsplash