PWA에서 네이티브 공유 받기 구현하기

핵심 개념 한 줄 요약

• Web Share: 웹에서 공유하기를 여는 쪽 (navigator.share).

• Web Share Target: 공유받는 쪽 (안드로이드 네이티브 공유 시트 → 설치된 PWA).

최소 구현 가이드 (바로 붙여 넣기)

1) manifest.json

2) Service Worker(선택·권장) – 라우팅 핸들업

3) 클라이언트 페이지(/inbox)

• 업로드 큐(IndexedDB) → 서버 전송 진행률 표시

• 항목 타입별 렌더(텍스트/URL/파일)

안드로이드에서 잘 되게 하는 체크리스트

• PWA가 홈 화면에 설치되어 있어야 공유 타깃으로 노출됨.

• HTTPS + 유효한 manifest + SW 등록 필수.

• 파일 타입 허용 목록(accept)을 실제 용도에 맞게 좁혀 안정성 확보.

• 대용량 파일은 백그라운드 업로드(서비스 워커 + 백오프/재시도) 설계.

• /share는 POST + multipart/form-data만 오니 GET 접근시 가드.

• 공유 후 즉시 피드백: 토스트/리다이렉트로 “받음” 확실히 표시.

UX 팁 (send.huny.dev에 맞춤)

• 초심플 수신함: 오늘/이번 주/전체 필터, “클립보드로 복사”, “내 이메일로 포워드” 퀵액션.

• 자동 분류: URL → 프리뷰 카드, 이미지 → 썸네일, 텍스트 → 노트.

• 기기 간 연속성: QR로 열기, “1회성 다운로드 링크” 생성.

에러·호환 주의

• iOS 사파리는 share_target 미지원. iOS에선 대체 UX 제공(클립보드 감지/웹 Share만).

• 일부 브라우저(구형/벤더)는 공유 시트에 PWA를 안 보여줄 수 있음 → 설치 유도 배너 제공.

• 아주 큰 파일은 SW 메모리 부담 → 스트리밍 업로드(ReadableStream) 고려.