이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

설치된 PWA가 더 통합된 환경을 위해 특정 프로토콜을 사용하는 링크를 처리하도록 허용합니다.

Thomas Steiner

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

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

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

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

`registerProtocolHandler()` 메서드에 관한 배경 정보

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

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

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

이해를 돕기 위해 다음은 흐름의 구체적인 예입니다.

사용자가 다음을 호출하는 https://coffeeshop.example.com/의 사이트를 방문합니다. navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s')
나중에 https://randomsite.example.com/를 방문하는 동안 사용자는 <a href="web+coffee:latte-macchiato">All about latte macchiato</a>와 같은 링크를 클릭합니다.
이렇게 하면 브라우저가 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_handlers"이라는 새 속성에 선언적으로 전달됩니다. 이 속성은 두 개의 필수 키인 "protocol" 및 "url"가 있는 객체의 배열을 가져옵니다. 아래 코드 스니펫은 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에서 프로토콜 핸들러 디버깅

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

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

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

데모

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

https://protocol-handler.glitch.me/로 이동하여 PWA를 설치하고 설치 후 앱을 새로고침합니다. 이제 브라우저가 PWA를 운영체제의 web+coffee 프로토콜 핸들러로 등록했습니다.
설치된 PWA 창에서 링크 https://protocol-handler-link.glitch.me/를 클릭합니다. 그러면 링크 3개가 포함된 새 브라우저 탭이 열립니다. 첫 번째 또는 두 번째 (라테 마키아토 또는 아메리카노)를 클릭합니다. 이제 브라우저에 메시지가 표시되고 앱이 web+coffee 프로토콜의 프로토콜 핸들러가 되는 것이 괜찮은지 묻습니다. 동의하면 PWA가 열리고 선택한 커피가 표시됩니다.
navigator.registerProtocolHandler()를 사용하는 기존 흐름과 비교하려면 PWA에서 프로토콜 핸들러 등록 버튼을 클릭합니다. 그런 다음 브라우저 탭에서 세 번째 링크(chai)를 클릭합니다. 마찬가지로 메시지가 표시되지만 브라우저 창이 아닌 탭에서 PWA가 열립니다.
Windows용 Skype와 같은 플랫폼별 애플리케이션에서 <a href="web+coffee://americano">Americano</a>과 같은 링크가 포함된 메시지를 자신에게 보내고 클릭합니다. 마찬가지로 설치된 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팀의 파비오 로차, 디에고 곤잘레스, 코너 무디, 사무엘 탕이 구현하고 지정했습니다. 이 도움말은 조 미들리와 파비오 로차가 검토했습니다. 히어로 이미지: JJ 잉(Unsplash)