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

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

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
};

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

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

일반적으로 더 나은 네트워크 연결을 사용할 수 있을 때까지 공유 리소스를 보류하는 경우가 많습니다. Workbox는 주기적 백그라운드 동기화도 지원합니다.

결론

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

사진: Unsplash일레인 카사프