Web Share Target API로 모바일 및 데스크톱에서의 공유 간소화
모바일이나 데스크톱 기기에서 공유 버튼을 클릭하는 것만큼 간단해야 합니다. 앱을 선택하고 공유할 사용자를 선택하는 것입니다. 예를 들어 재미있는 기사를 친구들에게 이메일로 보내거나 할 수 있습니다.
이전에는 플랫폼에 특정한 앱만 운영 체제에 등록하여 설치된 다른 앱에서 공유를 받을 수 있습니다. 하지만 Web Share Target API를 사용하면 설치된 웹 앱은 기본 운영체제에 등록될 수 있음 공유 콘텐츠를 수신하기 위한 공유 타겟이 될 수 있습니다.
<ph type="x-smartling-placeholder">!['다음을 통해 공유' 기능이 있는 Android 휴대전화 창이 열려 있습니다.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=4&hl=ko)
웹 공유 대상 실제 작동 방식 보기
- Android의 경우 Chrome 76 이상 또는 Chrome 89 이상 사용 Web Share Target 데모를 엽니다.
- 메시지가 표시되면 설치를 클릭하여 앱을 홈 화면에 추가합니다. Chrome 메뉴를 사용하여 홈 화면에 추가하세요.
- 공유를 지원하는 앱을 열거나 공유 버튼을 사용합니다. 확인할 수 있습니다
- 대상 선택도구에서 Web Share Test(웹 공유 테스트)를 선택합니다.
공유가 끝나면 웹 공유 대상 웹 앱을 선택합니다.
앱을 공유 타겟으로 등록
앱을 공유 타겟으로 등록하려면 Chrome의 설치 가능성 기준을 따라야 합니다. 또한 사용자가 공유하기 전에 을 추가하려면 홈 화면에 추가해야 합니다. 이렇게 하면 사이트에서 다음 작업을 할 수 없습니다. 사용자의 공유 인텐트 선택기에 무작위로 자신을 추가하여 공유는 사용자가 앱에서 하고 싶어하는 일입니다.
웹 앱 매니페스트 업데이트
앱을 공유 타겟으로 등록하려면 share_target
항목을 웹에 추가하세요.
앱 매니페스트를 참조하세요. 이렇게 하면 운영 체제에 다음과 같이 앱을 포함하도록 지시합니다.
인텐트 선택기의 옵션 매니페스트에 추가하는 항목은
허용될 수 있습니다 share_target
의 일반적인 시나리오에는 세 가지가 있습니다.
항목:
- 기본 정보 수락
- 애플리케이션 변경사항 수락
- 파일 수락 중
기본 정보 수락
대상 앱이 데이터, 링크,
manifest.json
파일에 다음을 추가합니다.
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
애플리케이션에 이미 공유 URL 스키마가 있는 경우 params
기존 쿼리 매개변수를 바꿔보세요. 예를 들어 공유 URL이
스키마는 text
대신 body
를 사용하므로 "text": "text"
을 "text":
"body"
로 바꿀 수 있습니다.
제공되지 않은 경우 method
값의 기본값은 "GET"
입니다. enctype
필드(
는 데이터에 대한 인코딩 유형을 나타냅니다.
"GET"
메서드의 경우 enctype
의 기본값은 "application/x-www-form-urlencoded"
입니다.
다른 값으로 설정되어 있으면 무시됩니다.
애플리케이션 변경사항 수락
공유 데이터가 어떤 식으로든 대상 앱을 변경하는 경우(예:
북마크에 추가합니다. method
값을 "POST"
로 설정하고 다음을 포함합니다.
enctype
필드로 대체되었습니다. 아래 예에서는 대상 앱에서 북마크를 만듭니다.
따라서 "POST"
을 method
에 사용하고 "multipart/form-data"
를
enctype
:
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
파일 수락 중
애플리케이션 변경사항과 마찬가지로 파일을 수락하려면 method
가 "POST"
이어야 합니다.
enctype
가 있어야 합니다. 또한 enctype
는
"multipart/form-data"
및 files
항목을 추가해야 합니다.
또한 앱에서 허용하는 파일 유형을 정의하는 files
배열을 추가해야 합니다. 이
배열 요소는 두 가지 멤버(name
필드와 accept
)가 있는 항목입니다.
필드를 확인합니다. accept
필드는 MIME 유형, 파일 확장자, 배열을 사용합니다.
모두 포함됩니다. 할 수 있는 작업을 모두 포함한 배열을 제공하는 것이
MIME 유형과 파일 확장자는 서로 다른 운영 체제와는 다릅니다.
선택하세요.
{
"name": "Aggregator",
"share_target": {
"action": "/cgi-bin/aggregate",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "records",
"accept": ["text/csv", ".csv"]
},
{
"name": "graphs",
"accept": "image/svg+xml"
}
]
}
}
}
수신되는 콘텐츠 처리하기
수신되는 공유 데이터를 처리하는 방법은 사용자가 결정하며 있습니다. 예를 들면 다음과 같습니다.
- 이메일 클라이언트는
title
을(를) 제목으로 사용하여 새 이메일 초안을 이메일(text
과url
가 본문으로 연결됨) - 소셜 네트워킹 앱은
title
text
를 메시지 본문으로 지정하고url
를 링크로 추가합니다.text
가 다음에 해당하는 경우 앱이 본문에url
를 사용할 수도 있습니다.url
가 누락된 경우 앱은 URL을 찾기 위해text
를 스캔하여 링크로 추가할 수 있습니다. - 사진 공유 앱에서
title
을(를) 사용하여 새 슬라이드쇼를 만들 수 있습니다. 슬라이드쇼 제목, 설명text
및 슬라이드쇼 이미지로files
- 문자 메시지 앱은
text
및url
를 사용하여 새 메시지 초안을 작성할 수 있습니다. 함께 연결되어title
를 삭제합니다.
GET 공유 처리
사용자가 애플리케이션을 선택하고 method
이 "GET"
(
기본값), 브라우저가 action
URL에서 새 창을 엽니다. 그러면 브라우저에서
매니페스트에 제공된 URL 인코딩 값을 사용하여 쿼리 문자열을 생성합니다.
예를 들어 공유 앱이 title
및 text
를 제공하는 경우 쿼리 문자열은 다음과 같습니다.
?title=hello&text=world
입니다. 이를 처리하려면 DOMContentLoaded
를 사용합니다.
이벤트 리스너를 포그라운드 페이지에 추가하고 쿼리 문자열을 파싱해야 합니다.
window.addEventListener('DOMContentLoaded', () => {
const parsedUrl = new URL(window.location);
// searchParams.get() will properly handle decoding the values.
console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});
서비스 워커를 사용하여 action
을 사전 캐시해야 합니다.
사용자가 오프라인일 때도 빠르게 로드되고 안정적으로 작동합니다.
Workbox는
서비스 워커에서 사전 캐싱을 구현합니다.
POST 공유 처리
method
가 "POST"
이면 타겟 앱이 저장된
북마크 또는 공유 파일을 만들면 수신되는 POST
요청의 본문에
공유 애플리케이션에서 전달하며 enctype
값을 사용하여 인코딩된 데이터입니다.
명시적으로 정의할 수 있습니다
포그라운드 페이지에서는 이 데이터를 직접 처리할 수 없습니다. 페이지는 데이터가
페이지가 이를 서비스 워커로 전달하고, 서비스 워커에서
fetch
드림
이벤트 리스너를 추가합니다. 이렇게 하면 데이터를 다시 포그라운드로 전달할 수 있습니다.
postMessage()
를 사용하여 페이지를 호출하거나 서버에 전달합니다.
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/bookmark') {
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
}
});
공유 콘텐츠 확인
<ph type="x-smartling-placeholder">![Android 휴대전화에 공유 콘텐츠가 포함된 데모 앱이 표시되어 있습니다.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=4&hl=ko)
수신되는 데이터를 확인하세요. 안타깝게도 다른 광고는 앱이 올바른 매개변수에 적절한 콘텐츠를 공유합니다.
예를 들어 Android에서는 다음과 같은 이유로 url
필드가 비어 있습니다.
Android의 공유 시스템에서는 지원되지 않습니다. 대신 URL은 종종
text
필드에 전달하거나 간혹 title
필드에 사용할 수도 있습니다.
브라우저 지원
Web Share Target API는 아래와 같이 지원됩니다.
모든 플랫폼에서 웹 앱이 설치되어야만 잠재적인 표적이 될 수 있습니다.
샘플 애플리케이션
API 지원 표시
Web Share Target API를 사용할 계획이신가요? 공개 지원은 Chromium팀에 도움이 됩니다 기능의 우선순위를 지정하고 해당 기능을 지원하는 것이 얼마나 중요한지 다른 브라우저 공급업체에 보여줍니다.
해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다.
#WebShareTarget
어디서 어떻게 사용하는지 Google에 알려주세요.