React로 만든 웹을 모바일 환경에서 공유하고 싶을 때 (WebView, Navigator.share())

 

리액트로 공유 기능을 구현하는게 이렇게나 어렵다니.

 

바이럴을 통해 수익을 내는 웹 앱을 React 기반으로 만들고 있다.

 

정확히는 Next.js 13.4 프레임워크를 활용하지만, 결국 내부는 리액트와 JSX다.

 

애를 먹고 있는게 있는데 바로 안드로이드 웹뷰.

 

안드로이드 웹뷰(WebView) 객체는 Navigator.share()를 지원하지 않는다.

그래서 iOS에서는 정상적으로 공유를 잘 불러내지만 안드로이드는 그냥 먹통이다.

 

무슨 일인지 모르겠으나 alert()도 먹히지 않는다.

 

그래서 여러 글을 찾아보니 아래와 같이 ClipBoard에 주소를 복사하게끔 처리하고 있다.

 

세상에 쉬운 일이 하나 없다.

 

 

 

참고 할만한 글

 

1. 순수하게 공유하기에 대해서 공부하기

https://velog.io/@otterji/navigation.share-copyClipboard

[React] 공유하기 기능 완벽하게 구현하기 (Web Share API)

 

 

2. 안드로이드 앱 <-> 웹 페이지 간 통신에 대해서 공부하고 싶을 때

https://sesang06.tistory.com/170

iOS, Android WebView 와 네이티브간의 유용한 통신 방법 - Javascript Interface, Webkit Messaging

 

3. 카카오톡 공유하기까지 있는 아티클

https://all-dev-kang.tistory.com/m/entry/React-%EC%9A%B0%EB%A6%AC%EC%84%9C%EB%B9%84%EC%8A%A4%EB%A5%BC-%EB%8D%94-%EB%84%90%EB%A6%AC-SNS-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0-Navigatorshare

[React] 우리서비스를 더 널리, SNS 공유하기 (Navigator.share)