다음을 통해 공유

Windows Share와 프로그레시브 웹 앱 통합

  • 아티클

이 문서에서는 PWA(프로그레시브 웹 앱)를 Windows Share 기능과 통합하는 방법을 설명합니다. 이 기능을 사용하면 사용자가 한 Windows 앱에서 다른 앱으로 콘텐츠를 공유할 수 있습니다. PWA는 앱 내에서 공유 파일을 수신하고 처리하기 위해 공유 대상으로 등록됩니다.

공유 대상이란?

공유 대상은 Windows 8에서 도입된 기능이며 앱이 다른 앱으로부터 데이터를 받을 수 있도록 합니다. 공유 대상은 클립보드처럼 작동하지만 동적 콘텐츠를 다룹니다.

PWA로부터 콘텐츠 공유

콘텐츠를 공유하기 위해 PWA는 콘텐츠(예: 텍스트, 링크 또는 파일)를 생성하고 공유 콘텐츠를 운영 체제에 제공합니다. 운영 체제를 사용하면 사용자가 해당 콘텐츠를 수신하는 데 사용할 앱을 결정할 수 있습니다. PWA는 Web Share API를 사용하여 Windows에서 Share 시트 표시를 트리거할 수 있습니다. Web Share API는 Microsoft Edge 및 기타 Chromium 기반 브라우저에서 지원됩니다.

PWA에서 콘텐츠를 공유하는 방법에 대한 전체 예시는 Microsoft Edge 설명서의 콘텐츠 공유를 참조하세요.

PWA에서 공유 파일 받기

콘텐츠를 수신하기 위해 PWA는 콘텐츠 대상 역할을 합니다. PWA는 콘텐츠 공유 대상으로 운영 체제에 등록되어야 합니다.

share_target 구성원은 공유 콘텐츠를 앱에 전달하기 위해 시스템에 필요한 정보를 포함해야 합니다. 다음 샘플 매니페스트 share_target 구성을 고려하세요.

"share_target": {
  "action": "./share_target_path/?custom_param=foo",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "mapped_files",
        "accept": ["image/jpeg"]
      }
    ]
  }
},

사용자가 공유 콘텐츠의 대상으로 앱을 선택하면 PWA가 실행됩니다. action 속성에서 지정한 URL에 대해 GET HTTP 요청이 이루어집니다. 공유 데이터는 title, text, url 쿼리 매개 변수로 전달됩니다. 다음 요청이 수행됩니다. /handle-shared-content/?title=shared title&text=shared text&url=shared url

다음 예시에서는 범위가 지정된 서비스 작업자를 등록하는 방법을 보여 줍니다.

navigator.serviceWorker.register('scoped-service-worker.js',
                { scope: "./share_target_path/" })

서비스 작업자는 공유 데이터를 원하는 대로 처리한 다음 요청을 처리하거나 사용자 지정 경로에서 요청을 다시 리디렉션할 수 있습니다. 다음 예시에서는 사용자 지정 경로에서 요청을 다시 리디렉션하는 방법을 보여 줍니다.

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        // Read the shared data here, then
        // Redirect back out of the share_target_path to the actual site
        return Response.redirect(event.request.url.replace("share_target_path/", ""));
    })());
    return;
});

자세한 내용은 Microsoft Edge 설명서의 공유 콘텐츠 수신 예시를 참조하세요.

성능 고려 사항

페치 처리기가 공유 지원을 위해서만 추가되는 경우 서비스 작업자가 요청을 중단하면 잠재적 대기 시간 문제가 발생할 수 있습니다. 이 문제를 해결하려면 의사 하위 경로로 share_target을(를) 설정하고 해당 경로로 구체적으로 범위가 지정된 서비스 작업자를 등록하는 것이 좋습니다. 이 방법을 사용하면 다른 호출에 대해 동일한 페치 처리기를 등록하지 않고 공유 대상에 대해 페치 처리기를 사용할 수 있습니다.

샘플 PWA 앱

GitHub의 PWA 로고 프린터 샘플 앱은 PWA를 Windows Share 시트와 통합하는 방법을 보여 줍니다. 이 앱을 사용하면 사용자가 PWA 로고를 프린터에 인쇄할 수 있습니다. 앱은 Windows Share 시트를 사용하여 로고를 다른 앱과 공유합니다.

참고 항목