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).

PWA를 URL 핸들러로 사용하면 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(예: https://🎵.example.com)과 다른 출처(music.example.com)에 있으므로 앱은 이러한 다른 출처의 소유권을 확인해야 합니다. 이는 다른 출처에서 호스팅되는 web-app-origin-association 파일에서 발생합니다.

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

필드 설명 유형 기본값
"manifest" (필수) 연결된 PWA의 웹 앱 매니페스트 URL 문자열 string 해당 사항 없음
"details" (선택사항) 포함된 URL 패턴과 제외된 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"의 출처 문자열 중 하나와 일치합니다.
  • 브라우저는 각 출처가 이 앱에서 이러한 URL을 처리하도록 허용하는 데 동의한다는 것을 각 web-app-origin-association 파일을 사용하여 검증할 수 있습니다.

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

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

데모

PWA를 URL 핸들러로 테스트하려면 설명된 대로 브라우저 플래그를 설정한 다음 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 핸들러를 열거할 수 있습니다. PWA가 Windows에서 OS 수준 URL 핸들러로 등록되면 다른 애플리케이션에 표시됩니다.

권한 지속성

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

의견

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

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

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

구현 관련 문제 신고

Chromium 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보와 재현 안내를 포함하고 구성요소 상자에 UI>Browser>WebAppInstalls를 입력합니다.

API 지원 표시

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

#URLHandlers 해시태그를 사용하여 @ChromiumDev에 트윗을 보내고 어디에서 어떻게 사용하고 있는지 알려주세요.

유용한 링크

감사의 말씀

URL 핸들러로서의 PWA는 Microsoft Edge팀의 Lu Huang과 Mandy Chen이 지정하고 구현했습니다. 이 문서는 조 메들리가 검토했습니다.