프로그레시브 웹 앱에서 탭을 사용하여 한 번에 두 개 이상의 문서 작업하기
컴퓨팅의 세계에서 데스크톱 은유는 그래픽 사용자 인터페이스 (GUI)에서 사용자가 컴퓨터와 더 쉽게 상호작용할 수 있도록 사용하는 통합된 개념의 집합인 인터페이스 은유입니다. 데스크톱의 개념에 따르면 GUI 탭은 책, 종이 파일 또는 카드 색인에 삽입한 기존의 카드 탭을 모델로 하는 것입니다. 탭으로 구분된 문서 인터페이스 (TDI) 또는 탭은 여러 문서나 패널을 단일 창 내에 포함할 수 있는 그래픽 제어 요소로, 탭을 문서 집합 간 전환을 위한 탐색 위젯으로 사용합니다.
프로그레시브 웹 앱은 웹 앱 매니페스트의 display 속성에 의해 결정되는 다양한 디스플레이 모드에서 실행될 수 있습니다. 예를 들어 fullscreen, standalone, minimal-ui, browser가 있습니다. 이러한 표시 모드는 잘 정의된 대체 체인("fullscreen" → "standalone" → "minimal-ui" → "browser")을 따릅니다. 브라우저가 지정된 모드를 지원하지 않으면 체인의 다음 표시 모드로 대체됩니다. 개발자는 "display_override" 속성을 통해 필요한 경우 자체 대체 체인을 지정할 수 있습니다.
탭 형식 애플리케이션 모드란?
예를 들어 동일한 PWA 창에서 여러 파일을 수정할 수 있도록 하는 것과 같이 PWA 개발자가 사용자에게 탭으로 구분된 문서 인터페이스를 제공할 수 있는 방법은 지금까지 플랫폼에서 누락되었습니다. 탭 방식의 애플리케이션 모드는 이러한 간극을 줄여줍니다.
탭으로 표시된 애플리케이션 모드에 대한 추천 사용 사례
탭으로 표시된 애플리케이션 모드를 사용할 수 있는 사이트의 예는 다음과 같습니다.
- 사용자가 동시에 두 개 이상의 문서 (또는 파일)를 편집할 수 있는 생산성 앱.
- 사용자가 탭마다 다른 방에서 대화할 수 있게 해주는 커뮤니케이션 앱입니다.
- 새로운 인앱 탭에서 기사 링크를 여는 읽기 앱
개발자가 만든 탭과의 차이점
별도의 브라우저 탭에 문서를 보관하면 리소스 격리가 무료로 제공됩니다. 현재 웹에서는 이러한 기능을 사용할 수 없습니다. 개발자가 빌드한 탭은 브라우저 탭과 마찬가지로 수백 개의 탭으로 적절하게 확장되지 않습니다. 탐색 기록, '이 페이지 URL 복사', '이 탭 전송' 또는 '웹브라우저에서 이 페이지 열기'와 같은 브라우저 어포던스는 개발자가 빌드한 탭 인터페이스 페이지에 적용되지만 현재 선택된 문서 페이지에는 적용되지 않습니다.
"display": "browser"와의 차이점
현재 "display": "browser"에는 이미 특정 의미가 있습니다.
사용자 에이전트 (예: 브라우저 탭 또는 새 창)에서 하이퍼링크를 열기 위한 플랫폼별 규칙을 사용하여 웹 애플리케이션을 엽니다.
브라우저는 UI와 관련하여 원하는 모든 작업을 할 수 있지만 "display": "browser"가 갑자기 '브라우저 어포던스는 없지만 탭으로 구성된 문서 인터페이스 없이 별도의 애플리케이션별 창에서 실행'한다는 의미라면 개발자 기대를 크게 뒤집을 수 있습니다.
"display": "browser"를 설정하는 것은 사실상 애플리케이션 창에 배치되는 것을 선택 해제하는 방법입니다.
현재 상태
| 단계 | 상태 |
|---|---|
| 1. 설명 만들기 | 완료 |
| 2. 사양의 초기 초안 만들기 | Not started |
| 3. 의견 수집 및 디자인 반복 | 진행 중 |
| 4. 오리진 트라이얼 | 진행 중 |
| 5. 출시 | Not started |
탭으로 표시된 애플리케이션 모드 사용
탭으로 표시된 애플리케이션 모드를 사용하려면 개발자는 웹 앱 매니페스트에서 특정 "display_override" 모드 값을 설정하여 앱을 선택해야 합니다.
{
"display": "standalone",
"display_override": ["tabbed"]
}
다음으로, "tab_strip" 속성을 선택적으로 사용하여 탭 동작을 미세 조정할 수 있습니다. 여기에는 허용되는 두 가지 하위 속성인 "home_tab"와 "new_tab_button"가 있습니다. "tab_strip" 속성이 없으면 특정 속성의 "auto" 값이 사용됩니다. 브라우저는 "auto"에 사용할 값을 결정합니다.
홈 탭
홈 탭은 고정된 탭이며, 앱에서 사용 설정된 경우 앱이 열려 있을 때 항상 표시되어야 합니다. 이 탭은 탐색해서는 안 됩니다. 이 탭에서 링크를 클릭하면 새 앱 탭에서 열립니다. 앱은 이 탭이 잠겨 있는 URL과 탭에 표시되는 아이콘을 맞춤설정할 수 있습니다.
"home_tab"에 허용되는 값은 다음과 같습니다.
"auto"- 브라우저에서 실행할 작업을 결정하도록 합니다."absent": 브라우저에 홈 탭을 표시하지 않도록 지시합니다.- 두 개의 하위 속성이 있는 객체:
"url"를 허용된"auto"값 또는 홈 탭을 잠글 URL로 바꿉니다."icons"를 기본"icons"속성에서 허용되는"auto"값 또는 아이콘 배열로 바꿉니다.
New Tab 버튼
새 탭 버튼(있는 경우)이 앱 범위 내에 있는 URL에서 새 탭을 열어야 합니다. 앱은 이 버튼의 맞춤 URL과 아이콘을 설정하도록 선택할 수 있습니다. 브라우저는 이러한 탭을 드래그하여 새 창을 만들거나 브라우저 탭과 결합하는 방법을 결정할 수 있습니다.
"new_tab_button"에 허용되는 값은 다음과 같습니다.
"auto"- 브라우저에서 실행할 작업을 결정하도록 합니다."absent": 새 탭 버튼을 표시하지 않도록 브라우저에 지시합니다.- 두 개의 하위 속성이 있는 객체:
"url"를 허용된"auto"값 또는 새 탭을 열 범위 내 URL로 바꿉니다."icons"를 기본"icons"속성에서 허용되는"auto"값 또는 아이콘 배열로 바꿉니다.
전체 예
탭으로 표시된 인터페이스가 있는 앱의 동작을 구성하는 완전한 예는 다음과 같습니다.
{
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"url": "./home/",
"icons": [
{
"src": "./home.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
},
"new_tab_button": {
"url": "./new-tab/",
"icons": [
{
"src": "./new-tab.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
}
}
탭으로 표시된 애플리케이션 모드 감지
앱은 CSS 또는 JavaScript에서 display-mode CSS 미디어 기능을 확인하여 앱이 탭으로 표시된 애플리케이션 모드에서 실행 중인지 감지할 수 있습니다.
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
Launch Handler API와의 상호작용
사이트에서 Launch Handler API를 사용하면 앱 실행을 기존 앱 창으로 리디렉션하여 중복 창이 열리지 않도록 할 수 있습니다. 탭으로 표시된 앱이 "client_mode": "navigate-new"를 설정하면 앱이 실행될 때 기존 앱 창에서 새 탭이 열립니다.
데모
브라우저 플래그를 설정하여 탭으로 표시된 애플리케이션 모드를 사용해 볼 수 있습니다.
#enable-desktop-pwas-tab-strip플래그를 설정합니다.- tabbed-application-mode.glitch.me 앱(소스 코드)을 설치합니다.
- 다른 탭에서 다른 링크를 클릭합니다.
의견
Chrome 팀은 탭 형식 애플리케이션 모드 사용 경험에 관한 의견을 듣고자 합니다.
API 설계에 대해 알려주세요.
탭 애플리케이션 모드가 예상대로 작동하지 않는 문제가 있나요? Google에서 생성한 웹 앱 매니페스트 문제에 댓글을 작성합니다.
구현 관련 문제 신고
Chrome 구현에서 버그를 발견하셨나요? new.crbug.com에서 버그를 신고합니다. 최대한 많은 세부정보와 간단한 재현 안내를 포함하고 Components 상자에 UI>Browser>WebAppInstalls를 입력합니다.
Glitch는 쉽고 빠르게 재현 케이스를 공유하는 데 효과적입니다.
API 지원 표시
탭 형식 애플리케이션 모드를 사용할 계획인가요? 공개 지원은 Chrome팀에서 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 이러한 기능을 지원하는 것이 얼마나 중요한지 알려줍니다.
해시태그 #TabbedApplicationMode를 사용하여 @ChromiumDev로 트윗을 보내고 사용 위치와 방법을 알려주세요.
유용한 링크
감사의 말
탭 형식 애플리케이션 모드는 Matt Giuca에 의해 탐색되었습니다. Chrome의 실험용 구현은 앨런 커터의 작업이었습니다. 이 문서는 Joe Medley가 검토했습니다. 히어로 이미지: 틸 니어만(Wikimedia Commons)
