Navigator.share api 로 공유기능 구현하기

웹 공유 버튼을 만들 때 Navigator.share api를 사용하였다.

 

navigator.share({
  title: document.title,
  text: 'Hello World',
  url: 'https://developer.mozilla.org',
});

아래의 필드들 중 적어도 하나는 명시되어야 한다.

사용 가능한 옵션들은

• url: 공유 URL을  USVString.
• text: 공유로 문장을  USVString.
• title: '공유'를 USVString.

출처 : https://developer.mozilla.org/ko/docs/Web/API/Navigator/share#browser_compatibility

Navigator.share - Web API | MDN

 

실제로 사용해보자.

function setShare() {
    $('.share-button').on('click', function(e) {
        e.preventDefault();
        navigator.share({
            title: document.title,
            url: location.href,
        });
    })
}

 

 

웹에서는 잘 작동되는 걸 확인할 수 있다.

왼쪽 desktop 오른쪽 mobile

 

하지만 웹뷰에서는 작동이 안 된다.

브라우저 호환성을 보니깐 

 

출처 : https://developer.mozilla.org/ko/docs/Web/API/Navigator/share#browser_compatibility

웹뷰 안드로이드는 안되는 걸 볼 수 있다.

코드를 다시 수정해야겠다.

 

 

 

Navigator.share 가 안 되는 경우는 클립보드에 복사하는 기능을 넣어줬다.

function setShare() {
    $('.share-button').on('click', function(e) {
        e.preventDefault();
        if ( typeof navigator.share !== 'undefined') {
            navigator.share({
                title: document.title,
                url: location.href,
            });
        } else {
            copyToClipboard(location.href);
            alert('주소가 복사되었습니다');
        }
    })
}

function copyToClipboard(val) {
    const t = document.createElement("textarea");
    document.body.appendChild(t);
    t.value = val;
    t.select();
    document.execCommand('copy');
    document.body.removeChild(t);
  }

 

웹뷰에서 주소가 복사되는 걸 확인할 수 있다.

 

참고 : https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript