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를 통해 사용 설정

출처 체험 토큰 없이 로컬에서 PWA를 URL 핸들러로 실험하려면 about://flags에서 #enable-desktop-pwas-url-handling 플래그를 사용 설정하세요.

"url_handlers" 웹 앱 매니페스트 구성원

설치된 PWA를 URL 패턴과 연결하려면 이러한 패턴을 웹 앱 매니페스트에 지정해야 합니다. 이는 "url_handlers" 멤버를 통해 이루어집니다. 출처를 일치시키기 위한 패턴인 필수 string인 origin 속성이 있는 객체 배열을 허용합니다. 이러한 패턴은 여러 하위 도메인 (예: 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 패턴과 제외된 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 파일을 검색하려면 개발자가 web-app-origin-association 파일을 앱 루트의 /.well-known/ 폴더에 배치해야 합니다. 이렇게 하려면 파일 이름이 정확히 web-app-origin-association여야 합니다.

데모

PWA를 URL 핸들러로 테스트하려면 위에 설명된 대로 브라우저 플래그를 설정한 다음 https://mandymsft.github.io/pwa/에서 PWA를 설치해야 합니다. 웹 앱 매니페스트를 살펴보면 이 매니페스트가 URL 패턴이 https://mandymsft.github.io 및 https://luhuangmsft.github.io인 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팀은 PWA를 URL 핸들러로 사용한 경험에 관한 의견을 듣고자 합니다.

API 설계 설명

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

구현 문제 신고

Chromium 구현에서 버그를 발견하셨나요? 아니면 구현이 사양과 다른가요? new.crbug.com에서 버그를 신고합니다. 최대한 자세한 내용과 재현을 위한 간단한 안내를 포함하고 구성요소 상자에 UI>Browser>WebAppInstalls를 입력합니다. Glitch는 빠르고 쉬운 재현을 공유할 때 유용합니다.

API 지원 표시

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

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

유용한 링크

감사의 말씀

URL 핸들러로서의 PWA는 Microsoft Edge팀의 루 황과 맨디 첸이 지정하고 구현했습니다. 이 도움말은 조 미들리님이 검토했습니다. Unsplash의 브라이슨 해머님 제공 히어로 이미지