Web Share API로 디바이스 네이티브 공유 UI를 사용하는 방법

헤이 데브,

웹 앱도 네이티브 앱처럼 시스템에서 제공하는 공유 UI를 사용할 수 있다는 사실을 알고 계셨나요?

그래 넌 할수있어! 모든 웹 응용 프로그램에서 Web Share API의 navigator.share() 메서드 사용.

방법을 보자!

암호

var btn = document.getElementById("webshareapiButton");

btn.addEventListener("click", function () {
  navigator.share({
    url: document.URL,
    title: document.title,
    text: "Lorem ipsum..."
  });
});

매우 간단합니다! 그러나 작동하려면 몇 가지 요구 사항이 있습니다 ...

요구 사항

HTTPS를 통해 실행되는 웹 사이트에서만 작동합니다. 그러나 테스트를 위해 로컬 개발(localhost)에서 작동합니다.

일부 사용자 작업(예: "클릭"이벤트)에 대한 응답으로만 작동합니다. 남용을 방지하기 위해.

데모

일반적인 소셜 미디어 공유 버튼(링크 기반)과 Web Share API를 호출하는 버튼을 비교하는 간단한 데모 코드를 만들었습니다.

일부 데스크톱 장치(예: Windows, Linux 및 macOS)에는 기본 공유 UI가 없습니다. 기본 공유 UI를 보려면 모바일 장치를 사용하여 아래 버튼을 클릭하십시오.



다음과 같이 지원되지 않는 장치에 대한 폴백 논리를 포함하는 것을 잊지 마십시오.

if (navigator.share) {
  // Web Share API is supported, include code here
} else {
  // fallback code
}

결론

이제 모든 웹 애플리케이션에서 Web Share API를 사용하는 방법을 알았습니다.

현재 브라우저 호환성과 같은 Web Share API에 대한 자세한 내용은 아래 링크를 참조하십시오.

참조

MDN Web Docs

Web.dev

CSS-Tricks

나는 당신이 그것을 즐기시기 바랍니다!

팔로우하고 후원해주세요GitHub .