Chrome 122부터 scope_extensions 오리진 트라이얼을 구독할 수 있습니다.
여러 하위 도메인과 상단을 제어하는 사이트를 허용하는 앱 매니페스트 멤버
단일 웹 앱으로 표시할 수 있습니다. 이 문서에서는 그 이유를 설명합니다.
이 기능을 소개하고 언제 사용하면 좋을지 알려드리고자 합니다.
개요
일부 웹 애플리케이션에는
origins
예를 들어 example.com를 기본 앱으로 사용하고 space_1.example.com, ...,
space_n.example.com(special-example.com와 결합되는 경우도 있음)
하위 환경을 즐길 수 있습니다. 이 유형의 사이트
아키텍처는 프로그레시브 웹 앱의 맥락에서 영향을 미칩니다.
제한 사항에는 서비스 워커, 모든 유형의 기기,
로컬 저장소, 출처 간 권한 등이 있습니다 또한
독립형 PWA에 사용자가 현재 앱을 사용 중임을 나타내는 창 UI('지원 범위 외' 막대)가
가 PWA 환경 외부로 이전했습니다. 몇 가지 해결 방법을 배울 수 있습니다.
기사에서 이러한 문제를
멀티 출처 사이트의 프로그레시브 웹 앱
및
동일한 도메인에 여러 프로그레시브 웹 앱 제작.
Scope Extensions API를 사용하면 웹 앱이 동일 출처 정책 강요할 수 있습니다 웹 앱이 범위를 다른 출처로 설정 웹 앱과 앱 간의 합의에 따라 통합 환경을 달성하는 데 도움이 되는 기본 출처 및 연결된 출처를 나타냅니다
목표
Scope Extensions API의 주요 목표는 Scope Extensions API를
여러 하위 도메인과 최상위 도메인이 하나의 연속된 웹 앱으로 작동
웹 앱 UI 및 링크 캡처에 관한 것이죠. 예를 들어, 사용자가
example.com.co.uk 및 support.example.com에 걸쳐 있는 example.com는 다음과 같이 동작합니다.
가능한 한 많은 단일 웹 애플리케이션으로
배포될 수 있습니다
범위 확장 프로그램을 사용하면 다중 출처 PWA가 인접한 웹 앱처럼 동작할 수 있습니다. 웹 앱 UI에 관해 알아보겠습니다.
실제로 이는 두 가지 구체적인 목표로 해석됩니다.
- 교차 출처 탐색: 사용자가 연결된 출처 간에 탐색할 수 있도록 허용 창 UI를 호출하여 사용자 환경을 방해하지 않고 PWA에서 벗어나고 있다고 말합니다.
- 교차 출처 링크 캡처: 웹 앱에서 사용자의 이동 경로를 캡처하도록 허용합니다. 표시됩니다.
교차 출처 범위 내 탐색
기본적으로 사용자가 독립형 PWA에서 출처 간에 이동할 때 PWA 환경 외부로 이동 중임을 나타내는 창 UI가 표시되었습니다. Chrome에서 이 UI는 '지원 범위 외'로 구성됩니다. URL이 포함된 확인할 수 있습니다 이는 사용자가 기대하는 만큼 사용자 환경에 지장을 초래합니다. 동일한 애플리케이션 컨텍스트 내에서 계속 탐색하지만 그들은 그것에서 빼앗아 가고 있습니다.
'지원 범위 외' 사용자가 다른 출처로 이동할 때 Chrome에 표시되는 막대 를 빌드하세요.
범위 확장 프로그램을 사용하면 사용자가 어떤 위치로 이동해도 창 UI가 표시되지 않습니다. PWA를 통합 환경으로 제공할 수 있습니다.
교차 출처 링크 캡처
링크 캡처는 앱이 링크 내부의 링크를 캡처하는 기능을 말합니다. 범위를 제공합니다 구현 방식은 브라우저 및 운영체제에 따라 다릅니다. 있습니다 예를 들어 ChromeOS의 Chrome에서는 설치된 PWA는 기본적으로 브라우저 탭을 열고 주소 표시줄에 이러한 링크를 처리할 수 있는 앱이 있어서 사용자가 해당 지점부터 자동 링크 캡처를 선택합니다.
ChromeOS에서 시각적으로 표시되는 탭의 Chrome 주소 표시줄 조각 링크가 PWA에서 처리할 수 있고 그 결정을 기억하는 옵션이 있습니다.
사용자가 PWA 범위( 하위 도메인이나 최상위 도메인에 연결되는 링크 등)은 속한 것으로 인식되지 않습니다. 하겠습니다. 예를 들어 아무 표시 없이 링크가 브라우저 탭에서 열립니다. 링크를 처리할 수 있는 앱이 있다는 사실을 사용자에게 알립니다. 범위 Extensions 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 구성 파일. 이 파일은
이름이 web-app-origin-association이어야 하며,
잘 알려진 URI입니다.
/.well-known/web-app-origin-association (연결된 출처)
{
"web_apps": [{ "web_app_identity": "https://example.com" }]
}
데모
데모는 다음 두 사이트로 구성됩니다.
- 기본 PWA:
scope_extensions멤버를 통해 연결된 출처 목록을 선언합니다. 앱 매니페스트 파일을 웹 앱 매니페스트에서 확인할 수 있습니다. - 확장된 범위의 출처:
출처가 기본 PWA 범위 밖에 있지만 목록에 표시된 후 연결됨
기본 PWA에 연결된 출처로 전송 및 관계 확인
이를 통해
web-app-origin-association파일
다음 테스트를 실행하려면
about://flags/#enable-desktop-pwas-scope-extensions 플래그 (다음에서 제공:
Chrome v115 이상).
교차 출처 탐색 테스트
이러한 테스트를 위한 전제 조건으로 브라우저에서 기본 PWA를 실행하려는 경우 PWA로 설치 독립형 모드에서 실행할 수 있습니다 PWA에는 확장된 범위의 원본 및 출처가 확장 범위에 없습니다.
확장된 범위의 출처와 확장 범위에 없는 출처로 연결되는 링크가 포함된 데모 PWA 범위를 제공합니다
기본 교차 출처 탐색 (확장 범위에 속하지 않음)
- 출처가 확장 범위에 속하지 않음 링크를 클릭합니다. 드래그 앤 드롭할 수 있습니다.
- 이에 따라 탐색이 발생하고 범위 외 표시줄이 표시됩니다.
'지원 범위 외' PWA의 교차 출처 탐색을 위해 기본적으로 표시되는 막대 독립형 모드입니다
범위 확장 프로그램을 사용한 교차 출처 탐색 (확장된 범위)
- PWA 홈페이지로 다시 이동합니다.
- 링크 클릭 출처가 확장 범위에 속하지 않는 경우.
- 기본적으로 '지원 범위 외' 막대가 표시되어야 하지만 그렇지 않습니다.
'지원 범위 외' 출처 연결 후 교차 출처 탐색에 막대가 표시되지 않음 이 API는 범위 확장 프로그램으로 만들어졌습니다.
교차 출처 링크 캡처 테스트
- 기본 PWA를 열고 다음을 설치합니다. ChromeOS 기기
- 다음 링크를 클릭하세요. 관련된 출처와 관련이 있습니다.
- 링크가 새 브라우저 탭에서 열리고 링크를 열라는 메시지가 표시됩니다. 확인할 수 있습니다
PWA에 연결된 출처 링크를 클릭하면 새 탭에서 링크가 열리고 '앱에서 열기'가 표시됨 사용자가 자동 연결을 선택할 수 있는 아이콘 있습니다.
오리진 트라이얼
애플리케이션에서 이 API를 실제로 사용자는 오리진 트라이얼 오리진 트라이얼을 사용하면 테스트 토큰을 만드는 것입니다. 그런 다음 앱을 배포하고 테스트할 수 있는 기능을 지원하는 브라우저에서 작동할 것으로 예상해야 합니다( Chrome 121부터 126까지 사용할 수 있습니다. 다음을 위해 자체 토큰을 얻는 방법은 다음과 같습니다. 오리진 트라이얼을 실행하려면 신청서 양식을 작성하세요.
의견
Chrome팀은 이 API의 유용성에 대한 의견을 기다리고 있습니다. 받는사람 팀이 이 API의 유용성에 대한 피드백을 통해 이 API를 발전시킬 수 있도록 돕고 최신 버전에서 다루지 않는 새로운 사용 사례를 찾고 있다면 GitHub의 문제
추가 리소스
- Scope Extensions API - 오리진 트라이얼
- Chrome 상태 - 웹 앱 범위 확장 프로그램
- 웹 애플리케이션의 범위 확장 프로그램 설명
- 실험 의도
- Mozilla 표준 입지
- Apple 표준 입장
- Chromium 버그
- 여러 출처 사이트의 프로그레시브 웹 앱
- 동일한 도메인에 여러 프로그레시브 웹 앱 빌드
감사의 말씀
이 API의 개발을 지원한 팀에 특별히 감사드립니다. 범위 확장 프로그램 Alan Cutter에 의해 지정되었으며 루 후앙, 맷 주카 이 API는 Chrome의 Alan Cutter 및 하산 탈랏 크리스틴 리, Microsoft Edge의 Lu Huang.