웹 앱과 모바일 앱 간의 마진은 유사한 기능이 증가함에 따라 크게 줄어 듭니다.
PWA (Progressive Web Applications)의 출현은 이에 큰 영향을 미칩니다.
https://dillionmegida.com/p/web-share-api/
공유에 대해 이야기 하시겠습니까? 종종 웹 사이트를 개발할 때 사용자가 자신의 콘텐츠를 다른 사용자에게 전파하여 자신의 사용자를 넓힐 수 있기를 원합니다.
이전에는 URL에서 게시물을 직접 만들 수 있는 몇 가지 소셜 미디어 API가 필요했습니다. 그들 중 일부는 구성하기 쉽지만 다른 것들은 구성 할 수 없습니다. 사실, 모든 소셜 미디어가 그러한 API를 제공하지는 않았습니다.
이 기능을 갖춘 응용 프로그램의 예로는 Twitter, LinkedIn, Facebook 및 기타 몇 가지가 있습니다.
API 사용법
요구 사항
이 API를 사용하려면 두 가지 주요 사항이 필요합니다.
문법
navigator.share(data)
.then(() => {
// some codes
})
.catch(() => {
// some codes
});데이터는 URL, 제목 및 텍스트를 포함하는 객체입니다.
let data = {
url: "https://dillionmegida.com",
title: "A title to be shared along with the url",
text: "Optional, represents extra text to be shared"
}API는 약속을 반환합니다. 데이터가 올바르게 지정되지 않았거나 사용자가 공유를 취소하면 거부합니다.
예
지금 읽고 있는 이 기사를 공유해 봅시다.
let articleUrl = document.querySelector('link[canonical]') ?
document.querySelector('link[canonical]').href
: document.location.href;
let articleTitle = document.title;
let extraText = "Check out this article!"
let articleData = {
url: articleUrl,
title: articleTitle,
text: extraText
}URL의 경우 표준 URL이 있는지 확인하고 없으면 URL이 기본적으로 현재 링크로 설정됩니다. 제목은 기사의 제목 인 "Web Share API-Dillion 's Blog"를 나타내며 텍스트는 공유하는 동안 추가하려는 추가 정보 일 뿐입니다.
기사를 공유합시다. 예를 들어, 페이지에 id가 "shareBtn"인 버튼이 있다고 가정 해 봅시다. 우리는 다음을 할 수 있습니다.
let shareBtn = document.querySelector('#shareBtn');
if(!navigator.share) {
shareBtn.style.display = 'none';
}
shareBtn.addEventListener('click', () => {
navigator.share(articleData)
.then(() => {
console.log("Article shared!")
})
.catch((err) => {
console.log(`Article could not be share because ${err}`)
})
})먼저 공유 API가 지원되는지 확인합니다. 그렇지 않으면 버튼을 표시하는 이유가 없다고 생각합니다. 이 경우 제한된 미디어 옵션을 제공 할 수 있습니다.
다음으로 클릭 이벤트 리스너를 추가합니다. 버튼을 클릭하면 API가 트리거 됩니다. 성공하면 "기사 공유!" 콘솔에 기록됩니다. 그렇지 않으면 기사가 공유되지 않고 이유가 콘솔에 표시됩니다.
콘솔에 메시지를 표시하는 것 이상을 수행 할 수 있습니다. 예는 대화 상자를 표시하는 것입니다.
결론
웹 사이트에서 이미 채택하지 않았다면 왜 그럴 필요가 있는지 알 것입니다.
브라우저가 이 API를 지원하는 경우 API를 클릭하여 테스트 할 수 있는 공유 버튼이 표시됩니다. 브라우저가 이를 지원하지 않으면 내 사이트에서 구현 한 기존 공유 방법이 표시됩니다.
등록된 댓글이 없습니다.
