브라우저 외부의 PWA는 자체 창을 관리합니다. 이 장에서는 API와 API 내에서 창을 관리하기 위한 기능을 실행할 수 있습니다
PWA 창
PWA에 의해 관리되는 자체 창에서 실행되는 경우 다음과 같은 운영 체제의 창과 관련된 모든 장점과 책임이 있습니다.
- Windows 또는 ChromeOS와 같은 멀티 윈도우 운영체제에서 창 크기를 조절하고 창을 이동하는 기능
- iPadOS 분할 모드 또는 Android 화면 분할 모드에서와 같이 다른 앱 창과 화면 공유
- 도크, 작업 표시줄, 데스크톱의 Alt 탭 메뉴, 휴대기기의 멀티태스킹 창 목록에 표시됩니다.
- 창을 최소화하고 화면과 바탕화면 간에 이동하며 언제든지 닫을 수 있는 기능
창 이동 및 크기 조절
PWA 창의 크기는 원하는 대로 설정할 수 있으며 데스크톱 운영체제의 화면 어디에나 배치할 수 있습니다. 기본적으로 사용자가 설치 후 처음으로 PWA를 열면 PWA의 기본 창 크기가 현재 화면의 일정 비율이며, 최대 해상도는 1920x1080이 화면 왼쪽 상단에 배치됩니다.
사용자는 창을 이동하고 크기를 조절할 수 있으며 브라우저는 마지막 기본 설정을 기억합니다. 따라서 다음에 사용자가 앱을 열 때 창은 이전 사용의 크기와 위치를 유지합니다.
매니페스트 내에서 PWA의 기본 크기와 위치를 정의할 수 있는 방법은 없습니다. JavaScript API를 사용하는 경우에만 창의 위치와 크기를 변경할 수 있습니다. 코드에서 window 객체의 moveTo(x, y) 및 resizeTo(x, y) 함수를 사용하여 자체 PWA 창을 이동하고 크기를 조절할 수 있습니다.
예를 들어 PWA가 로드될 때 다음을 사용하여 PWA 창의 크기를 조절하고 이동할 수 있습니다.
document.addEventListener("DOMContentLoaded", event => {
// we can move only if we are not in a browser's tab
isBrowser = matchMedia("(display-mode: browser)").matches;
if (!isBrowser) {
window.moveTo(16, 16);
window.resizeTo(800, 600);
}
});
window.screen 객체를 사용하여 현재 화면 크기와 위치를 쿼리할 수 있습니다. window 객체의 resize 이벤트를 사용하여 창 크기가 조절되는 시점을 감지할 수 있습니다. 창 이동을 캡처하는 이벤트가 없으므로 위치를 자주 쿼리하는 것이 좋습니다.
다른 사이트 탐색
사용자를 PWA 범위를 벗어나는 외부 사이트로 보내려면 location.href를 사용하거나 호환되는 플랫폼에서 새 창을 열어 표준 <a href> HTML 요소를 사용하면 됩니다.
현재 모든 브라우저에서 PWA가 설치되어 있는 경우 매니페스트 범위를 벗어나는 URL로 이동하면 PWA의 브라우저 엔진이 창 컨텍스트 내에서 인앱 브라우저를 렌더링합니다.
인앱 브라우저의 몇 가지 기능은 다음과 같습니다.
- 콘텐츠 위에 표시됩니다.
- 여기에는 현재 출처, 창의 제목, 메뉴를 표시하는 정적 URL 표시줄이 있습니다. 일반적으로 매니페스트의
theme_color에 테마가 지정됩니다. - 컨텍스트 메뉴에서 해당 URL을 브라우저에서 열 수 있습니다.
- 사용자는 브라우저를 닫거나 이전 화면으로 돌아갈 수 있습니다.
승인 흐름
OAuth 2.0을 사용하는 경우와 같이 많은 웹 인증 및 승인 흐름에서 사용자를 다른 출처의 다른 URL로 리디렉션하여 PWA의 원본으로 반환되는 토큰을 얻습니다.
이 경우 인앱 브라우저는 다음 절차를 따릅니다.
- 사용자가 PWA를 열고 로그인을 클릭합니다.
- PWA는 사용자를 PWA 범위를 벗어나는 URL로 리디렉션하므로 렌더링 엔진이 PWA 내에서 인앱 브라우저를 엽니다.
- 사용자는 인앱 브라우저를 취소하고 언제든지 PWA로 돌아갈 수 있습니다.
- 사용자가 인앱 브라우저에 로그인합니다. 인증 서버가 사용자를 PWA 출처로 리디렉션하여 토큰을 인수로 전송합니다.
- PWA 범위에 속하는 URL을 감지하면 인앱 브라우저가 스스로 닫힙니다.
- 엔진이 기본 PWA 창 탐색을 인앱 브라우저에 있는 동안 인증 서버가 이동한 URL로 리디렉션합니다.
- PWA가 토큰을 가져와 토큰을 저장하고 PWA를 렌더링합니다.
브라우저 탐색 강제 적용
인앱 브라우저가 아닌 URL로 브라우저를 강제로 열려면 <a href> 요소의 _blank 대상을 사용하면 됩니다. 이 기능은 데스크톱 PWA에서만 작동합니다. URL로 브라우저를 여는 옵션이 없습니다.
function openBrowser(url) {
window.open("url", "_blank", "");
}
새 창 열기
데스크톱에서 사용자는 동일한 PWA 창을 두 개 이상 열 수 있습니다. 마치 동일한 URL의 브라우저 탭을 두 개 여는 것처럼 각 창은 동일한 start_url로 이동하는 다른 탐색 메뉴입니다.
사용자는 PWA 메뉴에서 '파일'과 '새 창'을 차례로 선택하고, PWA 코드에서 open() 함수를 사용하여 새 창을 열 수 있습니다. 자세한 내용은 문서를 참고하세요.
function openNewWindow() {
window.open("/", "new-window", "width=600,height=600");
}
iOS 또는 iPadOS의 PWA 창 내에서 open()를 호출하면 null가 반환되고 창이 열리지 않습니다. Android에서 새 창을 열면 URL이 PWA 범위 내에 있더라도 URL의 새 인앱 브라우저가 생성되며, 일반적으로 외부 탐색 환경을 트리거하지 않습니다.
창 제목
<title> 요소는 브라우저 탭 내 공간이 제한되어 있기 때문에 주로 검색엔진 최적화 목적으로 사용되었습니다. PWA의 브라우저에서 창 간에 이동하면 모든 제목 표시줄 공간을 사용할 수 있습니다.
제목 표시줄의 콘텐츠를 정의할 수 있습니다.
- HTML
<title>요소에 정적으로 삽입 - 언제든지
document.title문자열 속성을 동적으로 변경합니다.
데스크톱 PWA에서는 제목이 필수이며 창의 제목 표시줄에 사용되며 경우에 따라 작업 관리자 또는 멀티태스킹 선택에 사용됩니다. 단일 페이지 애플리케이션의 경우 모든 경로에서 제목을 업데이트하는 것이 좋습니다.
탭 모드
탭 모드라고 하는 실험용 기능을 사용하면 PWA에 웹브라우저와 유사한 탭 기반 디자인을 사용할 수 있습니다. 이 경우 사용자는 다음 동영상에서 볼 수 있듯이 동일한 PWA에서 여러 탭을 열어도 동일한 운영체제 창에 모두 연결할 수 있습니다.
이 실험용 기능에 관한 자세한 내용은 PWA용 탭 애플리케이션 모드를 참고하세요.
창 컨트롤 오버레이
<title> 요소 또는 document.title 속성의 값을 정의하여 창의 제목을 변경할 수 있다고 언급했습니다. 하지만 이 값은 항상 문자열 값입니다. HTML, CSS 및 이미지를 사용하여 제목 표시줄을 원하는 대로 디자인할 수 있다면 어떨까요?
그래서 Microsoft Edge 및 데스크톱용 Chrome PWA에 새로 도입된 실험 기능인 창 컨트롤 오버레이가 사용됩니다.
이 기능에 관한 자세한 내용은 PWA 제목 표시줄의 창 컨트롤 오버레이 맞춤설정을 참고하세요.
창 관리
화면이 여러 개인 경우 사용자는 사용 가능한 공간을 모두 사용하고 싶어 합니다. 예를 들면 다음과 같습니다.
- 멀티 윈도우 그래픽 편집기를 사용하면 다양한 편집 도구를 정확하게 배치된 창에 배치할 수 있습니다.
- 가상 트레이딩 데스크는 전체 화면 모드로 볼 수 있는 여러 창에 마켓 트렌드를 표시할 수 있습니다.
- 슬라이드쇼 앱은 내부 기본 화면에 발표자 노트를 표시하고 외부 프로젝터에 프레젠테이션을 표시할 수 있습니다.
Window Management API를 사용하면 PWA에서 이 외에도 다양한 작업을 할 수 있습니다.
화면 세부정보 가져오는 중
Window Management API는 연결된 화면의 변경 불가능한 배열로 화면이 있는 객체를 반환하는 새 메서드인 window.getScreenDetails()를 추가합니다. 현재 window.screen에 상응하는 ScreenDetails.currentScreen에서 액세스할 수 있는 라이브 객체도 있습니다.
screens 배열이 변경되면 반환된 객체는 screenschange 이벤트도 실행합니다. 개별 화면의 속성이 변경되는 경우에는 발생하지 않습니다. 개별 화면(window.screen 또는 screens 배열의 화면)에서는 속성이 변경될 때 change 이벤트를 실행합니다.
// Request an object with a screen objects
const screenDetails = await window.getScreenDetails();
screenDetails.screens[0].isPrimary; // e.g. true
screenDetails.screens[0].isInternal; // e.g. true
screenDetails.screens[0].pointerTypes; // e.g. ["touch"]
screenDetails.screens[0].label; // e.g. 'Samsung Electric Company 28"'
// Access the live object corresponding to the current `window.screen`.
// The object is updated on cross-screen window placements or device changes.
screenDetails.currentScreen;
screenDetails.addEventListener('screenschange', function() {
// NOTE: Does not fire on changes to attributes of individual screens.
const screenCount = screenDetails.screens.length;
const currentScreen screenDetails.currentScreen.id;
});
사용자 또는 운영체제가 PWA 창을 한 화면에서 다른 화면으로 이동하면 화면 세부정보 객체에서 currentscreenchange 이벤트도 실행됩니다.
화면 wake lock
주방에서 태블릿으로 레시피를 따라 하고 있다고 상상해 보세요. 방금 재료 준비가 끝났습니다. 손이 엉망진창이어서 기기를 다시 돌려 다음 단계를 읽습니다. 큰일이에요! 화면이 검은색으로 바뀌었어요! Screen Wake Lock API는 PWA를 통해 화면의 어둡게 하기, 절전 모드 또는 잠금 기능을 방지하므로 사용자는 아무런 걱정 없이 중지, 시작, 종료, 돌아올 수 있습니다.
// Request a screen wake lock
const wakeLock = await navigator.wakeLock.request();
// Listen for wake lock release
wakeLock.addEventListener('release', () => {
console.log(`Screen Wake Lock released: ${wakeLock.released}`);
});
// Manually release the wake lock
wakeLock.release();
가상 키보드
휴대폰 및 태블릿과 같은 터치 기반 기기는 PWA의 양식 요소에 포커스가 있을 때 사용자가 입력할 수 있는 가상 터치 키보드를 제공합니다.
VirtualKeyboard API 덕분에 이제 PWA에서 navigator.virtualKeyboard 인터페이스를 사용하여 호환되는 플랫폼의 다음과 같이 키보드를 더 효과적으로 제어할 수 있습니다.
navigator.virtualKeyboard.show()및navigator.virtualKeyboard.hide()함수를 사용하여 가상 키보드 표시 및 숨기기navigator.virtualKeyboard.overlaysContent를true로 설정하여 가상 키보드를 직접 닫을 것임을 브라우저에 알립니다.navigator.virtualKeyboard의geometrychange이벤트와 함께 키보드가 표시되고 사라지는 시점을 파악합니다.virtualkeyboardpolicyHTML 속성으로 호스트 요소 수정 (contenteditable사용) 시 가상 키보드 정책 설정 정책을 사용하면 브라우저에서 가상 키보드를auto값을 사용하여 자동으로 처리할지 아니면 스크립트에서manual값을 사용하여 처리할지를 결정할 수 있습니다.- 가상 키보드 모양(예:
keyboard-inset-height및keyboard-inset-top)에 관한 정보를 가져오는 데 CSS 환경 변수를 사용합니다.
이 API에 관한 자세한 내용은 VirtualKeyboard API로 전체 제어를 참고하세요.