📲 Web Share Target API 완벽 가이드: 네이티브 공유 시트에 웹 앱 등록하기

{
  "name": "Logic Phantom Collector",
  "short_name": "LP Collector",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "share_target": {
    "action": "/share-target",
    "method": "GET",
    "params": {
      "title": "shared_title",
      "text": "shared_text",
      "url": "shared_url"
    }
  }
}

https://example.com/share-target?shared_title=놀라운%20오픈소스%20프로젝트&shared_url=https%3A%2F%2Fgithub.com%2Fexample%2Frepo

// /pages/share-target.js 혹은 진입 컴포넌트
window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location.href);
  
  const title = parsedUrl.searchParams.get('shared_title');
  const text = parsedUrl.searchParams.get('shared_text');
  const sharedUrl = parsedUrl.searchParams.get('shared_url');

  if (title || text || sharedUrl) {
    console.log('공유된 데이터 수신 성공:', { title, text, sharedUrl });
    
    // 인풋 폼에 자동 입력하거나 북마크 저장 팝업 오픈
    populateShareForm({ title, text, url: sharedUrl });
    
    // 중요: URL 정리를 통해 새로고침 시 중복 처리 방지
    window.history.replaceState({}, document.title, '/share-target');
  }
});

function populateShareForm({ title, text, url }) {
  const input = document.querySelector('#note-input');
  input.value = [title, text, url].filter(Boolean).join('\n');
}

{
  "share_target": {
    "action": "/handle-share",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "files": [
        {
          "name": "media",
          "accept": ["image/*", "application/pdf"]
        }
      ]
    }
  }
}

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);

  // 매니페스트에 지정한 action URL과 POST 메서드 검사
  if (url.pathname === '/handle-share' && event.request.method === 'POST') {
    event.respondWith(handleSharedPayload(event.request));
  }
});

async function handleSharedPayload(request) {
  const formData = await request.formData();
  const title = formData.get('name');
  const description = formData.get('description');
  const files = formData.getAll('media'); // 'files[0].name'과 일치

  // 대용량 파일은 브라우저 Cache Storage나 IndexedDB에 임시 보관
  const cache = await caches.open('shared-media-cache');
  
  // 각 파일을 캐시에 저장
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const cacheKey = `/temp-shared/${Date.now()}_${i}_${encodeURIComponent(file.name)}`;
    await cache.put(cacheKey, new Response(file, {
      headers: {
        'content-type': file.type,
        'x-file-name': encodeURIComponent(file.name)
      }
    }));
  }

  // 사용자가 볼 뷰 페이지로 303 Redirect 실행
  return Response.redirect('/gallery?shared=true', 303);
}

// /gallery 페이지 로드 시 캐시에서 파일 복원
window.addEventListener('DOMContentLoaded', async () => {
  const params = new URLSearchParams(window.location.search);
  if (params.get('shared') === 'true') {
    const cache = await caches.open('shared-media-cache');
    const requests = await cache.keys();

    for (const request of requests) {
      if (request.url.includes('/temp-shared/')) {
        const response = await cache.match(request);
        const blob = await response.blob();
        const filename = decodeURIComponent(response.headers.get('x-file-name'));
        
        renderPreview(blob, filename);
        
        // 처리 완료 후 임시 캐시 삭제
        await cache.delete(request);
      }
    }
    
    // 쿼리 스트링 청소
    window.history.replaceState({}, document.title, '/gallery');
  }
});

function renderPreview(blob, name) {
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  img.alt = name;
  document.querySelector('#container').appendChild(img);
}

{
  "share_target": {
    "action": "/import-assets",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "images",
          "accept": ["image/jpeg", "image/png", "image/webp", "image/svg+xml"]
        },
        {
          "name": "documents",
          "accept": [".pdf", ".md", "text/plain", "application/json"]
        }
      ]
    }
  }
}

{
  "launch_handler": {
    "client_mode": "focus-existing"
  }
}

[ 외부 앱 (OS 공유 시트) ]
          │
          ▼ POST multipart/form-data
[ Service Worker (sw.js) ]
  ├── Cache Storage에 Blob 저장
  ├── BroadcastChannel('share-bus')로 메시지 브로드캐스트
  └── 303 Redirect to /app
          │
          ▼
[ Client Page (/app) ]
  ├── 브로드캐스트 수신 시 인메모리 UI 갱신
  └── 직접 열렸을 경우 URL 파라미터 확인 후 캐시 소각

// sw.js
const broadcast = new BroadcastChannel('lp_share_channel');

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  
  if (url.pathname === '/share-receive' && event.request.method === 'POST') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const file = formData.get('file_payload');
      const text = formData.get('text_payload') || '';
      const shareId = crypto.randomUUID();

      if (file) {
        const cache = await caches.open('share-cache-v1');
        await cache.put(`/shares/${shareId}`, new Response(file, {
          headers: { 'Content-Type': file.type }
        }));
      }

      // 활성화된 클라이언트가 있다면 즉시 알림
      broadcast.postMessage({
        type: 'SHARE_RECEIVED',
        shareId,
        hasFile: Boolean(file),
        text
      });

      return Response.redirect(`/app?shared_id=${shareId}`, 303);
    })());
  }
});

// app.js
const broadcast = new BroadcastChannel('lp_share_channel');

broadcast.onmessage = async (event) => {
  if (event.data?.type === 'SHARE_RECEIVED') {
    const { shareId, hasFile, text } = event.data;
    showToast('새로운 공유 데이터를 수신했습니다.');
    await processIncomingShare(shareId, hasFile, text);
  }
};

async function processIncomingShare(shareId, hasFile, text) {
  if (hasFile) {
    const cache = await caches.open('share-cache-v1');
    const res = await cache.match(`/shares/${shareId}`);
    if (res) {
      const blob = await res.blob();
      displaySharedImage(blob);
      await cache.delete(`/shares/${shareId}`);
    }
  }
  if (text) {
    displaySharedText(text);
  }
}