선언적 링크 캡처란 무엇인가요?
웹에 있는 링크를 클릭하는 것은 뜻밖의 즐거움이 될 수 있습니다. 예를 들어 휴대기기에서 YouTube 웹페이지 링크를 클릭하면 YouTube iOS 또는 Android 앱이 설치되어 있는 경우 열립니다. 하지만 데스크톱 컴퓨터에 YouTube PWA를 설치하고 링크를 클릭하면 브라우저 탭에서 열립니다.
하지만 점점 더 복잡해집니다. 웹사이트가 아니라 Google의 채팅 앱 중 하나에서 받은 채팅 메시지에 링크가 표시되면 어떻게 해야 하나요? 별도의 앱 창이라는 개념이 있는 데스크톱 운영체제에서 앱이 이미 열려 있는 경우 링크를 클릭할 때마다 새 창이나 탭을 만들어야 하나요? 생각해보면 다음과 같은 다양한 방법으로 링크와 탐색을 캡처할 수 있습니다.
- 다른 웹페이지에서 링크를 클릭함
- URL이 운영체제의 플랫폼별 앱에서 실행됩니다.
- App Shortcuts API에서 시작된 탐색
- URL 프로토콜 핸들러를 통과하는 링크
- 파일 핸들러로 인한 탐색
- Share Target API로 인한 탐색
- 기타 등등
선언적 링크 캡처는 브라우저가 탐색 범위 외부의 컨텍스트에서 애플리케이션의 탐색 범위 내에 있는 URL로 이동하도록 요청받을 때 발생해야 하는 작업을 개발자가 선언적으로 결정할 수 있는 "capture_links"라는 웹 앱 매니페스트 속성에 관한 제안입니다. 사용자가 이미 탐색 범위 내에 있는 경우(예: 사용자가 범위 내에 있는 브라우저 탭을 열고 내부 링크를 클릭하는 경우) 이 제안은 적용되지 않습니다.
링크 가운데 클릭 (또는 마우스 오른쪽 버튼을 클릭한 후 '새 탭에서 열기')과 같은 일부 특수 조건은 일반적으로 링크 캡처 동작을 트리거하지 않습니다. 링크가 target=_self인지 target=_blank인지는 중요하지 않습니다. 따라서 브라우저 창 (또는 다른 PWA의 창)에서 클릭된 링크는 일반적으로 동일한 탭 내에서 탐색이 발생하더라도 PWA에서 열립니다.
추천 사용 사례
이 API를 사용할 수 있는 사이트의 예는 다음과 같습니다.
- 사용자가 창 링크를 클릭했을 때 브라우저 탭이 아닌 창을 열려고 하는 PWA 데스크톱 환경에서는 한 번에 여러 개의 애플리케이션 창을 여는 것이 적합한 경우가 많습니다.
- 단일 창 PWA에서는 개발자가 언제든지 단일 앱 인스턴스만 열고자 하며 새로운 탐색은 기존 인스턴스에 집중됩니다. 하위 사용 사례에는 다음이 포함됩니다.
- 하나의 인스턴스만 실행해야 하는 앱 (예: 음악 플레이어, 게임)
- 단일 인스턴스 내에 여러 문서 관리를 포함하는 앱 (예: HTML로 구현된 탭 스트립)
about://flags를 통해 사용 설정 중입니다.
오리진 트라이얼 토큰 없이 로컬에서 선언적 링크 캡처를 실험하려면 about://flags에서 #enable-desktop-pwas-link-capturing 플래그를 사용 설정합니다.
선언적 링크 캡처 사용 방법
개발자는 추가 웹 앱 매니페스트 필드 "capture_links"를 활용하여 링크를 캡처하는 방법을 선언적으로 결정할 수 있습니다. 문자열 또는 문자열 배열을 값으로 사용합니다. 문자열 배열이 주어지면 사용자 에이전트는 목록에서 지원되는 첫 번째 항목을 선택하며 기본값은 "none"입니다. 다음과 같은 값이 지원됩니다.
"none"(기본값): 링크 캡처 없음. 이 PWA 범위로 연결되는 링크를 클릭하면 PWA 창을 열지 않고도 정상적으로 탐색됩니다."new-client": 클릭된 각 링크를 클릭하면 해당 URL에서 새 PWA 창이 열립니다."existing-client-navigate": 클릭된 링크가 기존 PWA 창(사용 가능한 경우)에 열리고, 없는 경우 새 창에서 열립니다. PWA 창이 두 개 이상 있는 경우 브라우저가 임의로 하나를 선택할 수 있습니다. 현재 열려 있는 창이 없으면"new-client"처럼 동작합니다. 🚨 주의해 주세요. 이 옵션을 사용하면 페이지를 임의로 다른 페이지로 이동할 수 있으므로 데이터가 손실될 수 있습니다. 사이트에서는 이 옵션을 선택하여 이러한 행동을 하고 있다는 사실을 인지해야 합니다. 이 옵션은 메모리에 사용자 데이터를 보관하지 않는 '읽기 전용' 사이트(예: 음악 플레이어)에 가장 적합합니다. 다른 페이지로 이동할 페이지에beforeunload이벤트가 있으면 탐색이 완료되기 전에 사용자에게 메시지가 표시됩니다.
데모
선언적 링크 캡처의 데모는 실제로 함께 상호작용하는 다음 두 데모로 구성됩니다.
아래의 스크린캐스트는 이 둘이 상호작용하는 방식을 보여줍니다. 두 가지 동작("new-client" 및 "existing-client-navigate")을 보여줍니다. 동작의 차이를 확인하려면 탭에서 실행되거나 설치된 PWA로 실행되는 여러 상태의 앱을 테스트해야 합니다.
보안 및 권한
Chromium팀은 사용자 제어, 투명성, 인체공학 등 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의된 핵심 원칙을 사용하여 선언적 링크 캡처를 설계하고 구현했습니다. 이 API를 사용하면 사이트의 새로운 추가 관리 옵션을 사용할 수 있습니다. 첫째, 창에서 설치된 앱을 자동으로 열 수 있어야 합니다. 이는 기존 UI를 사용하지만 사이트에서 자동으로 트리거할 수 있습니다. 둘째, 자체 도메인의 기존 창에 포커스를 맞추고 클릭된 URL이 포함된 이벤트를 실행하는 기능입니다. 이는 사이트에서 기본 HTML 탐색 흐름을 재정의하여 기존 창에서 새 페이지로 이동할 수 있도록 하기 위한 것입니다.
Launch Handler API로 이전
Chromium 97 이하에서 선언형 Link Capturing API 오리진 트라이얼이 2022년 3월 30일에 만료되었습니다. 이 기능은 Chromium 98 이상에서 일련의 새로운 기능 및 API로 대체되며 여기에는 사용자 지원 링크 캡처 및 Launch Handler API가 포함됩니다.
링크 캡처
Chromium 98에서 이제 자동 링크 캡처는 웹 앱에 설치 시 부여되는 것이 아니라 사용자 선택 동작입니다. 링크 캡처를 사용 설정하려면 사용자가 연결 프로그램을 사용하여 브라우저에서 설치된 앱을 실행하고 내 선택 기억하기를 선택해야 합니다.
또는 사용자가 앱 관리 설정 페이지에서 특정 웹 앱의 링크 캡처를 사용 설정 또는 사용 중지로 전환할 수 있습니다.
링크 캡처는 현재 ChromeOS 전용 기능입니다. Windows, macOS, Linux를 위한 지원이 진행 중입니다.
핸들러 API 실행
수신 탐색의 컨트롤이 Launch Handler API로 이전되었습니다. 이를 통해 웹 앱이 링크 캡처, 공유 타겟 또는 파일 처리와 같은 다양한 상황에서 웹 앱이 실행되는 방식을 결정할 수 있습니다. 선언적 Link Capturing API에서 Launch Handler API로 이전하는 방법은 다음과 같습니다.
- 핸들러 오리진 트라이얼 실행에 사이트를 등록하고 오리진 트라이얼 키를 웹 앱에 배치합니다.
사이트의 매니페스트에
"launch_handler"항목을 추가합니다."capture_links": "new-client"를 사용하려면"launch_handler": { "route_to": "new-client" }를 추가합니다."capture_links": "existing-client-navigate"를 사용하려면"launch_handler": { "route_to": "existing-client-navigate" }를 추가합니다.- 선언적 링크 캡처 오리진 트라이얼에서 구현되지 않은
"capture_links": "existing-client-event"를 사용하려면"launch_handler": { "route_to": "existing-client-retain" }를 추가합니다. 이 옵션을 사용하면 링크 탐색이 캡처될 때 앱 범위의 페이지가 더 이상 자동으로 탐색되지 않습니다. 탐색을 사용 설정하려면window.launchQueue.setConsumer()를 호출하여 JavaScript에서LaunchParams를 처리해야 합니다.
capture_links 필드와 선언적 링크 캡처 오리진 트라이얼 등록은 2022년 3월 30일까지 유효합니다. 이렇게 하면 Chromium 97 이하 사용자가 캡처된 링크에서 웹 앱을 계속 실행할 수 있습니다.
자세한 내용은 앱 실행 방식 관리하기를 참고하세요.
의견
선언적 링크 캡처 사용 경험에 관해 Chromium팀에 듣고자 합니다.
API 설계에 대해 알려주세요.
API에서 예상한 대로 작동하지 않는 부분이 있나요? 아니면 아이디어를 구현하는 데 필요한 메서드나 속성이 누락되었나요? 보안 모델에 대한 질문이나 의견이 있으신가요? 관련 GitHub 저장소에서 사양 문제를 제출하거나 기존 문제에 대한 의견을 추가하세요.
구현 관련 문제 신고
Chromium 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요?
new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함하고 구성요소 상자에 UI>Browser>WebAppInstalls를 입력합니다. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.
API 지원 표시
선언적 링크 캡처를 사용할 계획이신가요? 공개 지원은 Chromium팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.
해시태그 #DeclarativeLinkCapturing를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.
유용한 링크
감사의 말
선언적 링크 캡처는 맷 지우카가 Alan Cutter 및 Dominick Ng의 입력을 통해 지정했습니다. 이 API는 Alan Cutter가 구현했습니다. 이 자료는 Joe Medley, Matt Giuca, Alan Cutter, Shunya Shishido가 검토했습니다. Unsplash에서 Zulmaury Saavedra의 히어로 이미지입니다.