핸들러 API 실행

앱이 실행되는 방식을 관리합니다.

Thomas Steiner

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

현재 상태

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

Launch Handler API 사용

브라우저 지원

브라우저 지원

  • Chrome: 110.
  • Edge: 110.
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

소스

인터페이스

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. Chat 앱에서 링크를 클릭하면 Musicr 2.0이 열리고 트랙이 재생되는 것을 확인할 수 있습니다.
  4. 채팅 앱에서 링크를 다시 클릭하면 Musicr 2.0이 두 번째로 실행되지 않습니다.

의견

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

API 설계 설명

API에 예상대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되어 있나요? 보안 모델에 대한 질문이나 의견이 있으신가요? 해당 GitHub 저장소에서 사양 문제를 신고하거나 기존 문제에 의견을 추가하세요.

구현 문제 신고

Chromium 구현에 버그가 있나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보와 재현 안내를 포함하고 구성요소 상자에 Blink>AppManifest를 입력합니다. Glitch는 빠른 재현을 공유하는 데 적합합니다.

API 지원 표시

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

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

유용한 링크