웹 셰어 API를 사용하여 페이지 공유 시도

처음 뵙겠습니다.2019년 10월 프런트엔드 엔지니어로 입사한 우에가키입니다.
입사부터 지금까지 저는 Toreta now의 브라우저 버전 개발에 종사하고 있습니다.
toC 서비스 개발에서 흔히 볼 수 있는 필수 조건으로 SNS에 웹페이지를 공유하는 예를 들 수 있다고 본다.다만, 실행한 사람이라면 알겠지만, 공유하고 싶은 서비스에 대해 스크립트를 삽입하는 것은 상당히 어렵다.
대표적인 서비스 공유 방법

Twitter

Twitter Publish

Facebook

공유 버튼 - 소셜 플러그인 - 문서 관리 - Facebook for Developers

LINE

LINE Social Plugins

Toreta now에서 공유 기능의 실현을 논의하는 과정에서 Web Share API의 존재를 알았기 때문에 서비스에 가져올 수 있는지 검증했다.

Web Share API

Web Share API는 사용자가 선택한 목적지에서 컨텐츠를 공유하는 데 사용되는 API입니다.
사양이 W3C에 공개됐으며 현재 상태는 W3C Editors Draft(초안 편집)다.
규격.
Web Share API
GitHub
GitHub - w3c/web-share: Web API proposal for sharing data from a web page

브라우저 지원

웹 셰어 API는 여전히 초안을 편집한 상태지만, 2019년 12월까지 사파리, iOS 사파리, 크롬 포 안드로이드의 최신 버전에서 구현됐다.
Can I use... Support tables for HTML5, CSS3, etc

사용법

window.navigator를 공유하려는share 방법의 내용을 매개 변수에 전달하여 호출하면 공유 대화상자를 표시합니다.
JavaScript를 사용하여 설치한 코드는 다음과 같습니다.

 async share() {
    if (!window.navigator.share) ｛
        alert("ご利用のブラウザでは共有できません。");
        return;
    }

    try {
      await window.navigator.share({
        title: 'Share API で共有！',
        text: 'ご覧の通り、お手軽にSNSにリンクを供することができます。',
        url: 'https://example.com/hogehoge',
      });
      alert('共有が完了しました。');
    } catch (e) {
      console.log(e.message);
    }
}

매개 변수

데이터: 공유된 URL을 나타내는 문자열

text: 공유된 텍스트를 나타내는 문자열

title: 공유된 제목을 나타내는 문자열

반환값
사용자가 공유 작업을 완료할 때 해결되는 Promise입니다.

실천하다

실제로 이 코드는 안드로이드 크롬, iOS 사파리에서 실행됐다.
(이하 예는 터미널에서 시험적으로 사용한 것입니다. 터미널에 설치된 응용 프로그램에 따라 공유 대상의 응용 프로그램이 변경됩니다.)
Android 9 Chrome 78

iOS 13.2.3 Safari

안드로이드 iOS 양측은 SNS 애플리케이션뿐만 아니라 메모장과 Gmail 등 생각보다 많은 애플리케이션을 공유할 수 있다.슬랙도 공유가 가능하기 때문에 자신에게 포스터 메시지를 보냈다.
Slack

제목을 표시할 수 없지만 지정한 메시지를 공유할 수 있습니다!

총결산

웹 셰어 API는 아직 스케치 상태이지만 최신 iOS 사파리, 안드로이드 크롬에서는 이미 구현됐다.
규격 변경 가능성은 있지만 모바일 위주의 서비스라면 논의를 충분히 활용할 가치가 있지 않나.