이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

Joe Medley

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

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

기능 및 제한사항

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

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

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

링크 및 텍스트 공유

링크와 텍스트를 공유하려면 프로미스 기반인 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을 사용합니다. 공유하는 대신 document.location.href를 사용하는 경우 다음에서 표준 URL <meta> 태그를 확인합니다. 페이지의 <head>를 공유하고 공유합니다. 이렇게 하면 있습니다. 리디렉션이 방지될 뿐만 아니라 공유 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 우수사례

공유 버튼이 표시된 산타 추적기 앱 — </ph> 산타 추적기 공유 버튼

Santa Tracker는 오픈소스 프로젝트로서 Google의 연말연시 전통을 소개합니다 해마다 12월을 즐겁게 보낼 수 있습니다 게임과 교육 경험을 제공합니다.

2016년에 산타 추적기 팀은 Android에서 Web Share API를 사용했습니다. 이 API는 모바일에 최적이었습니다. 지난 몇 년 동안 팀은 공간이 충분하지 않기 때문에 모바일에서 공유 버튼을 제거했습니다. 공유 타겟을 여러 개 보유하는 것을 정당화할 수 없었습니다.

하지만 Web Share API를 통해 하나의 버튼만 제시하고 절약하는 데 도움이 됩니다. 또한 웹 공유로 공유한 사용자가 다른 사용자보다 약 20% 사용자를 식별할 수 있습니다. 다음으로 이동하세요. 산타 추적기로 웹 공유의 실제 작동 방식을 확인하세요.

브라우저 지원

Web Share API에 대한 브라우저 지원은 미묘한 차이가 있으므로 이 기능을 사용하여 감지 (앞의 코드 샘플에서 설명)를 사용할 수 있습니다. 지원됩니다.

다음은 이 기능에 대한 지원 개요입니다. 자세한 내용은 지원 링크를 참고하세요.

navigator.canShare()

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

navigator.share()

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

API 지원 표시

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

해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다. #WebShare 어디서 어떻게 사용하는지 Google에 알려주세요.

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

기능 및 제한사항

링크 및 텍스트 공유

파일 공유

타사 iframe에서 공유

Santa Tracker 우수사례

브라우저 지원

API 지원 표시

유용한 링크