Workbox를 사용하여 내장된 공유 UI에 PWA 통합

시스템 수준 공유 UI에서 PWA를 플랫폼별 앱 옆에 표시하는 방법

Jeff Posnick
Joe Medley
Joe Medley
GitHub
Sam Richard

Web Share Target API를 사용하면 프로그레시브 웹 앱이 설치된 후 사용자의 시스템 수준 공유 시트에 표시될 수 있습니다. 요청을 수신할 수 있는 서버가 있는 경우 잘 작동하지만 없는 경우에는 작동하기가 훨씬 어렵습니다.

이 도움말에서는 웹 앱에 오프라인 지원을 추가하는 JavaScript 라이브러리 집합인 Workbox를 사용하여 서비스 워커 내에 완전히 있는 공유 타겟 URL을 만듭니다. 이렇게 하면 정적 사이트와 단일 페이지 앱이 전용 서버 엔드포인트 없이 공유 타겟으로 작동할 수 있습니다.

'공유' 창이 열려 있는 Android 휴대전화
Share Target Test라는 설치된 PWA가 옵션으로 있는 시스템 수준 공유 타겟 선택기

같은 페이지에 표시

웹 공유 타겟의 작동 방식을 잘 모르는 경우 Web Share Target API로 공유 데이터 수신에서 자세히 알아볼 수 있습니다. 간단히 살펴보겠습니다.

웹 공유 타겟 기능을 구현하는 방법은 두 가지입니다. 먼저 앱이 설치될 때 공유 타겟이 되도록 웹 앱 매니페스트를 업데이트합니다. 다음 예시에서는 POST 요청을 통해 /share URL로 공유를 안내합니다. 제목은 name, 텍스트는 description, JPEG 이미지는 photos로 호출되는 멀티파트 형식으로 인코딩됩니다.

…
"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}
…

Workbox를 사용한 서비스 워커 공유 타겟

일반적으로 서버 엔드포인트에서 처리하지만 공유 타겟의 경우 서비스 워커에 직접 경로를 등록하여 요청을 처리할 수 있습니다. 이렇게 하면 백엔드 없이 앱을 공유 타겟으로 사용할 수 있습니다.

서비스 워커에서 처리하는 경로를 등록하여 Workbox에서 이를 실행합니다. 'workbox-routing'에서 registerRoute를 가져와서 시작합니다. 예시 웹 앱 매니페스트에 나열된 것과 동일한 /share 경로에 등록되어 있습니다. 이에 따라 shareTargetHandler()이 호출됩니다.

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

shareTargetHandler() 함수는 비동기이며 이벤트를 가져와 양식 데이터를 기다린 다음 여기에서 미디어 파일을 가져옵니다.

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

그런 다음 이러한 파일을 원하는 대로 사용할 수 있습니다. 캐시할 수 있습니다. fetch 요청을 사용하여 다른 곳으로 보낼 수 있습니다. 다른 매니페스트 옵션을 사용하여 다른 공유 항목의 쿼리 매개변수가 있는 페이지를 제공하거나 Cache Storage API 또는 IndexedDB에 미디어의 데이터와 포인터를 저장할 수도 있습니다.

샘플 앱 Fugu Journal에서 사용해 보고 소스 코드에서 서비스 워커 구현을 확인할 수 있습니다.

일반적으로 더 나은 네트워크 연결이 제공될 때까지 공유 리소스를 보유할 수 있습니다. Workbox는 주기적 백그라운드 동기화도 지원합니다.

결론

Share Target API는 프로그레시브 웹 앱을 사용자 기기에 긴밀하게 통합하여 앱 간 콘텐츠 공유라는 중요한 작업에서 플랫폼별 애플리케이션과 동등한 수준으로 만드는 간단한 방법입니다. 하지만 이렇게 하려면 요청을 수신할 수 있는 서버가 필요합니다. Workbox를 활용하여 서비스 워커에서 직접 공유 타겟 경로를 만들면 앱에 이러한 제약이 없어 오프라인 상태에서 백엔드 없이도 앱에서 공유 타겟이 작동할 수 있습니다.

사진: 일레인 카삽(Unsplash 제공)