웹 앱 범위 확장 프로그램

Chrome 122부터는 여러 하위 도메인과 최상위 도메인을 제어하는 사이트가 단일 웹 앱으로 표시되도록 하는 scope_extensions 앱 매니페스트 멤버의 오리진 트라이얼을 구독할 수 있습니다. 이 문서에서는 Chrome팀이 이 기능을 도입하는 이유와 이 기능을 사용해야 하는 경우를 설명합니다.

Demián Renzulli
Demián Renzulli
X GitHub
Thomas Steiner

개요

일부 웹 애플리케이션에는 여러 출처가 있습니다. 예를 들어 example.com이 기본 앱이고 space_1.example.com, ..., space_n.example.com이 기본 앱의 지붕 아래에 있는 하위 환경으로 special-example.com와 결합되기도 합니다. 이러한 유형의 사이트 아키텍처는 프로그레시브 웹 앱의 맥락에서 의미가 있습니다. 제한사항에는 출처 간에 서비스 워커, 모든 유형의 기기, 로컬 저장소, 권한을 공유할 수 없는 것이 포함됩니다. 또한 독립형 PWA의 교차 출처 탐색은 사용자가 PWA 환경에서 벗어났음을 나타내는 창 UI ('범위 외' 막대)를 표시합니다. 다중 출처 사이트의 프로그레시브 웹 앱 및 동일한 도메인에 여러 프로그레시브 웹 앱 빌드 도움말에서 이러한 문제 중 일부를 해결하는 방법을 알아보세요.

Scope Extensions API를 사용하면 웹 앱이 동일 출처 정책이 이러한 유형의 사이트 아키텍처에 부과하는 일부 문제를 해결할 수 있습니다. 웹 앱은 웹 앱의 기본 출처와 연결된 출처 간의 합의에 따라 통합된 환경을 구현하기 위해 범위를 다른 출처로 확장할 수 있습니다.

목표

범위 확장 API의 주요 목표는 여러 하위 도메인과 최상위 도메인을 제어하는 사이트가 웹 앱 UI 및 링크 캡처와 관련하여 하나의 연속적인 웹 앱처럼 동작하도록 하는 것입니다. 예를 들어 example.com.co.uk과 support.example.com에 걸쳐 있는 사이트 example.com가 최대한 단일 웹 애플리케이션처럼 동작하도록 합니다.

기본 PWA와 연결된 하위 환경을 보여주는 다이어그램

범위 확장 프로그램을 사용하면 다중 출처 PWA가 웹 앱 UI와 관련하여 연속 웹 앱처럼 동작할 수 있습니다.

실제로 이는 다음과 같은 두 가지 구체적인 목표로 이어집니다.

  • 교차 출처 탐색: 사용자가 PWA에서 벗어나고 있음을 알리는 창 UI를 호출하여 사용자 경험을 방해하지 않고 연결된 출처 간에 탐색할 수 있도록 허용합니다.
  • 크로스 오리진 링크 캡처: 웹 앱이 제휴 사이트로의 사용자 탐색을 캡처하도록 허용합니다.

범위 내 교차 출처 탐색

기본적으로 사용자가 독립형 PWA에서 출처 간에 이동하면 PWA 환경 외부로 이동하고 있음을 나타내는 창 UI가 표시됩니다. Chrome에서 이 UI는 새 출처의 URL이 포함된 '범위 외' 표시줄로 구성됩니다. 사용자는 동일한 애플리케이션 컨텍스트 내에서 계속 탐색할 것으로 예상하지만, 이 경우 애플리케이션에서 벗어난 것으로 인식할 수 있으므로 사용자 환경이 방해됩니다.

독립형 PWA 상단의 범위 외 표시줄

사용자가 독립형 PWA에서 서로 다른 출처를 탐색할 때 Chrome에 '범위 외' 막대가 표시됩니다.

범위 확장을 사용하면 사용자가 연결된 출처로 이동할 때 창 UI가 표시되지 않으므로 PWA가 통합된 환경으로 표시됩니다.

링크 캡처는 앱이 범위 내에서 링크를 캡처할 수 있는 기능을 말합니다. 이 기능이 구현되는 방식은 브라우저와 운영체제에 따라 다릅니다. 예를 들어 ChromeOS의 Chrome에서 설치된 PWA 범위의 링크는 기본적으로 주소 표시줄에 이러한 링크를 처리할 수 있는 앱이 있음을 나타내는 표시와 함께 브라우저 탭을 열어 사용자가 이 시점부터 자동 링크 캡처를 선택할 수 있도록 합니다.

설치된 PWA의 옴니바 프롬프트

ChromeOS의 탭에 대한 Chrome 주소 표시줄의 일부로, 링크가 PWA에 의해 처리될 수 있음을 시각적으로 나타내고 해당 결정을 기억하는 옵션을 보여줍니다.

사용자가 PWA 범위 밖에 있는 링크 (하위 도메인 또는 최상위 도메인으로 연결되는 링크 포함)를 클릭하면 해당 링크가 PWA에 속하는 것으로 인식되지 않습니다. 예를 들어 링크를 처리할 수 있는 앱이 있다는 표시가 사용자에게 표시되지 않고 링크가 브라우저 탭에서 열립니다. 범위 확장 프로그램 API를 사용하면 연결된 출처가 범위 내 링크로 처리되도록 PWA의 범위를 확장할 수 있습니다.

구현

범위 확장 프로그램을 구현하려면 기본 출처와 연결된 출처 간의 관계를 설정해야 합니다.

연결된 출처 목록 선언

웹 앱이 범위를 다른 출처로 확장할 수 있도록 기본 PWA 출처에 scope_extensions 웹 앱 매니페스트 구성원을 추가합니다.

웹 앱 매니페스트 (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

연결 확인

나열된 각 출처는 /.well-known/web-app-origin-association 구성 파일을 사용하여 웹 앱과의 연결을 확인합니다. 이 파일은 잘 알려진 URI이므로 이름이 web-app-origin-association이어야 하며 정확한 위치에 제공되어야 합니다.

/.well-known/web-app-origin-association (연결된 출처)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

데모

데모는 두 사이트로 구성됩니다.

다음 테스트를 실행하려면 about://flags/#enable-desktop-pwas-scope-extensions 플래그를 사용 설정해야 합니다 (Chrome v115부터 사용 가능).

교차 출처 탐색 테스트

이러한 테스트의 사전 조건으로 브라우저에서 기본 PWA를 열고 PWA로 설치한 후 열어 독립형 모드로 실행합니다. PWA에 확장 범위의 출처와 확장 범위에 없는 출처로 연결되는 링크가 포함되어 있습니다.

범위 내 및 확장 범위 링크가 있는 기본 PWA 창

확장 범위의 출처와 확장 범위에 없는 출처로 연결되는 링크가 있는 데모 PWA

기본 교차 출처 탐색 (확장 범위에 없음)

  1. 전체 화면 PWA 내에서 확장 범위에 없는 출처 링크를 클릭합니다.
  2. 그 결과 탐색이 이루어지고 범위 외 바가 표시됩니다.

범위 외 링크를 클릭한 후 범위 외 표시줄이 있는 기본 PWA 창

독립형 모드의 PWA에 대한 교차 출처 탐색에 기본적으로 '범위 외' 막대가 표시됩니다.

범위 확장 프로그램이 있는 교차 출처 탐색 (확장된 범위)

  1. PWA의 홈페이지로 다시 이동합니다.
  2. 확장 범위에 없는 출처 링크를 클릭합니다.
  3. 기본적으로 '범위 외' 막대가 표시되어야 하지만 범위 확장 프로그램 연결로 인해 표시되지 않습니다.

확장된 범위 링크를 클릭한 후 범위 외 표시줄이 없는 기본 PWA 창

범위 확장 프로그램으로 출처 연결이 이루어진 후 교차 출처 탐색에 '범위 외' 막대가 표시되지 않음

  1. ChromeOS 기기에서 기본 PWA를 열고 설치합니다.
  2. 연결된 출처 링크를 클릭합니다.
  3. 링크가 새 브라우저 탭에서 열리고 설치된 PWA에서 열라는 메시지가 표시됩니다.

범위가 확장된 설치된 PWA의 옴니바 프롬프트

PWA의 연결된 출처 링크를 클릭하면 새 탭에서 링크가 열리고 사용자가 자동 링크 캡처를 선택할 수 있는 '앱에서 열기' 아이콘이 표시됩니다.

오리진 트라이얼

실제 사용자와 함께 필드에서 애플리케이션으로 이 API를 테스트하려면 오리진 트라이얼을 사용하면 됩니다. 오리진 트라이얼을 사용하면 도메인에 연결된 테스트 토큰을 획득하여 사용자와 함께 실험적인 기능을 사용해 볼 수 있습니다. 그런 다음 앱을 배포하고 테스트 중인 기능을 지원하는 브라우저 (이 경우 Chrome 121~126에서 사용 가능)에서 작동할 것으로 예상할 수 있습니다. 오리진 트라이얼을 실행하기 위한 자체 토큰을 얻으려면 신청 양식을 작성하세요.

의견

Chrome팀은 이 API의 유용성에 관한 의견을 기다리고 있습니다. 팀이 이 API의 유용성과 현재 버전에 포함되지 않은 새로운 사용 사례에 관한 의견을 바탕으로 API를 발전시킬 수 있도록 GitHub에서 문제를 여세요.

추가 리소스

감사의 말씀

이 API 개발에 참여한 팀에 특별히 감사드립니다. 범위 확장 프로그램은 Alan Cutter와 Lu Huang이 지정했으며 Matt Giuca의 의견을 반영했습니다. 이 API는 Google Chrome의 Alan Cutter와 Microsoft Edge의 Hassan Talat, Kristin Lee, Lu Huang이 구현했습니다.