Web Share API를 사용하는 JavaScript의 기본 "탭하여 공유": 현재 상태, 팁 및 제한 사항.

"This specification (Web Share API) defines an API for sharing text, links and other content to an arbitrary destination of the user's choice."

the official Web Share API definition이 그다지 흥미롭게 들리지는 않지만 이 새로운 기능은 실제로 웹 개발자가 10년 동안 직면해 온 문제에 대한 솔루션을 제공합니다.
이 새로운 API는 JavaScript를 통해 브라우저 또는 운영 체제의 기본 "공유"기능을 사용하는 방법을 제공하여 사용자가 기본 애플리케이션에서와 같은 방식으로 브라우저에서 콘텐츠를 원활하게 공유할 수 있도록 합니다.

더 이상 (종종) 부풀어 오르고 (때때로) 코가 시끄러운 타사 공유 "플러그인"과 끝없는 소셜 미디어 아이콘 목록이 필요하지 않습니까? 글쎄요, 우리는 아직 그 수준에 도달하지 못했지만 이 새로운 웹 API를 이미 우리에게 유리하게 사용할 수 있는 방법을 살펴보겠습니다.

어떻게 작동합니까?

이 API는 navigator 객체에 추가된 share() 및 canShare() 두 가지 메서드로 구성됩니다. 둘 다 현재 페이지에서 다른 서비스로 공유할 정보가 포함된 사전ShareData을 수신하며, 설치된 앱 목록에서 사용자가 선택한 것입니다.

본질적으로 민감하기 때문에 HTTPS가 아닌 웹 페이지에서는 이러한 방법을 사용할 수 없습니다. 구현은 다를 수 있지만 this aspect is part of the specification .

나누는

navigator.share()가 사용하는 ShareData 사전의 특성은 상호 운용성을 보장하기 위해 pre-defined이며 다음과 같습니다.

const toShare = {
  title: "@macargnelutti on dev.to",
  text: "Have a look at my posts on dev.to!",
  url: "https://dev.to/macargnelutti/"
};

ShareData 개체 - in theory -는 title , text 및 url 이외의 항목을 포함할 수 없습니다. 그러나 현재 사양은 text 에 대한 제한된 길이를 제안하지 않으므로 문자열화된 JSON 또는 base64 인코딩 콘텐츠를 전달할 수 있습니다. 그것이 좋은 생각인지 아닌지는 완전히 다른 논쟁입니다(스포일러 경고: 아마도 아닐 것입니다).
navigator.share 는 이 사전을 매개변수로 사용하여 사용자가 선택하는 동안 보류될 Promise를 반환합니다.

const button = document.querySelector('button');
button.addEventListener('click', async () => {
  try {
    await navigator.share(toShare); // Will trigger the native "share" feature
    button.textContent = 'Shared !';
  }
  catch(err) {
    button.textContent = 'Something went wrong'; 
    console.log(err);
  }
});

흥미롭게도 공유 기능이 실패했거나 사용자가 작업을 취소했기 때문에 발생한 예외를 구별할 수 있는 것으로 보입니다. 현재 Safari는 취소 시AbortError 발생합니다.



또한 early Web Share API Level 2 specification draft , navigator.canShare 메서드의 일부를 사용하면 요청하기 전에 ShareData 사전이 공유에 적합한지 확인할 수 있습니다.

이것은 웹 공유 API의 구현 간을 탐색하는 데 유용합니다. 예를 들어, files 속성을 통한 Google의 현재 API 구현allows for sharing files은 앞에서 언급한 것처럼 part of the latest Community Draft for Web Share API level 2이지만 the latest Web Share API level 1 Working Draft은 아닙니다.
canShare를 사용하는 것은 그 맥락에서 많은 의미가 있습니다.

const toShare = {
  title: "Viruses in a trench coat",
  text: "Definitely not 5 viruses in a trench coat",
  files: [...]
}

if (navigator.canShare(toShare)) {
  console.log('We can use the Web Share API to share this.');
}

PWA에서 공유 데이터 수신

very experimental Web Share Target API 을 통해 manifest.json 를 사용하는 것만으로 이러한 유형의 정보를 수신할 수 있는 프로그레시브 웹 앱을 구축할 수 있으므로 Web Share API가 더욱 강력해집니다.

추천합니다 Google's Web.dev guide on the topic .

현재 상태 및 제한 사항

in the works since 2016이 아직 실험적이지만 해당 기능의 표준화 프로세스가 순조롭게 진행되고 있는 것으로 보입니다. first public working draft은 지난 12월에 출시되었습니다.
navigator.share에 대한 현재 지원으로 인해 iOS Safari, Android용 Chrome 및 삼성 인터넷이 이미 웹 공유 지원according to caniuse.com과 함께 모바일에서 사용할 수 있습니다.


navigator.canShare에 대한 지원은 현재 Android용 Chrome만 지원하므로 훨씬 더 제한적입니다.



평소와 같이 점진적 향상은 다음과 같은 새로운 기능을 사용하기 시작하는 데 중요합니다.

사용하기 전에 navigator.share가 있는지 확인하십시오

.

이 기능을 사용할 수 없는 경우를 대비하여 적절한 폴백을 마련하십시오

.




Web Share API는 웹과 네이티브 간의 장벽을 허무는 데 도움이 되는 이러한 기능 중 하나이며 아직 작업 중인 동안 사용자가 우리가 구축한 제품을 경험하는 방식을 즉각적으로 개선할 수 있습니다. 책임감 있게 사용하되 반드시 사용하세요 🎉.