핸들러 API 실행

앱이 실행되는 방식을 제어합니다.

Thomas Steiner

Launch Handler API를 사용하면 앱이 실행되는 방식(예: 기존 창을 사용하는지 또는 새 창을 사용하는지, 선택한 창이 실행 URL로 이동하는지 여부)을 제어할 수 있습니다. 마찬가지로 File Handing API를 사용하면 시작된 페이지의 window.launchQueue에 LaunchParams 객체도 추가됩니다.

현재 상태

단계 상태
1. 설명 동영상 만들기 완전함
2. 사양의 초기 초안 만들기 완전함
3. 의견 수집 및 디자인 반복 완료
4. 오리진 트라이얼입니다. 완료
5. 출시 완전함

Launch Handler API 사용

브라우저 지원

브라우저 지원

  • Chrome: 110 <ph type="x-smartling-placeholder">
  • Edge: 110.
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음 <ph type="x-smartling-placeholder">

소스

인터페이스

Launch Handler API는 두 가지 새로운 인터페이스를 정의합니다.

LaunchParams : 소비자가 처리할 targetURL가 포함된 객체입니다. LaunchQueue : 지정된 소비자가 처리할 때까지 큐가 실행됩니다.

launch_handler 매니페스트 멤버

앱의 실행 동작을 선언적으로 지정하려면 launch_handler 매니페스트 멤버를 추가합니다. 추가해야 합니다 client_mode라는 하위 필드가 하나 있습니다. 새 광고인지 또는 새 광고인지 설정할 수 있는 기존 클라이언트를 시작해야 하고 이 클라이언트를 탐색해야 하는지 여부입니다. 다음 예를 참고하세요. 모든 실행을 항상 새로운 있습니다

{
  "launch_handler": {
    "client_mode": "navigate-new"
  }
}

지정하지 않으면 launch_handler의 기본값은 {"client_mode": "auto"}입니다. 이 하위 필드는 다음과 같습니다.

  • client_mode:
    • navigate-new: 실행의 타겟 URL을 로드하기 위해 웹 앱 창에 새 탐색 컨텍스트가 생성됩니다.
    • navigate-existing: 웹 앱 창에서 가장 최근에 상호작용한 탐색 컨텍스트가 실행의 타겟 URL로 이동합니다.
    • focus-existing: 웹 앱 창에서 가장 최근에 상호작용한 탐색 컨텍스트가 실행을 처리하도록 선택됩니다. targetURL이 실행 URL로 설정된 새 LaunchParams 객체가 문서의 window.launchQueue에 큐에 추가됩니다.
    • auto: 플랫폼에 가장 적합한 동작을 결정하는 동작은 사용자 에이전트에 달려 있습니다. 대상 예를 들어 휴대기기는 단일 클라이언트만 지원하고 existing-client를 사용하는 반면 데스크톱 기기는 여러 창을 지원하며 데이터 손실을 방지하기 위해 navigate-new를 사용합니다.

client_mode 속성은 값 목록 (배열)도 허용하며 여기서 첫 번째 유효한 값은 있습니다. 이는 기존 구현과의 하위 호환성을 유지하면서 새 값을 사양에 추가할 수 있도록 하기 위함입니다.

예를 들어 가상의 값 "focus-matching-url"가 추가된 경우 사이트는 "focus-matching-url"를 지원하지 않는 이전 브라우저의 동작을 계속 제어하기 위해 "client_mode": ["focus-matching-url", "navigate-existing"]를 지정합니다.

window.launchQueue 사용

다음 코드에서 extractSongID() 함수는 실행 시 전달된 URL에서 songID를 추출합니다. 음악 플레이어 PWA에서 노래를 재생하는 데 사용됩니다.

if ('launchQueue' in window) {
  launchQueue.setConsumer((launchParams) => {
    if (launchParams.targetURL) {
      const songID = extractSongId(launchParams.targetURL);
      if (songID) {
        playSong(songID);
      }
    }
  });
}

데모

PWA Launch Handler 데모에서 Launch Handler API가 작동하는 모습을 확인할 수 있습니다. 애플리케이션의 소스 코드를 확인하여 Launch Handler API를 사용하는 방법을 확인하세요.

  1. Musicr 2.0 앱을 설치합니다.
  2. 양식의 채팅 신청서에 링크를 보냅니다. https://launch-handler.glitch.me?track=https://example.com/music.mp3 오디오 파일을 가리키는 모든 URL(예: https://launch-handler.glitch.me?track=https://cdn.glitch.me/3e952c9c-4d6d-4de4-9873-23cf976b422e%2Ffile_example_MP3_700KB.mp3?v=1638795977190)에 대해 https://example.com/music.mp3를 맞춤설정할 수 있습니다.
  3. 채팅 앱에서 링크를 클릭하면 Musicr 2.0에서 트랙을 열고 재생하는 방법을 확인할 수 있습니다.
  4. 채팅 앱에서 링크를 다시 클릭하면 Musicr 2.0

의견

Chromium팀은 Launch Handler API 사용 경험에 관한 의견을 듣고자 합니다.

API 설계 설명

API에 예상대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안에 대한 질문이나 의견이 있으면 무엇인가요? 해당 GitHub 저장소에서 사양 문제를 신고하거나 해결할 수 있습니다.

구현 문제 신고

Chromium 구현에 버그가 있나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 최대한 자세하게 작성해 주시기 바랍니다. 안내를 따른 다음 구성요소 상자에 Blink>AppManifest를 입력합니다. 글리치는 빠른 재현을 공유할 때 유용합니다.

API 지원 표시

Launch Handler API를 사용할 계획인가요? 공개적으로 지원하면 Chromium팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

#LaunchHandler 해시태그를 사용하여 @ChromiumDev에 트윗을 보내고 사용 중인 위치와 사용 방법을 알려주세요.

유용한 링크