iOS12.2에서 Web Share API가 왔기 때문에 확인해 보았습니다.

요 전날 보통 iPhone에서 Qiita를 보면 ...



뭐야!



진짜!

라는 느낌으로 iOS12.2부터 WebShareAPI에 대응한 것 같습니다. (Qiita의 대응 너무 빨라?)

그래서 Vue + TypeScript + bulma + parcel에서 사쿠와 데모 페이지를 만들어 검증해 보았습니다.

검증

GitHub: htps : // 기주 b. 코 m / 카츠 야 / 사 mp ぇ ぇ b

데모 페이지: htps // 가다랭이. 기주 b. 이오 / 사 mp ぇ - ぇ b - 샤레 아피 /

iOS12.2에서는 text와 url만 반응하고, title은 반응하지 않는 것 같습니다.

또한 https가 아니면 navigator.share가 undefined가되는 것 같습니다.

Android Chrome도 WebShareAPI를 지원하지만 검증되지 않았습니다.

사용 가정

텍스트와 URL만 공유할 수 있기 때문에 할 수 있는 일은 한정됩니다만, 공유용 URL이나 복수의 URL을 공유하고 싶을 때에 사용할 수 있다고 생각합니다.

또, 친구 코드를 버튼을 탭해 곧바로 공유는 사용법도 할 수 있다고 생각합니다.

TypeScript에서 형식 정의

interface Navigator {
  share?(option: { url: string } | { text: string } | { title: string }): Promise<void>
}

// コンパイルエラー
navigator.share({text: "fogefoge"})

if (navigator.share) {
  navigator.share!({text: "fogefoge"})
}

지원되지 않는 브라우저도 많기 때문에 share? 로 정의하고 있습니다.

strict 모드에서 보통 사용하려고 하면 컴파일 에러가 됩니다.

또한 param은 url, title, text 중 하나 이상이므로 union 유형으로 정의했습니다.

마지막으로

안드로이드는 지원이 끝난 것으로, iOS는 최신 OS의 점유율이 높은 것도 있고, 앞으로는 일반적인 SNS 공유 링크로 바뀌어 웹 콘텐츠에 공유 버튼이 놓여질지도 모릅니다.

아직 개발 도상 느낌입니다만, 이미지 등을 공유할 수 있게 되면, TwitterAPI를 개입하지 않고 화상 트윗등을 할 수 있을 것 같네요!

참고

Navigator.share - Web APIs | MDN

Web Share API를 Safari에서 사용할 수 있게 되었으므로 즉시 사용해 보기 - Qiita