WebShare API로 모바일 공유 기능 구현하기 (feat. navigator객체)

요새 하고 있는 일

현재 회사 서비스에서 KYC(Know Your Customer) 이벤트를 진행하고 있다.

쉽게 말해 Web3 프로젝트에서 환전 전에 봇이 아닌지 인증하는 방식의 관례라고 보면 된다.

보통 신분증이나 개인정보 인증을 진행한다.

 

그러나 우리 회사는 그냥 앱을 열심히 사용한 사람들을 '실제 유저'로 인정해주고

포인트 환전 비율을 제대로 쳐주는 방식으로 진행하였다.

 

그래서 만들어야 하는 기능은?

개중 증명을 위한 항목 중에 친구 초대가 있는데,

이 점수를 채우고 싶으면 유저를 더 초대하라는 의도로 조그마한 share 버튼을 추가하였다.

 

모바일 환경일 때는 OS에서 제공하는 공유 바텀모달이 나오고,

모바일 환경이 아닐때는 클립보드에 공유 링크만 복사된다.

모바일 환경이 아닐 때

모바일일 때

공유하면 이런게 뜬다.

 

Webshare API란?

WebShare API는 웹 애플리케이션이 사용자의 브라우저에서

기본적으로 제공되는 공유 기능을 사용할 수 있게 해주는 API이다.

이 API를 통해 웹 애플리케이션은 사용자가 현재 보고 있는 페이지 또는 특정 콘텐츠를

소셜 미디어, 이메일, 문자 메시지 등 다양한 플랫폼으로 쉽게 공유할 수 있다.

 

현재 대부분의 최신 브라우저에서 지원되고 있지만 거의 모바일 환경일 때만 공유 바텀시트가 뜬다.

함수 구현은 아래처럼 했다.

  const CLIP = `https://anttime.net/link?path=referral&code=${user?.nickname}`;

  const handleWebShare = () => {
    // 현재 기기(navigator)가 웹쉐어 기능을 제공한다면?
    if (navigator.share) {
      navigator
        .share({
          title: 'Share Your Referral Code.',
          text: `[ANTTIME] Make your time more valuable!\n—————————-\n✅ Friend’s Referral code: ${user?.nickname}\n—————————-\n🔥 Enter Referral code and get an extra 10% boost!\n🔗 https://anttime.net/link?path=referral&code=${user?.nickname}`,
          url: '',
        })
        .catch(error => {
          console.error('Error sharing:', error);
        });
    } else {
      // 제공하지 않는다면 링크만 복사.
      setTagName('COPIED');
      handleCopyClipBoard(CLIP);
      setTimeout(() => {
        setTagName('INVITE');
      }, 2000);
    }
  };

 

 

navigator란?

navigator 객체는 웹 브라우저의 상태와 신원을 나타내고

웹 브라우저의 정보를 제공하는 프로퍼티와 메소드를 포함하는 JavaScript 객체이다.

이 객체는 클라이언트 측의 여러 기능을 사용할 수 있게 해줍니다.

브라우저의 정보를 확인하거나, 사용자에게 권한을 요청하거나, 온라인 상태를 확인하는 등의 작업을 수행할 수 있다.

*navigator는 document나 window처럼 전역에서 접근 가능한 객체이다.

// 주요 프로퍼티
navigator.appName: 브라우저의 이름을 반환합니다.
navigator.appVersion: 브라우저의 버전 정보를 반환합니다.
navigator.userAgent: 브라우저의 사용자 에이전트 문자열을 반환합니다.
navigator.platform: 브라우저가 실행 중인 플랫폼을 반환합니다.
navigator.language: 브라우저의 기본 언어를 반환합니다.
navigator.onLine: 브라우저가 온라인 상태인지 여부를 반환합니다.
navigator.cookieEnabled: 브라우저에서 쿠키가 활성화되어 있는지 여부를 반환합니다.

// 주요 메소드
navigator.geolocation.getCurrentPosition(): 현재 위치를 가져오기 위해 Geolocation API를 호출합니다.
navigator.geolocation.watchPosition(): 위치가 변경될 때마다 위치 정보를 가져옵니다.
navigator.mediaDevices.getUserMedia(): 카메라와 마이크 등의 미디어 장치에 접근합니다.
navigator.serviceWorker.register(): 서비스 워커를 등록합니다.
navigator.sendBeacon(): 서버로 비동기 데이터를 전송합니다.
navigator.share(): WebShare API를 사용하여 공유 대화상자를 엽니다.