주는 선물
차세대 웹 앱을 사용하면 몇 가지 분명한 이점이 있으며 그중 하나는 내비게이터의 공유 API를 사용하는 것입니다. 계속 진화하는 풍부한 기능 세트 덕분에 선택한 네비게이터는 이제 Web Share API를 호출하여 다음 항목을 공유 할 수 있습니다.
- 일반 텍스트
- 제목을 제공하여 링크
- 직접 파일
사용자의 브라우저가 새로운 navigator.share를 지원한다면 지금 바로이 기능을 사용할 수 있습니다!
데모 시간!
공유 기능을 사용하는 것은 매우 간단합니다. 다음은 사이트에서 실제로 사용되는 예제입니다.
<Button
className={classes.container}
aria-label={"Share this article"}
onClick={() => {
// '.share' can only by called when
// triggered by click-events to make
// sure it's the user's intention.
navigator.share?.({
title: info.title,
text: info.description,
url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
}).catch(console.error);
// Optionally virbrate slightly.
navigator.vibrate?.([30, 20, 10]);
}}>
<ShareIcon />
<Typography>{"Share"}</Typography>
</Button>
보시다시피이 콜백은 비동기 공유 기능 (가능한 경우)을 호출하고 일부 데이터를 제공하여 멋진 URL + 설명 제목 및 부제가 공유 시트에 표시 될 수 있도록합니다. 표시된 코드는이 기사의 끝에 약간 다른 변형으로 사용됩니다. 브라우저가 공유를 지원하는 경우 관련 버튼이 "작업"행에 렌더링됩니다.
사용처
작성 시점에서 API는 대부분 인기있는 브라우저 (Chrome, Opera, Safari)의 모바일 변형에서 사용할 수 있지만 데스크톱의 Safari + Edge에서만 사용할 수 있습니다. 이 기능은 특정 하드웨어 요구 사항에 국한되지 않기 때문에 향후 몇 달 내에 지원이 증가 할 것으로 예상합니다.
그리고 네, Web Share API에 대한 간략한 소개였습니다. 자세한 내용은 링크 된 web.dev와 부록의 MDN 문서를 확인하세요.
- Tom
