웹 앱은 플랫폼별 앱과 동일한 시스템에서 제공하는 공유 기능을 사용할 수 있습니다.
Web Share API를 사용하면 웹 앱이 시스템에서 제공하는 동일한 공유를 사용할 수 있습니다. 플랫폼별 앱으로 활용할 수 있습니다. Web Share API를 사용하면 웹 앱에서 기기에 설치된 다른 앱과 링크, 텍스트, 파일을 플랫폼별 앱처럼 작동합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">![PWA가 설치된 시스템 수준 공유 타겟 선택 도구(옵션)](https://web.developers.google.cn/static/articles/web-share/image/system-level-share-target-9be61b07242ad.png?authuser=19&hl=ko)
기능 및 제한사항
웹 공유에는 다음과 같은 기능 및 제한사항이 있습니다.
- 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 type="x-smartling-placeholder">![공유 버튼이 표시된 산타 추적기 앱](https://web.developers.google.cn/static/articles/web-share/image/the-santa-tracker-app-sho-6ff6f0a0cebf4.png?authuser=19&hl=ko)
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에 알려주세요.