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

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

Web Share Target API를 사용하면 프로그레시브 웹 앱을 사용자의 시스템 수준 공유 시트를 표시합니다. 서버가 있는 경우라면 잘 작동하지만 요청을 받을 수 있지만 그러지 않으면 작업하기가 훨씬 더 어렵습니다.

이 도움말에서는 Workbox - JavaScript 집합 공유 타겟 URL을 만들기 위해 웹 앱에 오프라인 지원을 추가하는 라이브러리 서비스 워커 내에 완전히 상주하는 역할을 합니다. 이렇게 하면 정적 사이트와 단일 페이지 앱은 전용 서버 엔드포인트가 없는 공유 타겟 역할을 합니다.

<ph type="x-smartling-placeholder">
</ph> &#39;다음을 통해 공유&#39; 기능이 있는 Android 휴대전화 창이 열려 있습니다. <ph type="x-smartling-placeholder">
</ph> 설치된 PWA가 있는 시스템 수준 공유 타겟 선택 도구 Share Target Test 옵션을 사용할 수 있습니다.

같은 페이지

Web Share Target의 작동 방식에 익숙하지 않은 경우 Web Share로 공유 데이터 받기 대상 API에서 자세한 소개를 확인할 수 있습니다. 간단히 살펴보겠습니다.

웹 공유 타겟 기능을 구현하는 작업은 두 부분으로 구성됩니다. 먼저, 앱을 공유하도록 지정하도록 웹 앱 매니페스트를 업데이트합니다. 타겟으로 설정합니다. 다음 예는 공유를 /share URL로 전달합니다. (POST 요청을 통해) 멀티파트 형식으로 인코딩되며 제목은 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
};

그러면 해당 파일로 원하는 작업을 할 수 있습니다. 캐시할 수 있습니다. 나 가져오기 요청을 통해 어딘가로 보낼 수 있습니다 다른 포드의 상태를 다른 매니페스트 파일에 대한 일부 쿼리 매개변수가 있는 페이지를 제공할 수 있습니다. 캐시 저장공간에 데이터를 저장하고 이에 대한 포인터를 API 또는 IndexedDB.

샘플 앱 Fugu에서 사용해 볼 수 있습니다. 저널을 작성하고 서비스 워커를 확인합니다. Google Cloud에서 제공하는 코드를 생성합니다.

한 가지 일반적인 방법은 네트워크 성능이 향상될 때까지 공유 리소스를 유지하는 것입니다. 연결을 사용할 수 있습니다. Workbox는 주기적 배경도 지원 동기화를 클릭합니다.

결론

Share Target API는 프로그레시브 웹 앱을 심층적으로 통합하는 간단한 방법입니다. 앱에 연결하여 사용자 기기에 대한 플랫폼별 애플리케이션과 동등한 수준으로 앱 간에 콘텐츠를 공유하는 중요한 태스크에 해당합니다. 하지만 그렇게 하려면 일반적으로 요청을 수신할 수 있는 서버에만 게재됩니다. Workbox를 활용하여 공유 생성 대상 경로를 직접 지정하는 경우 앱에서는 제약조건이 있어 공유 타겟이 오프라인 및 사용할 수 있습니다

사진: Elaine Casap, Unsplash