시스템 수준 공유 UI에서 플랫폼별 앱 옆에 PWA를 표시하는 방법
Web Share Target API를 사용하면 프로그레시브 웹 앱을 사용자의 시스템 수준 공유 시트를 표시합니다. 서버가 있는 경우라면 잘 작동하지만 요청을 받을 수 있지만 그러지 않으면 작업하기가 훨씬 더 어렵습니다.
이 도움말에서는 Workbox - JavaScript 집합 공유 타겟 URL을 만들기 위해 웹 앱에 오프라인 지원을 추가하는 라이브러리 서비스 워커 내에 완전히 상주하는 역할을 합니다. 이렇게 하면 정적 사이트와 단일 페이지 앱은 전용 서버 엔드포인트가 없는 공유 타겟 역할을 합니다.
<ph type="x-smartling-placeholder">같은 페이지
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