Web Share API

보안 컨텍스트: 이 기능은 일부 또는 모든 지원 브라우저보안 컨텍스트 (HTTPS)에서만 사용할 수 있습니다.

Web Share API는 사용자가 선택한 공유 대상에 텍스트, 링크, 파일 및 기타 콘텐츠를 공유할 수 있는 메커니즘을 제공합니다.

참고 : 이 API는 Web Workers에서 사용할 수 없습니다 (WorkerNavigator를 통해 노출되지 않음).

참고 : 이 API를 웹사이트가 자신을 공유 대상으로 지정할 수 있도록 해주는 Web Share Target API와 혼동해서는 안 됩니다.

개념 및 사용 방법

Web Share API는 사이트가 텍스트, 링크, 파일 및 기타 콘텐츠를 사용자가 선택한 공유 대상으로 공유할 수 있도록 하며, 기본 운영 체제의 공유 메커니즘을 활용합니다. 이러한 공유 대상에는 일반적으로 시스템 클립보드, 이메일, 연락처 또는 메시징 애플리케이션, Bluetooth 또는 Wi-Fi 채널이 포함됩니다.

이 API는 두 가지 메서드를 제공합니다. navigator.canShare() 메서드는 데이터를 navigator.share()에 전달하여 공유하기 전에 해당 데이터가 "공유 가능"한지 검증하는 데 사용할 수 있습니다.

navigator.share() 메서드는 기본 운영 체제의 네이티브 공유 메커니즘을 호출하고 지정된 데이터를 전달합니다. 이 메서드는 임시 활성화가 필요하므로 반드시 버튼 클릭과 같은 UI 이벤트에서 트리거되어야 하며, 메서드에 전달되는 데이터는 네이티브 구현에서 지원하는 유효한 데이터여야 합니다.

Web Share APIweb-share 권한 정책에 의해 제한됩니다. 권한 정책이 지원되지만 허용되지 않은 경우, 두 메서드 모두 데이터를 공유할 수 없다고 표시합니다.

인터페이스

다른 인터페이스로의 확장

지정된 데이터가 공유 가능한지 여부를 나타내는 불리언 값을 반환합니다.

전달된 데이터가 공유 대상에게 성공적으로 전송되었을 경우, 이를 해결하는 Promise를 반환합니다. 이 메서드는 버튼 클릭 또는 기타 사용자 활성화에서 호출되어야 합니다 (임시 활성화 필요).

예제

아래 코드는 버튼 클릭을 통해 navigator.share()를 사용하여 링크를 공유하는 방법을 보여줍니다.

js
const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://developer.mozilla.org",
};

const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");

// Share must be triggered by "user activation"
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN shared successfully";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});

위 예제는 Web share test에서 가져왔습니다 (소스 코드 보기). 또한, navigator.share()에서 실시간 예제를 확인할 수 있습니다.

명세서

Specification
Web Share API

브라우저 호환성

api.Navigator.share

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
share
data.files parameter
data.text parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

api.Navigator.canShare

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
canShare
data.files parameter
data.text parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

같이 보기