Javascript 공유 API를 사용하여 텍스트, 링크 및 파일을 다른 OS 앱에 공유

모바일 네이티브 앱에서 이미 Share API를 사용해 보셨을 것입니다. 클립보드에 복사와 같은 위치를 추가하여 공유 컨텍스트를 수신할 수 있는 모든 앱이 있는 팝업 메뉴입니다. 이 API는 iOS 및 Android ( React Native 및 Expo )에서 잘 알려져 있지만 브라우저 API를 통해 동일한 팝업을 트리거할 수 있다는 것을 알고 계셨습니까?



W3C 사양은 아직 초안이지만 브라우저에서 잘 지원됩니다. 대부분 모바일 브라우저에서 사용할 수 있지만(이치에 맞음) macOS의 Safari와 Windows의 Edge는 작성 당시(11-2020) 데스크톱에서 지원합니다.

API

API는 navigator 개체에 대한 두 가지 기능으로 구성됩니다. 첫 번째 함수는 데이터 개체를 단일 매개 변수로 사용하는 share()입니다. 이 개체에 다음을 전달할 수 있습니다.

{
    url: USVString,
    text: USVString,
    title: USVString,
    fiels: Files[],
}

USVString is a sequence of Unicode scalar values. Simply USVString is a sequence of numbers that are represented by a related characters in the Unicode standard.
Image, video, audio, and text files can be shared

이 함수는 사용자가 공유 작업을 완료하면 해결되는 약속을 반환합니다. 거부는 사용자가 컨텍스트 공유 팝업을 닫았거나 지정된 데이터 매개변수가 유효하지 않은 경우일 수 있습니다. 이 API는 HTTPS 프로토콜에서만 작동하며 사용자가 페이지와 상호작용한 후에만 작동합니다. 공유 팝업 온로드를 초기화할 수 없습니다.

// async context is present
try {
    await navigator.share({
      title: 'Share API',
      text: 'This API is cool!',
      url: 'https://example.com',
    });
} catch(err) {
    console.log(err);
}

지정된 파일 배열을 공유할 수 있는지 확인하려면 인터페이스와 함께 객체를 매개변수로 사용하는 canShare() 함수를 사용하십시오.

{
    files: Files[];
}

사용법은 다음과 같을 수 있습니다.

// in HTML
<input id=“files” type="file">
// …
// async context is present
// Event Handler
const { files } = document.getElementById('files');
if (navigator.canShare?.({ files })) {
  await navigator.share({
    files,
    title: 'Pictures',
    text: 'Our Pictures.',
  });
}

Note that canShare() has lesser support than share()!

폴백

이 API를 지원하지 않는 브라우저의 경우 폴백을 사용할 수 있어야 합니다. 공유 버튼이 표시되지 않거나 사용자 지정 팝업이 사용자에게 표시됩니다. 이러한 팝업은 클립보드에 복사, 소셜 미디어에서 공유, 메일 클라이언트에서 열기(href로 mailto 접두사가 있는 앵커) 또는 paste it to message과 같은 옵션으로 구성될 수 있습니다.

소셜 미디어에 대한 사용자 지정 공유 동작 구현을 위한 링크:

Facebook

결론

Share API를 사용하면 사전 정의된 옵션으로 제한되지 않고 자신의 장치에서 선호하는 공유 대상을 사용자 정의할 수 있습니다.

연결

W3C Specification

MDN Docs

Web Dev Post