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

설치된 PWA가 특정 프로토콜을 사용하는 링크를 처리하도록 하여 더욱 통합된 환경을 제공하세요.

Thomas Steiner

스키마 (프로토콜)에 대한 배경 설명

URI (Uniform Resource Identifier)는 추상화 또는 물리적 자원이 있습니다. 각 URI는 scheme 이름 해당 스키마 내에서 식별자를 할당합니다. 따라서 URI 구문은 여기서 각 스키마의 사양은 식별자를 생성합니다. 스키마는 프로토콜이라고도 합니다. Cloud Shell의 몇 가지 예시를 스키마를 참조하세요.

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

URL (Uniform Resource Locator)은 리소스 식별, 기본 액세스를 설명하여 리소스를 찾을 수 있는 방법 제공 지정할 수도 있습니다.

registerProtocolHandler() 메서드의 배경

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

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

스키마는 다음 중 하나여야 합니다. 허용 목록에 추가된 스키마 (예: 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. 이렇게 하면 브라우저가 다음 URL로 이동합니다. https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato 검색 그러면 문자열이 URL 디코딩되어 ?type=web+coffee://latte-macchiato을 읽습니다.

프로토콜 처리의 정의

현재 PWA용 URL 프로토콜 핸들러 등록 메커니즘은 프로토콜 핸들러를 제공하는 것과 관련이 있습니다. PWA를 설치할 때 매니페스트를 통해 직접 등록해야 합니다. PWA를 사용자가 mailto와 같은 특정 스키마가 포함된 하이퍼링크를 클릭할 때 브라우저나 플랫폼별 앱에서 bitcoin 또는 web+music를 실행하는 경우 등록된 PWA가 열립니다. URL을 수신합니다. 제안된 매니페스트 기반 등록과 기존의 registerProtocolHandler()는 실제로 매우 유사한 역할을 하는 동시에 상호 보완적인 사용자 경험의 가능성을 허용합니다.

  • 유사점에는 등록할 수 있는 스키마 목록과 관련된 요구사항, 매개변수의 이름 및 형식 등
  • 매니페스트 기반 등록의 차이점은 미묘하지만 기능을 경험해 보시기 바랍니다. 예를 들어 매니페스트 기반 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 자리표시자입니다.

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

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

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

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

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

앱 업데이트 및 핸들러 등록

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

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

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

애플리케이션 > 인터페이스 오른쪽에 있는 프로토콜 핸들러 섹션으로 이동합니다. Manifest 창. 다음과 같은 작업을 할 수 있습니다. 여기에서 사용 가능한 모든 프로토콜을 보고 테스트할 수 있습니다.

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

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

데모

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

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

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

보안 고려사항

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

사용자가 시작하지 않은 탐색 시도

사용자가 시작하지 않지만 프로그래매틱인 탐색 시도는 열리지 않을 수 있습니다. 있습니다. 맞춤 프로토콜 URL은 최상위 탐색 컨텍스트에서만 사용할 수 있으며, 예를 들어 을 iframe의 URL로 사용합니다.

프로토콜 허용 목록

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

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

의견

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

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

API에서 예상대로 작동하지 않는 부분이 있나요? 또는 누락된 메서드가 있나요? 속성이 있나요? 보안에 대한 질문이나 의견이 있으면 무엇인가요? 해당 GitHub 저장소에서 사양 문제를 신고하거나 문제를 해결할 수 있습니다

구현 문제 신고

Chromium 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 최대한 자세하게 작성해 주시기 바랍니다. 간단한 재현 안내를 따르고 구성요소에 UI>Browser>WebAppInstalls를 입력합니다. 체크박스를 선택합니다. Glitch는 쉽고 빠른 재현을 공유하는 데 효과적입니다.

API 지원 표시

PWA에 URL 프로토콜 핸들러 등록을 사용할 계획인가요? 여러분의 공적 후원은 Chromium팀은 기능의 우선순위를 정하고 다른 브라우저 공급업체에 지원이 얼마나 중요한지 보여줍니다. 있습니다.

WICG 담화 대화목록에서 사용 계획을 공유합니다. 트윗 보내기 @ChromiumDev와 해시태그 사용 #ProtocolHandler 어디서 어떻게 사용하는지 Google에 알려주세요.

감사의 말씀

PWA의 URL 프로토콜 핸들러 등록은 파비오 로차, 디에고 곤잘레스, 코너 무디, Microsoft Edge팀의 사무엘 탕 이 도움말 Joe Medley와 Fabio Rocha가 검토했습니다. 히어로 이미지 제공자 JJ 잉(Unsplash)