기본 웹 공유 JavaScript API 사용

JavaScript로 호출할 수 있는 기본 공유 기능이 있다는 것을 알고 계셨습니까?

인터넷에서 그들을 본 적이있을 것입니다.
그렇지 않은 경우 어떻게 보이는지 비디오 데모를 추가했습니다.



이것을 귀하의 웹사이트에 추가하는 데 관심이 있으십니까?
함께 만들어가는 동안 저를 따라오세요.

JavaScript 기본 웹 공유 API

이 방법은 모든 브라우저에서 작동하지 않으며 주로 모바일 장치용으로 제작되었지만 Safari와 같은 일부 데스크톱 변형도 이 방법을 지원한다는 점에 유의해야 합니다.

이것을 사용할 때 항상 대체 공유 방법을 만들어야 한다는 점을 기억하십시오.

가장 먼저 해야 할 일은 현재 사용자가 네비게이터를 지원하는지 확인하는 것입니다.

in method을 사용하여 탐색기가 공유 기능을 보유하고 있는지 확인할 수 있습니다.

이를 결정하는 코드는 다음과 같습니다.

if ('share' in navigator) {
  console.log('native share available');
} else {
  console.log('provide fallback share');
}

이제 클릭을 첨부할 수 있는 버튼을 웹 페이지에 추가할 수 있습니다.

<button id="share-button">Share me</button>

그런 다음 ID로 버튼을 가져올 수 있습니다.

const shareButton = document.getElementById('share-button');

그리고 리스너를 연결합니다.

shareButton.addEventListener('click', (event) => {
  // Do the share action
});

이 함수 내에서 기본 공유를 호출하거나 폴백 공유 메커니즘을 사용할 수 있습니다.

shareButton.addEventListener('click', (event) => {
  if ('share' in navigator) {
    navigator
      .share({
        title: 'Look at this native web share',
        url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
      })
      .then(() => {
        console.log('Callback after sharing');
      })
      .catch(console.error);
  } else {
    console.log('provide fallback share');
  }
});

여기서 무슨 일이 일어나고 있는지 자세히 살펴보겠습니다.

버튼에 클릭 핸들러를 첨부합니다

.

기본 공유 옵션이 있는지 확인합니다.

예: 제목과 URL로 호출합니다

.

아니요: 몇 가지 대체 기능을 제공해야 합니다

.


보시다시피 기본 공유 API에 콜백을 연결할 수도 있습니다.
일부 분석 이벤트를 공유하거나 기록해 준 사용자에게 감사를 표시하는 데 사용할 수 있습니다.

관심이 있다면 이 CodePen에서 사용해 볼 수 있습니다.

웹 공유 API 옵션

이 예에서는 제목과 URL 옵션을 설정합니다. 우리가 무엇을 더 제공할 수 있는지 봅시다.

웹 공유 API는 다음 옵션을 허용합니다.

제목: 제목을 나타내는 문자열(공유 플랫폼에서 무시될 수 있음)

URL: 공유 가능한 링크의 URL

텍스트: 공유 작업에 대한 일부 정보를 나타내는 문자열

파일: 상당히 다양한 파일 옵션을 지원하는 파일 배열

전체적으로 다음과 같은 개체를 제공할 수 있습니다.

const file = new File([blob], 'picture.jpg', { type: 'image/jpeg' });

navigator.share({
  title: 'Web Share',
  text: 'Testing out the web share API',
  url: 'https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/',
  files: [file],
});

브라우저 지원

모든 시스템이 이 기능을 지원하는 것은 아닙니다. 그러나 대부분의 모바일 브라우저에서 지원합니다.

일반적으로 공유 옵션에 대한 사용자 지정 폴백 모달을 사용하는 것이 좋습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나