웹 공유 API를 사용하는 방법

Android의 Chrome 61이 처음 웹 공유 API를 출시 한 이후로 가려진 것 같습니다. 실제로 웹 사이트 또는 웹 응용 프로그램 (예 : 링크 또는 연락처 카드)에서 컨텐츠를 직접 공유 할 때 장치에 대한 기본 공유 대화 상자 (Safari를 사용하는 경우 데스크탑)를 트리거 하는 방법을 제공합니다.

사용자는 이미 웹 페이지의 콘텐츠를 기본 방식으로 공유 할 수 있지만 브라우저 메뉴에서 옵션을 찾아야하며 공유 컨텐츠를 제어 할 수 없습니다. 이 API를 도입하면 개발자는 사용자 기기의 기본 컨텐츠 공유 기능을 활용하여 응용 프로그램 또는 웹 사이트에 공유 기능을 추가 할 수 있습니다.

이 방법은 전통적인 방법에 비해 많은 장점이 있습니다.

• 사용자는 DIY 구현에서 가질 수있는 제한된 수의 옵션보다 컨텐츠 공유 옵션이 더 넓습니다.
• 다양한 소셜 플랫폼에서 타사 스크립트를 취소하면 페이지로드 시간을 줄일 수 있습니다.
• 다른 소셜 미디어 사이트와 이메일에 일련의 버튼을 추가 할 필요가 없습니다. 장치의 기본 공유 옵션은 단 하나의 버튼으로 트리거됩니다.
• 사용자는 사전 정의 된 옵션으로 제한되지 않고 기기에서 선호하는 공유 대상을 사용자 정의 할 수 있습니다.

브라우저 지원 지침

API의 작동 방식에 대해 자세히 설명하기 전에 브라우저 지원 문제를 해결해 봅시다. 솔직히 말해서, 브라우저 지원은 현재 이상적이지 않습니다. Android 및 Safari (데스크탑 및 iOS) 용 Chrome에서만 작동합니다.

이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 버전 에서이 기능을 지원하고 나중에이 기능을 지원한다는 것을 나타냅니다.

데스크탑

모바일/태블릿 PC

그러나 이것에 낙담하지 마십시오. 웹 사이트 에서이 API를 채택하지 마십시오. 보시다시피, 지원하지 않는 브라우저로의 폴백을 구현하는 것은 매우 쉽습니다.

API 사용에 대한 몇 가지 요구 사항

자신의 웹 프로젝트 에서이 API를 채택하기 전에 다음과 같은 두 가지가 있습니다.

• 귀하의 웹 사이트는 HTTPS를 통해 제공되어야합니다. 지역 개발의 경우 사이트가 LocalHost에서 실행될 때 API도 작동합니다.
• 남용을 방지하기 위해 API는 클릭 이벤트와 같은 특정 사용자 작업에 대한 응답 만 트리거 할 수 있습니다.

예

이 API를 사용하는 방법을 보여주기 위해 기본적으로 내 웹 사이트와 동일한 데모를 준비했습니다. 모습은 다음과 같습니다.

현재 공유 버튼을 클릭 한 후 컨텐츠 공유 옵션이 표시되는 대화 상자가 나타납니다. 다음은이를 달성하는 데 도움이되는 코드의 일부입니다.

 <code>shareButton.addEventListener('click', event => { shareDialog.classList.add('is-open'); });</code>

이 예제를 웹 공유 API 사용으로 변환하기 위해 봅시다. 가장 먼저해야 할 일은 다음과 같이 API가 사용자의 브라우저에서 실제로 지원되는지 확인하는 것입니다.

 <code>if (navigator.share) { // 支持Web 共享API } else { // 回退}</code>

웹 공유 API 사용 API는 navigator.share() 메소드를 호출하고 다음 필드 중 하나 이상을 포함하는 객체를 전달하는 것만 큼 간단합니다.

• url : 공유 할 URL을 나타내는 문자열. 이것은 일반적으로 문서 URL이지만 반드시 필요한 것은 아닙니다. 웹 공유 API를 통해 모든 URL을 공유 할 수 있습니다.
• title : 공유 할 제목을 나타내는 문자열, 일반적으로 document.title .
• text : 포함하려는 텍스트.

실제 응용 프로그램의 모습은 다음과 같습니다.

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { // 回退} });</code>

이 시점에서 지원되는 브라우저에서 공유 버튼을 클릭하면 기본 선택기가 사용자가 데이터를 공유 할 수있는 모든 대상을 나타냅니다. 목표는 소셜 미디어 앱, 이메일, 인스턴트 메시징, 문자 메시지 또는 기타 등록 된 공유 목표 일 수 있습니다.

API는 약속을 기준으로하므로 .then() 메소드를 첨부하여 공유 성공적인 메시지를 표시하고 .catch() 사용하여 오류를 처리 할 수 ​​있습니다. 실제 시나리오에서는 다음 코드 스 니펫을 사용하여 페이지의 제목과 URL을 얻을 수 있습니다.

 <code>const title = document.title; const url = document.querySelector('link[rel=canonical]') ? document.querySelector('link[rel=canonical]').href : document.location.href;</code>

URL의 경우 먼저 페이지에 표준 URL이 있는지 확인하고 그렇다면 해당 URL을 사용하십시오. 그렇지 않으면 document.location 에서 href 받습니다.

폴백을 제공하는 것이 좋습니다

웹 공유 API를 지원하지 않는 브라우저에서는 이러한 브라우저의 사용자가 여전히 일부 공유 옵션을 얻을 수 있도록 폴백 메커니즘을 제공해야합니다.

우리의 경우, 우리는 콘텐츠를 공유하는 몇 가지 옵션이있는 팝업 대화 상자가 있으며 데모의 버튼은 실제로 어디에서나 연결되어 있지 않습니다. 왜냐하면 그것은 단지 데모 일뿐입니다. 그러나 타사 스크립트없이 웹 페이지를 공유하기 위해 자신만의 링크를 만드는 방법을 알고 싶다면 Adam Coti의 기사는 시작하기에 좋은 곳입니다.

우리가하고 싶은 것은 웹 공유 API를 지원하지 않는 브라우저 사용자를위한 폴백 대화 상자를 표시하는 것입니다. 공유 대화 상자를 else 블록으로 열리는 코드를 이동하는 것만 큼 간단합니다.

 <code>shareButton.addEventListener('click', event => { if (navigator.share) { navigator.share({ title: 'WebShare API Demo', url: 'https://codepen.io/ayoisaiah/pen/YbNazJ' }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); } else { shareDialog.classList.add('is-open'); } });</code>

이제 사용자가 어떤 브라우저를 사용하든 모든 사용자가 보장됩니다. 다음은 두 개의 모바일 브라우저에서 공유 버튼이 어떻게 작동하는지에 대한 비교입니다. 하나는 웹 공유 API를 지원하고 다른 하나는 다음과 같습니다.

시도해보십시오! 웹 공유 및 지원되지 않는 브라우저를 지원하는 브라우저를 사용하십시오. 위의 데모와 비슷해야합니다.

요약

여기에는 웹 공유 API에 대해 알아야 할 거의 모든 기본 사항이 포함됩니다. 웹 사이트에서이를 구현함으로써 방문자는 다양한 소셜 네트워크, 연락처 및 기타 기본 응용 프로그램을 통해 콘텐츠를보다 쉽게 ​​공유 할 수 있습니다.

또한 웹 애플리케이션이 프로그레시브 웹 응용 프로그램 설치 기준을 충족하고 사용자의 홈 화면에 추가되면 공유 대상으로 추가 할 수 있습니다. 이것은 Google 개발자의 웹 공유 대상 API에 대해 읽을 수있는 기능입니다.

브라우저 지원이 들쭉날쭉하지만 폴백은 구현하기 쉽기 때문에 더 많은 웹 사이트가이를 채택하지 않는 이유는 없다고 생각합니다. 이 API에 대해 자세히 알아 보려면 여기에서 사양을 읽을 수 있습니다.

웹 공유 API를 사용 했습니까? 의견에 대한 경험을 공유하십시오.

위 내용은 웹 공유 API를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!