URL 핸들러로서의 PWA

더욱 통합된 환경을 위해 설치된 PWA에서 URL을 처리하도록 합니다.

Thomas Steiner

URL 핸들러로서의 PWA란 무엇인가요?

macOS의 메시지와 같은 인스턴트 메신저 애플리케이션을 사용하여 친구와 채팅하면서 음악에 대해 이야기한다고 상상해 보세요. 둘 다 기기에 music.example.com PWA가 설치되어 있다고 가정해 보겠습니다. 좋아하는 트랙을 친구가 즐길 수 있도록 공유하려면 https://music.example.com/rick-astley/never-gonna-give-you-up와 같은 딥 링크를 전송하면 됩니다. 이 링크는 매우 길기 때문에 music.example.com 개발자가 각 트랙에 짧은 링크(예: https://🎵.example.com/r-a/n-g-g-y-u)를 추가하기로 결정했을 수 있습니다.

URL 핸들러로서의 PWA를 사용하면 music.example.com와 같은 앱이 https://music.example.com, https://*.music.example.com 또는 https://🎵.example.com과 같은 패턴과 일치하는 URL의 URL 핸들러로 등록될 수 있으므로 PWA 외부(예: 인스턴트 메신저 애플리케이션 또는 이메일 클라이언트)의 링크는 브라우저 탭이 아닌 설치된 PWA에서 열립니다.

URL 핸들러로서의 PWA는 다음 두 가지 추가 항목으로 구성됩니다.

  1. "url_handlers" 웹 앱 매니페스트 멤버
  2. 범위 내 및 범위 외 URL 연결을 검증하기 위한 web-app-origin-association 파일 형식입니다.

URL 핸들러로서의 PWA에 대한 추천 사용 사례

이 API를 사용할 수 있는 사이트의 예는 다음과 같습니다.

  • 음악 또는 동영상 스트리밍 사이트가 앱의 플레이어 환경에서 열리는 트랙 링크 또는 재생목록 링크
  • 따라서 팔로우하거나 구독하는 사이트의 뉴스 또는 RSS 리더는 앱의 리더 모드로 열립니다.

PWA를 URL 핸들러로 사용하는 방법

about://flags를 통해 사용 설정 중입니다.

오리진 트라이얼 토큰 없이 로컬에서 URL 핸들러로 PWA를 실험하려면 about://flags에서 #enable-desktop-pwas-url-handling 플래그를 사용 설정합니다.

"url_handlers" 웹 앱 매니페스트 멤버

설치된 PWA를 URL 패턴과 연결하려면 웹 앱 매니페스트에서 이러한 패턴을 지정해야 합니다. 이는 "url_handlers" 멤버를 통해 이루어집니다. 이 클래스는 origin 속성이 있는 객체의 배열을 허용합니다. 이는 일치하는 출처의 패턴인 필수 string입니다. 이러한 패턴에는 여러 하위 도메인 (예: https://*.example.com)을 포함하기 위해 와일드 카드 (*) 프리픽스를 사용할 수 있습니다. 이러한 출처와 일치하는 URL은 이 웹 앱에서 처리할 수 있습니다. 스키마는 항상 https://로 가정되지만 명시적으로 언급되어야 합니다.

아래 웹 앱 매니페스트 발췌 부분은 소개 단락의 음악 PWA 예에서 이를 설정하는 방법을 보여줍니다. 와일드 카드 ("https://*.music.example.com")가 포함된 두 번째 항목은 앱이 https://www.music.example.com 또는 https://marketing-activity.music.example.com와 같은 다른 예에 대해서도 활성화되도록 합니다.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

web-app-origin-association 파일

PWA는 처리해야 하는 일부 URL(예:music.example.com https://🎵.example.com인 경우) 앱은 이러한 다른 출처의 소유권을 확인해야 합니다. 이 작업은 다른 출처에서 호스팅되는 web-app-origin-association 파일에서 발생합니다.

이 파일은 유효한 JSON을 포함해야 합니다. 최상위 구조는 "web_apps"라는 멤버가 포함된 객체입니다. 이 구성원은 객체의 배열이며 각 객체는 고유한 웹 앱의 항목을 나타냅니다. 각 객체에는 다음이 포함됩니다.

필드 설명 유형 기본값
"manifest" (필수) 연결된 PWA의 웹 앱 매니페스트 URL 문자열 string 해당 사항 없음
"details" (선택사항) 포함 및 제외된 URL 패턴의 배열이 포함된 객체 object 해당 사항 없음

각 "details" 객체에는 다음이 포함됩니다.

필드 설명 유형 기본값
"paths" (선택사항) 허용되는 경로 문자열의 배열 string[] []
"exclude_paths" (선택사항) 허용되지 않는 경로 문자열의 배열 string[] []

다음은 위의 음악 PWA 예의 web-app-origin-association 파일 예입니다. 원본 🎵.example.com에서 호스팅되고 웹 앱 매니페스트 URL로 식별되는 music.example.com PWA와의 연결을 설정합니다.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

URL이 일치하는 경우

PWA는 다음 조건이 모두 충족되는 경우 처리할 URL과 일치합니다.

  • URL이 "url_handlers"의 출처 문자열 중 하나와 일치합니다.
  • 브라우저는 각 web-app-origin-association 파일을 통해 각 출처가 이 앱이 이러한 URL을 처리하도록 허용하는 데 동의하는지 확인할 수 있습니다.

web-app-origin-association 파일 검색 관련

브라우저에서 web-app-origin-association 파일을 찾으려면 개발자가 web-app-origin-association 파일을 앱 루트에 있는 /.well-known/ 폴더에 배치해야 합니다. 이 기능이 작동하려면 파일 이름이 정확히 web-app-origin-association여야 합니다.

데모

URL 핸들러로 PWA를 테스트하려면 위에 설명된 대로 브라우저 플래그를 설정한 다음 https://mandymsft.github.io/pwa/에서 PWA를 설치해야 합니다. 웹 앱 매니페스트를 보면 https://mandymsft.github.io 및 https://luhuangmsft.github.io과 같은 URL 패턴으로 URL을 처리하는 것을 확인할 수 있습니다. 후자는 PWA와 다른 출처 (luhuangmsft.github.io)에 있으므로 mandymsft.github.io의 PWA는 https://luhuangmsft.github.io/.well-known/web-app-origin-association에 호스팅된 web-app-origin-association 파일을 통해 소유권을 증명해야 합니다.

실제로 작동하는지 테스트하려면 직접 선택한 채팅 메시지 앱이나 macOS의 Mail과 같이 웹 기반이 아닌 이메일 클라이언트에서 본 이메일을 사용하여 자신에게 테스트 메시지를 보냅니다. 이메일 또는 문자 메시지에는 링크 https://mandymsft.github.io 또는 https://luhuangmsft.github.io 중 하나가 포함되어야 합니다. 설치된 PWA에서 둘 다 열립니다.

설치된 데모 PWA 옆에 있는 Windows Skype 인스턴트 메신저 앱. Skype 채팅 메시지에서 처리되는 링크를 클릭하면 독립형 모드로 열립니다.

보안 및 권한

Chromium팀은 사용자 제어, 투명성, 인체공학 등 강력한 웹 플랫폼 기능에 대한 액세스 제어에 정의된 핵심 원칙을 사용하여 PWA를 URL 핸들러로 설계하고 구현했습니다.

사용자 제어

둘 이상의 PWA가 지정된 URL 패턴의 URL 핸들러로 등록되는 경우 패턴을 처리할 PWA(있는 경우)를 선택하라는 메시지가 사용자에게 표시됩니다. 브라우저 탭에서 시작되는 탐색은 이 제안서에서 처리되지 않으며, 브라우저 외부에서 시작되는 탐색을 명시적으로 대상으로 합니다.

투명성

어떤 이유로든 PWA 설치 중에 필요한 연결 확인을 완료할 수 없는 경우 브라우저에서 앱을 영향을 받는 URL의 활성 URL 핸들러로 등록하지 않습니다. URL 핸들러가 부적절하게 구현되면 웹사이트의 트래픽을 도용하는 데 사용될 수 있습니다. 이러한 이유로 앱 연결 메커니즘이 스키마의 중요한 부분인 것입니다.

플랫폼별 애플리케이션은 이미 운영체제 API를 사용하여 사용자 시스템에 설치된 애플리케이션을 열거할 수 있습니다. 예를 들어 Windows의 애플리케이션은 FindAppUriHandlersAsync API를 사용하여 URL 핸들러를 열거할 수 있습니다. Windows에서 PWA가 OS 수준 URL 핸들러로 등록되면 다른 애플리케이션에 PWA가 표시됩니다.

권한 지속성

출처는 언제든지 PWA와의 연결을 수정할 수 있습니다. 브라우저는 정기적으로 설치된 웹 앱의 연결을 재확인하려고 시도합니다. 연결 데이터가 변경되었거나 더 이상 사용할 수 없어 URL 핸들러 등록이 재검증되지 않는 경우 브라우저에서 등록을 삭제합니다.

의견

Chromium팀은 URL 핸들러로서의 PWA 사용 경험에 관한 의견을 듣고자 합니다.

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

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

구현 관련 문제 신고

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

API 지원 표시

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

해시태그 #URLHandlers를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.

유용한 링크

감사의 말

URL 핸들러로서의 PWA는 Microsoft Edge팀의 루 후앙과 맨디 첸이 지정하고 구현했습니다. 이 문서는 Joe Medley가 검토했습니다. Unsplash에 제공된 Bryson Hammer의 히어로 이미지