티스토리 뷰

프로그래밍/웹

Mobile web Share API

박스여우 2019.03.12 12:37

Introducing the Web Share API

안드로이드용 Chrome 61에서 웹 사이트에서 호스트 플랫폼의 기본 공유 기능을 호출 할 수있게 해주는 navigator.share() 메소드가 출시되었습니다. 해당 메소드는 Web Share API의 일부이며 공유 할 URL이나 텍스트를 전달하여 기본 Android 공유 Dialog를 쉽게 사용할 수 있습니다.


Web Share API는 Promise 기반 단일 메소드입니다. share 메소드 호출시에 공유할 데이터의 속성은 title, text, url등이 있으며 text, url 두 속성중중 하나 이상을 필수로 넣어주어야 합니다.


1
2
3
4
5
6
7
8
9
if (navigator.share) {
  navigator.share({
      title: 'Web Fundamentals',
      text: 'Check out Web Fundamentals — it rocks!',
      url: 'https://developers.google.com/web',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}
cs

share 메소드가 호출되면 네이티브 피커가 보여지고 사용자가 앱을 선택하면 해당 앱과 데이터를 공유할 수 있습니다.


 Share API 사용 조건

Web Share API를 사용하기 위한 몇가지 조건들이 있습니다.

 - HTTPS가 적용된 웹사이트에서만 동작합니다.

 - 버튼 클릭과 같이 사용자가 발생시킨 이벤트, 작업에서만 share api를 호출할 수 있습니다. (ex: 페이지 로딩중 호출 불가)

 - 현재 호스트를 기반으로한 URL외에도 제한없이 URL을 공유할 수 있습니다.

 - URL 없이 텍스트만 공유할 수 있습니다.

 - 사용자의 플랫폼에 따라 사용할 수 없는 경우를 대비해야 합니다. (navigator.share === undefined)



해당 포스트는 Google Developer 가이드 문서를 번역하였습니다.


https://developers.google.com/web/updates/2016/09/navigator-share

'프로그래밍 > ' 카테고리의 다른 글

React State 관리 도구 - Redux vs Mobx  (0) 2019.03.27
Mobile web Share API  (0) 2019.03.12
Webpack - Code Spliting  (1) 2019.02.17
Progressive Web App - PWA  (0) 2018.11.19
React를 1년동안 사용하면서 느낀점  (0) 2018.03.08
Nodejs - Request의 paramaters 사용  (0) 2017.02.12
댓글
댓글쓰기 폼
Total
354,596
Today
15
Yesterday
658
링크
«   2019/11   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함