navigator.share를 사용해서 URL, 텍스트, 파일을 공유할 때 커스텀해서 공유할 수 있다.
브라우저 지원 범위
Firefox / WebView Android 에서 미지원하고, 대부분 지원한다.
Browser compatibility
코드 예제
6장 코드 스니펫 > Boilerplate 코드를 기반으로 데모가 제작되었습니다.
데모보기
<!DOCTYPE html>
<html class="w-full h-full">
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>React</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body class="w-full h-full">
<div id="root" class="w-full h-full"></div>
<script type="text/babel">
const MyApp = () => {
const [message, setMessage] = React.useState('');
const [message2, setMessage2] = React.useState('');
const shareText = async () => {
try {
await navigator.share({
title: 'One Piece | Web Share API',
text: 'Share Text',
url: 'https://the-next-web-research-lab.github.io/fe-dev/code-snippets/Javascript/WebApis.html',
})
setMessage('One Piece shared successfully')
} catch (err) {
setMessage(`Error: ${err}`)
}
};
const shareFiles = async (event) => {
const files = event.target.files;
if (files.length === 0) {
setMessage2('No files selected.');
} else {
if (navigator.canShare) {
if (navigator.canShare({files})) {
try {
await navigator.share({
files,
title: 'Files',
text: 'My Files'
})
setMessage2('Shared!')
} catch (error) {
setMessage2(`Error: ${error.message}`)
}
} else {
setMessage2(`Your system doesn't support sharing these files.`);
}
} else {
setMessage2(`Your browser doesn't support the Web Share API.`);
}
}
};
return <div className="h-full w-full text-xl text-center flex flex-col gap-y-5 pt-5">
<div>
<button
type="text"
onClick={shareText}
className="py-2 px-4 bg-slate-900 text-white rounded-lg text-sm">
Share Text
</button>
</div>
<p>message: {message}</p>
<div>
Share Files: <input type="file" onChange={shareFiles}/>
</div>
<p>message: {message2}</p>
</div>;
}
ReactDOM
.createRoot(document.querySelector('#root'))
.render(<MyApp/>);
</script>
</body>
</html>
공식 블로그 링크
자바스크립트로 공유 기능 커스텀하기
navigator.share를 사용해서 URL, 텍스트, 파일을 공유할 때 커스텀해서 공유할 수 있다. 브라우저 지원...
blog.naver.com
728x90
'선행개발' 카테고리의 다른 글
| 메인 스레드 최적화를 위한 Scheduling API (0) | 2023.08.08 |
|---|---|
| 자바스크립트로 인터넷 속도 측정하기 (0) | 2023.07.13 |
| 자바스크립트로 배터리 상태 조회하기 (0) | 2023.07.09 |
| 자바스크립트로 기기의 진동 컨트롤하기 (0) | 2023.07.07 |
| 선행개발 소개 (0) | 2023.07.06 |