시스템 수준 공유 UI에서 플랫폼별 앱 옆에 PWA를 표시하는 방법
Web Share Target API를 사용하면 설치 후 사용자의 시스템 수준 공유 시트에 프로그레시브 웹 앱을 표시할 수 있습니다. 요청을 받을 수 있는 서버가 있으면 잘 작동하지만 그렇지 않으면 작업을 시작하기가 훨씬 어렵습니다.
이 문서에서는 웹 앱에 오프라인 지원을 추가하기 위한 JavaScript 라이브러리 세트인 Workbox를 사용하여 서비스 워커 내에 완전히 상주하는 공유 타겟 URL을 만듭니다. 이렇게 하면 정적 사이트와 단일 페이지 앱이 전용 서버 엔드포인트 없이 공유 대상으로 기능할 수 있습니다.
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를 활용하여 서비스 워커에서 직접 공유 타겟 경로를 만들면 앱에 이러한 제약 조건이 없어지고 오프라인 상태에서 백엔드가 없는 앱에서 Share Target이 작동할 수 있습니다.