Web Share API를 사용하여 OS 공유 UI와 통합

웹 앱은 플랫폼별 앱과 동일한 시스템 제공 공유 기능을 사용할 수 있습니다.

조 메들리
조 메들리
GitHub

Web Share API를 사용하면 웹 앱은 플랫폼별 앱과 시스템에서 제공하는 동일한 공유 기능을 사용할 수 있습니다. Web Share API를 사용하면 웹 앱이 플랫폼별 앱과 동일한 방식으로 기기에 설치된 다른 앱에 링크, 텍스트, 파일을 공유할 수 있습니다.

PWA가 옵션으로 설치된 시스템 수준 공유 타겟 선택 도구
PWA가 옵션으로 설치된 시스템 수준 공유 타겟 선택 도구.

기능 및 제한사항

웹 공유에는 다음과 같은 기능 및 제한사항이 있습니다.

  • HTTPS를 통해 액세스되는 사이트에서만 사용할 수 있습니다.
  • 서드 파티 iframe에서 공유가 이루어지는 경우 allow 속성을 사용해야 합니다.
  • 클릭과 같은 사용자 작업에 응답하여 호출되어야 합니다. onload 핸들러를 통해 호출할 수 없습니다.
  • URL, 텍스트, 파일을 공유할 수 있습니다.

브라우저 지원

  • 89
  • 93
  • 12.1

소스

링크 및 텍스트 공유

링크와 텍스트를 공유하려면 필수 속성 객체가 있는 프로미스 기반 메서드인 share() 메서드를 사용합니다. 브라우저에서 TypeError이 발생하지 않도록 하려면 객체에 title, text, url, files 속성 중 하나 이상이 포함되어야 합니다. 예를 들어 URL 없이 텍스트를 공유할 수 있으며 그 반대의 경우도 마찬가지입니다. 세 멤버를 모두 허용하면 사용 사례의 유연성이 확장됩니다. 아래 코드를 실행한 후 사용자가 이메일 애플리케이션을 대상으로 선택했다고 상상해 보세요. title 매개변수는 이메일 제목, text, 메시지 본문, 파일, 첨부파일이 될 수 있습니다.

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

사이트에 동일한 콘텐츠의 URL이 여러 개 있는 경우 현재 URL 대신 페이지의 표준 URL을 공유하세요. document.location.href를 공유하는 대신 페이지의 <head>에서 표준 URL <meta> 태그가 있는지 확인하고 이를 공유합니다. 이렇게 하면 사용자에게 더 나은 환경을 제공할 수 있습니다. 이를 통해 리디렉션을 피할 수 있을 뿐만 아니라 공유 URL이 특정 클라이언트에 맞는 올바른 사용자 환경을 제공하도록 합니다. 예를 들어 친구가 모바일 URL을 공유하고 내가 데스크톱 컴퓨터에서 이를 보면 데스크톱 버전이 표시됩니다.

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

파일 공유

파일을 공유하려면 먼저 navigator.canShare()를 테스트하고 호출합니다. 그런 다음 navigator.share() 호출에 파일 배열을 포함합니다.

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

이 샘플은 navigator.share()가 아닌 navigator.canShare()을 테스트하여 기능 감지를 처리합니다. canShare()에 전달된 데이터 객체는 files 속성만 지원합니다. 특정 유형의 오디오, 이미지, PDF, 동영상, 텍스트 파일은 공유할 수 있습니다. 전체 목록은 Chromium에서 허용되는 파일 확장 프로그램을 참고하세요. 향후 더 많은 파일 형식이 추가될 수 있습니다.

타사 iframe에서 공유

서드 파티 iframe 내에서 공유 작업을 트리거하려면 값이 web-share인 allow 속성이 있는 iframe을 삽입합니다.

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

Glitch 데모에서 실제 동작을 확인하고 소스 코드를 볼 수 있습니다. 이 속성을 제공하지 못하면 NotAllowedError이 발생하고 Failed to execute 'share' on 'Navigator': Permission denied 메시지가 표시됩니다.

산타 추적기 우수사례

공유 버튼이 표시된 산타 추적기 앱
산타 추적기 공유 버튼입니다.

오픈소스 프로젝트인 Santa Tracker는 Google의 연말연시 전통입니다. 12월마다 게임과 교육 경험을 통해 연말연시를 맞이할 수 있습니다.

2016년에 산타 추적기팀은 Android에서 Web Share API를 사용했습니다. 이 API는 모바일에 안성맞춤이었습니다. 지난 몇 년 동안 팀은 공간이 부족하기 때문에 모바일에서 공유 버튼을 삭제했으며 공유 대상이 여러 개인 것을 정당화할 수 없었습니다.

하지만 Web Share API를 사용하여 버튼 하나만 표시함으로써 소중한 픽셀을 절약할 수 있었습니다. 또한 Web Share를 통해 공유한 사용자가 API를 사용 설정하지 않은 사용자보다 약 20% 더 높은 것으로 나타났습니다. Santa Tracker에서 웹 공유가 어떻게 작동하는지 확인하세요.

브라우저 지원

Web Share API에 관한 브라우저 지원은 미묘한 차이가 있으므로 특정 메서드가 지원된다고 가정하는 대신 이전 코드 샘플에서 설명한 기능 감지를 사용하는 것이 좋습니다.

다음은 이 기능에 대한 지원 개요입니다. 자세한 내용을 보려면 두 지원 링크 중 하나를 클릭하세요.

navigator.canShare()

브라우저 지원

  • 89
  • 93
  • 14

소스

navigator.share()

브라우저 지원

  • 89
  • 93
  • 12.1

소스

API 지원 표시

Web Share API를 사용할 계획이신가요? 공개 지원은 Chromium팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

해시태그 #WebShare를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.