모바일 웹에서 공유기능 구현하기 Web Share API

모바일웹에서 공유기능에 대한 요청이 와서 해당 기능을 구현하기 위해서 내용을 정리해본다. 

 

 

navigator.share() 메서드는 디바이스에 네이티브 공유하기 기능을 작동시킨다. 

Web Share API 가 지원되지 않는 환경일 경우 메소드의 결과는 undefined 이다.

 

share메서드의 파라메터 구성은 아래와 같다.

 

title : 공유될 제목을 나타낸다.

text: 공유될 본문을 나타낸다.

url : 공유될 URL을 나타낸다.

 

<script type="text/javascript">    
  
	 var btnShare = document.getElementById("btnShare");
		 btnShare.addEventListener("click", function(){
		
	   var shareTitle = "공유하기 기능 테스트";
		var shareText = '공유하기 기능 입니다.';
		var contentURL = "/share/shareUrl";
		var URLPreFix = "";
		
		URLPreFix = URLPreFix + "//" + location.host;
		
		var shareURL = URLPreFix + contentURL;
		
		if (navigator.share){
			  navigator.share({
			      title: shareTitle,
			      text: shareText,
			      url: shareURL,
			  })
		    .then(() => console.log('Successful share'))
		    .catch((error) => console.log('Error sharing', error));
		}else{
			alert("공유하기를 지원하지 않는 환경입니다.");
		}
	});
		
</script>

안드로이드폰에서 실행한 화면 예제)

참고 포스팅 글들 

developer.mozilla.org/ko/docs/Web/API/Navigator/share

Navigator.share - Web API | MDN

ui.toast.com/weekly-pick/ko_20190618

Web Share API 사용하기 | TOAST UI :: Make Your Web Delicious!