Web Share API와 반응하여 유연한 공유 시스템 구축

여러 타사 공유 스크립트에 의해 무게가 둔화 된 웹 사이트에 지쳤습니까? Web Share API는 간소화 된 성능 대안을 제공하여 장치의 기본 공유 기능을 활용합니다. 이 튜토리얼은 현대적이고 반응 기반 공유 시스템을 구축하는 것을 보여줍니다 프로젝트 설정

vite and typescript를 사용하여 새로운 React 프로젝트를 만들어 시작하십시오 :

의 종속성 설치 :

스타일 (선택 사항이지만 권장) : 토스트 제공 업체를 메인 구성 요소에 추가하십시오 :

웹 공유 이해 api

Web Share API는 장치의 내장 공유 메커니즘과 완벽하게 통합되어 플랫폼 기본 공유 경험을 제공합니다. 이것은 모바일 및 데스크탑에서 일관된 사용자 경험을 제공합니다.

<code class="language-bash">npm create vite@latest my-share-app -- --template react-ts
cd my-share-app</code>

공유 후크 생성

공유 논리를 관리하기 위해 사용자 정의 후크 ()를 만들어 봅시다.

구현 고장

<code class="language-bash">npm install sonner</code>

제공 :

<code class="language-bash">npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p</code>

: 클립 보드 API를 사용한 클립 보드 폴백

: 웹 공유 API의 우선 순위를 정하고, 이용할 수 없거나 실패한 경우 sonner로 다시 떨어집니다. App 이 접근 방식은 다양한 브라우저 및 장치에서 강력한 공유 경험을 보장합니다.

구성 요소에서 후크 사용

<code class="language-typescript">// src/App.tsx
import { Toaster } from 'sonner';

function App() {
  return (
    <>
      <Toaster position="bottom-right" />
      {/* Your app content */}
    </>
  );
}</code>

다음은 구성 요소 ()입니다 및

: 의 사용법

브라우저 지원 및 고려 사항

Web Share API는 최신 모바일 및 데스크탑 브라우저에서 광범위한 지원을 즐깁니다. 기억하십시오 : <.> 보안 컨텍스트 (https)가 필요합니다 사용자 상호 작용 (예 : 버튼 클릭)이 필요합니다 모든 데이터 유형이 보편적으로 지원되는 것은 아닙니다 모범 사례

src/hooks/useShare.ts

항상 폴백을 포함하십시오.

<code class="language-typescript">import { toast } from "sonner";

const useShare = () => {
  const copy = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      toast.success(`Copied ${text} to clipboard!`);
    } catch (error) {
      console.error("Clipboard copy error:", error);
      toast.error("Clipboard copy failed.");
    }
  };

  const share = async (url: string, title: string, description: string) => {
    if (navigator.share) {
      try {
        await navigator.share({ title, text: description, url });
        console.log("Share successful!");
      } catch (error) {
        console.error("Sharing error:", error);
        toast.error("Sharing failed.");
        copy(url); // Fallback to copy
      }
    } else {
      console.error("Web Share API not supported.");
      toast.error("Web Share API not supported. Copying URL instead.");
      copy(url); // Fallback to copy
    }
  };

  return { copy, share };
};

export default useShare;</code>

오류를 우아하게 처리하십시오. 사용자에게 성공 또는 실패를 알립니다 간단하게 유지하십시오. 명확하고 간결한 버튼이 충분합니다

장치를 통해 철저히 테스트하십시오

useShare 리소스

1. 예제 프로젝트 (GitHub) : [해당되는 경우 github 링크를 삽입] copy 결론
2. 웹 공유 API는 전통적인 공유 방법에 대한 우수한 대안을 제공합니다. React 및 사려 깊은 오류 처리와 결합하여 사용자를위한 원활한 기본 공유 경험을 만들 수 있습니다. 다음 프로젝트에서 시도해보십시오! share

위 내용은 Web Share API와 반응하여 유연한 공유 시스템 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!