[TIL] 0612 | TypeError: window.navigator.share is not a function 트러블 슈팅 기록

이슈 내용

• navigator.share() 를 사용하여 해당 위치의 페이지 링크를 복사해주는 로직을 작성했다. safari 나 모바일 웹에서는 정상적으로 복사를 했지만 크롬 웹에서 동작하지 않았다.

const handleShareClick = React.useCallback(async () => {
    try {
      await window.navigator.share({
          url: window.location.href,
      });
    } catch (e) {
      console.error(e);
    }
}, []);

이슈가 일어난 이유

1. navigator.share()는 https 환경에서만 지원된다. 이 말인 즉슨, 로컬 웹에서는 테스트가 불가능하다는 이야기다. 배포를 해가며 테스트를 해야한다. (clipboard API는 로컬 웹에서 테스트 가능하다.)
2. 안드로이드 기기는 navigator.share()를 지원하지 않는다. 다른 방법을 사용해야 한다.

첫번째 방법

https://stackoverflow.com/questions/65875069/navigator-sharesharedata-is-not-working

먼저 위의 방법대로 window.navigator.share 가 있을 때만 조건문으로 확인한 뒤에 해당 window.navigator.share() 함수를 사용하려고 했다.

const handleShareClick = React.useCallback(async () => {
    try {
      if (window.navigator.share) {
        await window.navigator.share({
          url: window.location.href,
        });
      }
    } catch (e) {
      console.error(e);
    }
}, []);

하지만 동일한 에러가 발생하는 걸 알 수 있었다. 모바일에서는 복사가 되는데 여전히 PC 크롬 웹 버전에서는 복사가 되지 않았다. 이에 대해 따로 예외 처리를 해줘야 하는 것 같았다.

두번째 방법

interface ShareMainButtonProps {
  children: React.ReactNode;
}

export default function ShareButton({ ...props }: ShareMainButtonProps) {
  const link = location.href;

  const handleShareClick = React.useCallback(async () => {
    try {
      if (navigator.share) {
        await navigator.share({
          url: location.href,
        });
      } else {
        // TODO : do something else like copying the data to the clipboard
       
      }
    } catch (e) {
      console.log(e);
      alert('공유 중 오류가 발생했습니다. 다시 시도해주세요!');
    }
  }, []);

  return (
    <PlayButton
      onClick={handleShareClick}
      {...props}
      style={{ backgroundColor: '#454545', color: '#F3EDE5' }}
    />
  );
}

navigator.share 가 있을 때와 없을 때의 예외 처리를 해서 navigator.share가 없을 경우, clipboard API를 이용해서 해당 페이지 링크(location.href)를 복사해주기로 하였다.

export default function ShareButton({ ...props }: ShareMainButtonProps) {
  const link = location.href;

  const handleShareClick = React.useCallback(async () => {
    try {
      if (navigator.share) {
        await navigator.share({
          url: location.href,
        });
      } else {
        // TODO : do something else like copying the data to the clipboard
		navigator.clipboard.writeText(link);
        alert('링크가 복사되었습니다.');
       
      }
    } catch (e) {
      console.log(e);
      alert('공유 중 오류가 발생했습니다. 다시 시도해주세요!');
    }
  }, []);

  return (
    <PlayButton
      onClick={handleShareClick}
      {...props}
      style={{ backgroundColor: '#454545', color: '#F3EDE5' }}
    />
  );
}

이번엔 다른 에러가 발생했다. 아무래도 비동기 문제라고 생각되어 해당 로직 앞에 await 을 추가해주었더니

} else {
        // TODO : do something else like copying the data to the clipboard
        await navigator.clipboard.writeText(link);
        alert('링크가 복사되었습니다.');
}

웹에서도 clipboard.writeText()을 이용하여 복사가 되는 것을 확인할 수 있었다.

⚡️ 참조

https://velog.io/@otterji/navigation.share-copyClipboard
https://stackoverflow.com/questions/65875069/navigator-sharesharedata-is-not-working