[TIL] WebShare API로 공유하기 with React.js

특정 포스트나 결과를 sns 또는 링크로 공유하는 방법에 대해 검색하던 중 WebShare API라는 것을 알게 되어 해당 내용을 정리하려한다.

process flow

A가 B에게 특정 post를 공유할때에 생각한 flow는 대략 이렇다.
공유방식은 링크를 전달하여 접근하게 했다.

1. A가 공유하고자 하는 결과물이 있는 페이지에서 버튼을 통해 결과를 공유하면 서버에 특정 값을 전달.
2. 필요한 결과물을 서버에서 만들어서 결과물의 id를 클라이언트로 전달.
3. 결과물 id를 받아 결과물만 그려주는 페이지의 링크를 조합 후 링크 전달.
4. 공유받은 B가 해당 링크를 통해 결과물 공유 페이지에서 결과물 요청 후 접근.

코드

const shareTest = async () => {
  // useState의 set함수로 구성했으나 비동기처리로 인하여 받아올수 없었다. 대신 let변수에 재할당해주는 방식을 사용했다.
    let resultKey = '';
  // 해당 결과물의 key값을 전달하여 서버가 조회 및 결과물 생성을 할 수 있게 key를 전달하였다.
    await postR(`sample/test/${id}`, {
      methods: 'POST',
      body: id,
    }).then((res) => res.json().then((resjson) => {
      if (resjson.responseStatusCode === '200') {
        // 재할당
        resultKey = resjson.data.id;
      }
    })).catch((e) => console.log(e));
// navigator.share는 Promise를 반환하기에 지원하지 않는 브라우저에 대응 할 수 있다.
    if (navigator.share) {
      navigator.share({
        title: '공유항목의 제목',
        url: `http://localhost:3000/share/${resultKey}`,
      }).then(() => {
        console.log("공유 성공");
      }).catch(console.error);
    } else {
      // 지원하지 않는 브라우저에서는 다른 방식의 공유를 택해야할 것 같다.
      openPopUp(resultId);
    }
  };

코드가 더러워보인다. 조만간 코드 정리를 다시 해야할 것 같다.

특정 버튼을 클릭하면, 또 WebShareAPI를 지원하는 브라우저이면

해당 창이 나타나 필요한곳에 공유를 할 수 있다.

만일 지원하지 않는 브라우저에서는 fallback에 정의한대로 팝업을 띄워 위에 창을 대신 만들어줘야한다.

참고로 https 가 아니면 API가 모바일 사파리에서는 동작하지 않았다.

해당 작업은 https와 같이 작업되어야 한다.

참고: https://ui.toast.com/weekly-pick/ko_20190618