선언적 링크 캡처로 범위 내 링크가 PWA를 여는 방법을 선택합니다.

Thomas Steiner

선언적 링크 캡처란 무엇인가요?

웹에서 링크를 클릭하면 때로는 뜻밖의 즐거움을 얻을 수 있습니다. 예를 들어 휴대기기에서 YouTube 웹페이지 링크를 클릭하면 YouTube iOS 또는 Android 앱(설치된 경우)이 열립니다. 하지만 데스크톱 컴퓨터에 YouTube PWA를 설치하고 링크를 클릭하면 브라우저 탭에서 열립니다.

하지만 더 복잡해집니다. 링크가 웹사이트가 아닌 Google의 채팅 앱 중 하나에서 수신한 채팅 메시지에 표시되는 경우 어떻게 해야 하나요? 별도의 앱 창 개념이 있는 데스크톱 운영체제에서 앱이 이미 열려 있는 경우 링크를 클릭할 때마다 새 창 또는 탭을 만들어야 하나요? 생각해 보면 링크와 탐색을 캡처하는 방법에는 다음을 포함하되 이에 국한되지 않는 여러 가지가 있습니다.

선언적 링크 캡처는 "capture_links"라는 웹 앱 매니페스트 속성에 관한 제안으로, 개발자가 브라우저에 탐색 범위 외부의 컨텍스트에서 애플리케이션의 탐색 범위 내에 있는 URL로 이동하라는 요청이 있을 때 어떤 일이 일어나야 하는지 선언적으로 결정할 수 있도록 합니다. 사용자가 이미 탐색 범위 내에 있는 경우(예: 사용자가 범위 내에 있는 브라우저 탭을 열고 내부 링크를 클릭하는 경우) 이 제안은 적용되지 않습니다.

링크를 가운데 클릭하거나 (또는 마우스 오른쪽 버튼을 클릭한 다음 '새 탭에서 열기')과 같은 일부 특수한 조건은 일반적으로 링크 캡처 동작을 트리거하지 않습니다. 링크가 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 이벤트가 있는 경우 탐색이 완료되기 전에 사용자에게 메시지가 표시됩니다.

데모

선언적 링크 캡처 데모는 실제로 서로 상호작용하는 두 가지 데모로 구성됩니다.

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

아래 스크린캐스트는 두 가지가 상호작용하는 방식을 보여줍니다. 두 가지 서로 다른 동작, "new-client" 및 "existing-client-navigate"을 보여줍니다. 탭에서 실행되거나 설치된 PWA로 실행되는 등 다양한 상태에서 앱을 테스트하여 동작의 차이를 확인해야 합니다.

보안 및 권한

Chromium팀은 사용자 제어, 투명성, 인체 공학을 비롯하여 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의된 핵심 원칙을 사용하여 선언적 링크 캡처를 설계하고 구현했습니다. 이 API를 사용하면 사이트에 새로운 제어 옵션을 추가할 수 있습니다. 첫째, 설치된 앱을 창에서 자동으로 열 수 있습니다. 이렇게 하면 기존 UI를 사용하지만 사이트에서 자동으로 트리거할 수 있습니다. 두 번째는 자체 도메인에 기존 창을 포커스하고 클릭한 URL이 포함된 이벤트를 실행하는 기능입니다. 이는 사이트가 기본 HTML 탐색 흐름을 재정의하여 기존 창을 새 페이지로 탐색할 수 있도록 하기 위한 것입니다.

Launch Handler API로 이전

Declarative Link Capturing API 오리진 트라이얼은 Chromium 97 이하에서 2022년 3월 30일에 만료되었습니다. Chromium 98 이상에서는 사용자 사용 설정 링크 캡처 및 Launch Handler API를 비롯한 새로운 기능 및 API 세트로 대체됩니다.

Chromium 98에서는 자동 링크 캡처가 웹 앱에 설치 시 부여되는 것이 아니라 사용자가 선택하는 동작이 되었습니다. 링크 캡처를 사용 설정하려면 사용자가 브라우저에서 Open with를 사용하여 설치된 앱을 실행하고 Remember my choice를 선택해야 합니다.

'선택사항 기억' 옵션이 사용 설정된 설치된 앱의 '다음으로 열기' 설정의 예

또는 사용자는 앱 관리 설정 페이지에서 특정 웹 앱의 링크 캡처를 사용 설정 또는 사용 중지할 수 있습니다.

설치된 앱의 설정 페이지 예

링크 캡처는 현재 ChromeOS 전용 기능입니다. Windows, macOS, Linux 지원은 현재 진행 중입니다.

Launch Handler API

수신 탐색의 제어는 Launch Handler API로 이전되며, 이를 통해 웹 앱은 링크 캡처, 공유 대상 또는 파일 처리와 같은 다양한 상황에서 웹 앱이 실행되는 방식을 결정할 수 있습니다. 선언적 링크 캡처 API에서 Launch Handler API로 이전하려면 다음 단계를 따르세요.

  1. Launch Handler 오리진 트라이얼에 사이트를 등록하고 오리진 트라이얼 키를 웹 앱에 배치합니다.

  2. 사이트 매니페스트에 "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에 트윗을 보내고 사용 중인 위치와 방법을 알려주세요.

유용한 링크

감사의 말씀

선언적 링크 캡처는 앨런 커터와 도미닉 응의 의견을 바탕으로 맷 지우카가 지정했습니다. 이 API는 앨런 커터님이 구현했습니다. 이 도움말은 조 미들리, 매트 지우카, 앨런 커터, 시시도 슈냐가 검토했습니다. Unsplash의 Zulmaury Saavedra님 제공 히어로 이미지