PWA의 URL 프로토콜 핸들러 등록

설치된 PWA에서 특정 프로토콜을 사용하는 링크를 처리하여 더욱 통합된 환경을 제공할 수 있습니다.

Thomas Steiner

스키마 (프로토콜)에 대한 배경 정보

URI (Uniform Resource Identifier)는 추상 리소스 또는 물리적 리소스를 식별하는 문자 시퀀스입니다. 각 URI는 스키마 내에 식별자를 할당하기 위한 사양을 참조하는 스키마 이름으로 시작합니다. 따라서 URI 구문은 제휴 및 확장 가능한 이름 지정 시스템으로, 각 스키마의 사양에서 해당 스키마를 사용하는 식별자의 구문과 시맨틱스를 추가로 제한할 수 있습니다. 스킴은 프로토콜이라고도 합니다. 아래에서 스키마의 몇 가지 예를 확인할 수 있습니다.

tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/

URL (Uniform Resource Locator)이라는 용어는 리소스 식별 외에도 기본 액세스 메커니즘 (예: 네트워크 위치)을 설명하여 리소스를 찾을 수 있는 수단을 제공하는 URI의 하위 집합을 나타냅니다.

registerProtocolHandler() 메서드의 배경

보안 콘텐츠 전용 Navigator 메서드 registerProtocolHandler()를 사용하면 사이트에서 특정 URL 스키마를 열거나 처리하는 기능을 등록할 수 있습니다. 따라서 사이트에서는 다음과 같이 메서드를 호출해야 합니다. navigator.registerProtocolHandler(scheme, url) 두 매개변수는 다음과 같이 정의됩니다.

  • scheme: 사이트에서 처리하려는 프로토콜이 포함된 문자열입니다.
  • url: 핸들러의 URL이 포함된 문자열입니다. 이 URL에는 처리할 이스케이프된 URL로 대체될 자리표시자로 %s가 포함되어야 합니다.

스키마는 허용 목록에 포함된 스키마 중 하나(예: mailto, bitcoin, magnet)이거나 web+로 시작하고 web+ 접두사 다음에 소문자 ASCII 문자가 하나 이상 있어야 합니다(예: web+coffee).

이해를 돕기 위해 흐름의 구체적인 예는 다음과 같습니다.

  1. 사용자가 https://coffeeshop.example.com/에서 navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s')를 호출하는 사이트를 방문합니다.
  2. 나중에 https://randomsite.example.com/를 방문하는 동안 사용자는 <a href="web+coffee:latte-macchiato">All about latte macchiato</a>와 같은 링크를 클릭합니다.
  3. 이렇게 하면 브라우저가 https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato URL로 이동합니다. 그런 다음 URL 디코딩된 검색 문자열은 ?type=web+coffee://latte-macchiato를 읽습니다.

프로토콜 처리의 의미

현재 PWA용 URL 프로토콜 핸들러 등록 메커니즘은 매니페스트를 통한 PWA 설치의 일부로 프로토콜 핸들러 등록을 제공하는 것과 관련이 있습니다. PWA를 프로토콜 핸들러로 등록한 후 사용자가 브라우저 또는 플랫폼별 앱에서 mailto , bitcoin, web+music 등 특정 스키마가 포함된 하이퍼링크를 클릭하면 등록된 PWA가 열리고 URL을 수신합니다. 제안된 매니페스트 기반 등록과 기존 registerProtocolHandler()는 둘 다 실제로 보완적인 사용자 환경을 제공하면서도 실제로 매우 유사한 역할을 수행한다는 점에 유의해야 합니다.

  • 유사점에는 등록이 허용된 스키마 목록에 관한 요구사항, 매개변수의 이름 및 형식 등이 포함됩니다.
  • 매니페스트 기반 등록의 차이점은 미묘하지만 PWA 사용자 환경을 개선하는 데 유용할 수 있습니다. 예를 들어 매니페스트 기반 PWA 등록에는 사용자가 시작한 PWA 설치 외에 추가적인 사용자 작업이 필요하지 않을 수 있습니다.

사용 사례

  • 워드 프로세싱 PWA에서 문서 사용자는 web+presentations://deck2378465와 같은 프레젠테이션 링크를 발견합니다. 사용자가 링크를 클릭하면 프레젠테이션 PWA가 자동으로 올바른 범위에서 열리고 슬라이드 자료가 표시됩니다.
  • 플랫폼별 채팅 앱에서 채팅 메시지의 사용자는 magnet URL 링크를 수신합니다. 링크를 클릭하면 설치된 토렌트 PWA가 실행되고 다운로드가 시작됩니다.
  • 사용자가 음악 스트리밍 PWA를 설치했습니다. 친구가 web+music://songid=1234&time=0:13와 같은 노래의 링크를 공유하고 사용자가 이를 클릭하면 음악 스트리밍 PWA가 독립형 창에서 자동으로 실행됩니다.

PWA에 URL 프로토콜 핸들러 등록을 사용하는 방법

URL 프로토콜 핸들러 등록을 위한 API는 navigator.registerProtocolHandler()를 근접하게 모델링합니다. 이때에만 정보가 두 개의 필수 키 "protocol" 및 "url"가 있는 객체의 배열을 가져오는 "protocol_handlers"이라는 새 속성의 웹 앱 매니페스트를 통해 선언적으로 전달됩니다. 아래의 코드 스니펫은 web+tea 및 web+coffee를 등록하는 방법을 보여줍니다. 값은 이스케이프된 URL의 필수 %s 자리표시자와 함께 핸들러의 URL이 포함된 문자열입니다.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

여러 앱이 동일한 프로토콜에 등록

여러 애플리케이션이 동일한 스키마(예: mailto 프로토콜)의 핸들러로 자체 등록되면 운영체제는 사용자에게 선택 도구를 표시하고 사용할 등록된 핸들러를 결정할 수 있도록 합니다.

동일한 앱이 여러 프로토콜에 등록됨

위의 코드 샘플에서 볼 수 있듯이 동일한 앱이 여러 프로토콜에 자체적으로 등록할 수 있습니다.

앱 업데이트 및 핸들러 등록

핸들러 등록은 앱에서 제공하는 최신 매니페스트 버전과 동기화됩니다. 다음과 같은 두 가지 경우가 있습니다.

  • 새 핸들러를 추가하는 업데이트는 앱 설치와 별개로 핸들러 등록을 트리거합니다.
  • 핸들러를 삭제하는 업데이트는 앱 제거와는 별도로 핸들러 등록 취소를 트리거합니다.

DevTools에서 프로토콜 핸들러 디버깅

Application > Manifest 창을 통해 프로토콜 핸들러 섹션으로 이동합니다. 여기에서 사용 가능한 모든 프로토콜을 보고 테스트할 수 있습니다.

예를 들어 이 데모 PWA를 설치합니다. 프로토콜 핸들러 섹션에서 'americano'를 입력하고 테스트 프로토콜을 클릭하여 PWA에서 커피 페이지를 엽니다.

매니페스트 창의 프로토콜 핸들러

데모

Glitch에서 PWA의 URL 프로토콜 핸들러 등록에 관한 데모를 볼 수 있습니다.

  1. https://protocol-handler.glitch.me/로 이동하여 PWA를 설치하고 설치 후 앱을 새로고침합니다. 이제 브라우저에서 PWA를 운영체제에 web+coffee 프로토콜의 핸들러로 등록했습니다.
  2. 설치된 PWA 창에서 https://protocol-handler-link.glitch.me/ 링크를 클릭합니다. 그러면 링크 3개가 포함된 새 브라우저 탭이 열립니다. 첫 번째나 두 번째 메뉴 (라테 마키아토 또는 아메리카노)를 클릭합니다. 이제 브라우저에 메시지가 표시되고 앱이 web+coffee 프로토콜의 프로토콜 핸들러 역할을 해도 괜찮은지 묻습니다. 동의하면 PWA가 열리고 선택한 커피가 표시됩니다.
  3. navigator.registerProtocolHandler()를 사용하는 기존 흐름과 비교하려면 PWA에서 등록 프로토콜 핸들러 버튼을 클릭합니다. 그런 다음 브라우저 탭에서 세 번째 링크(chai)를 클릭합니다. 마찬가지로 프롬프트를 표시하지만 브라우저 창이 아닌 탭에서 PWA를 엽니다.
  4. <a href="web+coffee://americano">Americano</a>와 같은 링크를 사용하여 Windows의 Skype와 같은 플랫폼별 애플리케이션에서 자신에게 메시지를 전송하고 클릭합니다. 마찬가지로 설치된 PWA가 열립니다.

왼쪽에 링크가 있는 브라우저 탭과 오른쪽에 독립형 PWA 창이 있는 URL 프로토콜 핸들러 데모

보안 고려사항

PWA 설치에는 컨텍스트가 안전해야 하므로 프로토콜 처리는 이 제약조건을 상속합니다. 등록된 프로토콜 핸들러 목록은 어떤 식으로든 웹에 노출되지 않으므로 디지털 지문 벡터로 사용할 수 없습니다.

사용자가 시작하지 않은 내비게이션 시도

사용자가 시작하지 않았지만 프로그래매틱 방식의 탐색 시도는 앱을 열지 못할 수도 있습니다. 맞춤 프로토콜 URL은 최상위 탐색 컨텍스트에서만 사용할 수 있으며 iframe의 URL 등으로 사용할 수 없습니다.

프로토콜 허용 목록

registerProtocolHandler()와 마찬가지로 앱이 처리하도록 등록할 수 있는 프로토콜의 허용 목록이 있습니다.

호출된 프로토콜로 인해 PWA를 처음 실행하면 사용자에게 권한 대화상자가 표시됩니다. 이 대화상자에는 앱의 이름과 출처가 표시되고 앱이 프로토콜의 링크를 처리할 수 있는지 사용자에게 묻습니다. 사용자가 권한 대화상자를 거부하면 등록된 프로토콜 핸들러가 운영체제에서 무시됩니다. 프로토콜 핸들러를 등록 취소하려면 사용자가 프로토콜 핸들러를 등록한 PWA를 제거해야 합니다. 또한 사용자가 '내 선택 기억'을 선택하고 '허용 안함'을 선택하면 브라우저에서 프로토콜 핸들러의 등록을 취소합니다.

의견

Chromium팀은 PWA의 URL 프로토콜 핸들러 등록 경험에 관한 의견을 듣고자 합니다.

API 설계에 대해 알려주세요.

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

구현 관련 문제 신고

Chromium 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 가능한 한 많은 세부정보와 간단한 재현 안내를 포함하고 구성요소 상자에 UI>Browser>WebAppInstalls를 입력합니다. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.

API 지원 표시

PWA에 URL 프로토콜 핸들러 등록을 사용할 계획이신가요? 공개적인 지원을 통해 Chromium팀이 기능의 우선순위를 정하는 데 도움을 주고, 이러한 기능을 지원하는 것이 얼마나 중요한지 다른 브라우저 공급업체에 알려줍니다.

사용 계획을 WICG 담화 대화목록에서 공유해 주세요. 해시태그 #ProtocolHandler를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.

감사의 말

PWA의 URL 프로토콜 핸들러 등록은 Microsoft Edge팀의 Fabio Rocha, Diego González, Connor Moody, Samuel Tang이 구현 및 지정했습니다. 이 문서는 Joe Medley 및 Fabio Rocha가 검토했습니다. Unsplash에 JJ Ying의 히어로 이미지입니다.