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

Web Share Target API를 사용하여 공유 데이터 수신

Web Share Target API로 모바일 및 데스크톱에서의 공유 간소화

Pete LePage

Joe Medley

모바일이나 데스크톱 기기에서 공유 버튼을 클릭하는 것만큼 간단해야 합니다. 앱을 선택하고 공유할 사용자를 선택하는 것입니다. 예를 들어 재미있는 기사를 친구들에게 이메일로 보내거나 할 수 있습니다.

이전에는 플랫폼에 특정한 앱만 운영 체제에 등록하여 설치된 다른 앱에서 공유를 받을 수 있습니다. 하지만 Web Share Target API를 사용하면 설치된 웹 앱은 기본 운영체제에 등록될 수 있음 공유 콘텐츠를 수신하기 위한 공유 타겟이 될 수 있습니다.

'다음을 통해 공유' 기능이 있는 Android 휴대전화 창이 열려 있습니다. — </ph> PWA가 설치된 시스템 수준 공유 타겟 선택 도구(옵션)

웹 공유 대상 실제 작동 방식 보기

Android의 경우 Chrome 76 이상 또는 Chrome 89 이상 사용 Web Share Target 데모를 엽니다.
메시지가 표시되면 설치를 클릭하여 앱을 홈 화면에 추가합니다. Chrome 메뉴를 사용하여 홈 화면에 추가하세요.
공유를 지원하는 앱을 열거나 공유 버튼을 사용합니다. 확인할 수 있습니다
대상 선택도구에서 Web Share Test(웹 공유 테스트)를 선택합니다.

공유가 끝나면 웹 공유 대상 웹 앱을 선택합니다.

앱을 공유 타겟으로 등록

앱을 공유 타겟으로 등록하려면 Chrome의 설치 가능성 기준을 따라야 합니다. 또한 사용자가 공유하기 전에 을 추가하려면 홈 화면에 추가해야 합니다. 이렇게 하면 사이트에서 다음 작업을 할 수 없습니다. 사용자의 공유 인텐트 선택기에 무작위로 자신을 추가하여 공유는 사용자가 앱에서 하고 싶어하는 일입니다.

웹 앱 매니페스트 업데이트

앱을 공유 타겟으로 등록하려면 share_target 항목을 웹에 추가하세요. 앱 매니페스트를 참조하세요. 이렇게 하면 운영 체제에 다음과 같이 앱을 포함하도록 지시합니다. 인텐트 선택기의 옵션 매니페스트에 추가하는 항목은 허용될 수 있습니다 share_target의 일반적인 시나리오에는 세 가지가 있습니다. 항목:

기본 정보 수락
애플리케이션 변경사항 수락
파일 수락 중

를 통해 개인정보처리방침을 정의할 수 있습니다.

참고:share_target 앱 내의 여러 위치에 광고가 표시되도록 하려면 공유 앱의 옵션으로 제공하세요 대상 방문 페이지 (url 항목으로 지정된 페이지)

기본 정보 수락

대상 앱이 데이터, 링크, 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);
    })());
  }
});

공유 콘텐츠 확인

Android 휴대전화에 공유 콘텐츠가 포함된 데모 앱이 표시되어 있습니다. — </ph> 샘플 공유 타겟 앱

수신되는 데이터를 확인하세요. 안타깝게도 다른 광고는 앱이 올바른 매개변수에 적절한 콘텐츠를 공유합니다.

예를 들어 Android에서는 다음과 같은 이유로 url 필드가 비어 있습니다. Android의 공유 시스템에서는 지원되지 않습니다. 대신 URL은 종종 text 필드에 전달하거나 간혹 title 필드에 사용할 수도 있습니다.

브라우저 지원

Web Share Target API는 아래와 같이 지원됩니다.

모든 플랫폼에서 웹 앱이 설치되어야만 잠재적인 표적이 될 수 있습니다.

샘플 애플리케이션

API 지원 표시

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

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