Application 패널을 사용하여 웹 앱 매니페스트, 서비스 워커, 서비스 워커 캐시를 검사, 수정, 디버그합니다.
프로그레시브 웹 앱 (PWA)은 웹 기술을 사용하여 제작된 고품질의 최신 애플리케이션입니다. PWA는 iOS, Android, 데스크톱 앱과 유사한 기능을 제공합니다. 각 필터는 다음과 같습니다.
- 불안정한 네트워크 조건에서도 안정적인 성능을 제공합니다.
- Mac OS X의 Applications 폴더, Windows의 Start 메뉴, Android 및 iOS의 홈 화면과 같은 운영체제 표시 경로를 실행하도록 설치할 수 있습니다.
- 활동 전환기, 기기 검색엔진(예: Spotlight), 콘텐츠 공유 시트에 표시됩니다.
이 가이드에서는 애플리케이션 패널의 프로그레시브 웹 앱 기능만 설명합니다. 다른 창에 대한 도움말은 이 가이드의 마지막 섹션인 기타 애플리케이션 패널 가이드를 참조하세요.
요약
- Manifest 탭을 사용하여 웹 앱 매니페스트를 검사합니다.
- 서비스 등록 취소 또는 업데이트, 푸시 이벤트 에뮬레이션, 오프라인으로 전환 또는 서비스 워커 중지와 같은 모든 서비스 워커 관련 작업을 수행하는 데 서비스 워커 탭을 사용하세요.
- Cache Storage 탭에서 서비스 워커 캐시를 봅니다.
- Clear storage 탭에서 서비스 워커를 등록 취소하고 버튼을 한 번 클릭하여 모든 저장소와 캐시를 지울 수 있습니다.
웹 앱 매니페스트
사용자가 Mac OS X의 경우 Applications(애플리케이션) 폴더, Windows의 경우 Start(시작) 메뉴, Android 및 iOS의 홈 화면에 앱을 추가할 수 있도록 하려면 웹 앱 매니페스트가 필요합니다. 매니페스트는 앱이 홈 화면에 표시되는 방식, 홈 화면에서 실행할 때 사용자를 안내할 위치, 시작 시 앱이 어떻게 표시되는지를 정의합니다.
매니페스트를 설정한 후에는 Application 패널의 Manifest 탭을 사용하여 검사할 수 있습니다.
- 매니페스트 소스를 보려면 앱 매니페스트 라벨 아래의 링크(위 스크린샷에서
manifest.webmanifest)를 클릭합니다. - Identity 및 Slides 섹션에는 매니페스트 소스의 필드가 사용자 친화적으로 표시됩니다.
- 프로토콜 핸들러 섹션을 사용하면 버튼 클릭 한 번으로 PWA의 URL 프로토콜 핸들러 등록을 테스트할 수 있습니다. 자세한 내용은 URL 프로토콜 핸들러 등록 테스트를 참고하세요.
- Icons 섹션에는 지정한 모든 아이콘이 표시되며 이를 통해 마스크를 확인할 수 있습니다.
- Shortcut #N 섹션 모음은 모든 바로가기 객체에 관한 정보를 표시합니다.
- 섹션의 스크린샷 #N 세트는 다양한 기능을 갖춘 앱 설치 UI의 스크린샷을 표시합니다.
또한 DevTools에서 로드할 수 없는 아이콘과 같은 오류가 발생하면 Manifest 탭에 오류를 설명하는 Installability 섹션이 표시됩니다.
마스크 가능한 아이콘 보기 및 확인
Manifest 탭의 Icons 섹션에는 애플리케이션의 모든 아이콘이 표시됩니다. 이 섹션에서는 플랫폼에 맞게 조정되는 아이콘 형식인 마스크 가능한 아이콘의 안전 영역을 확인할 수도 있습니다.
최소 안전 영역만 표시되도록 아이콘을 자르려면 
마스크 가능한 아이콘의 최소 안전 영역만 표시를 선택합니다.
안전 영역에 전체 로고가 보이면 계속 진행해도 됩니다.
트리거 설치
Chrome을 사용하면 사용자 인터페이스 내에서 바로 PWA의 설치를 활성화하고 촉진할 수 있습니다. 자체 인앱 설치 환경을 제공하는 방법을 알아보세요.
PWA의 설치 흐름을 시작하려면 다음 단계를 따르세요.
- Chrome에서 PWA의 방문 페이지를 엽니다.
상단의 주소 표시줄 오른쪽에서
설치를 클릭합니다.
화면에 표시되는 안내를 따릅니다.
앱 설치 기능은 휴대기기의 워크플로를 시뮬레이션할 수 없습니다. DevTools가 Device Mode인 경우에도 데스크톱 Chrome 브라우저에서 주소 표시줄에 설치 버튼이 어떻게 표시되는지 확인하세요. 그러나 데스크톱에 앱을 추가할 수 있으면 모바일에서도 작동합니다.
실제 모바일 환경을 테스트하려면 원격 디버깅을 통해 실제 휴대기기를 DevTools에 연결하면 됩니다. 연결된 휴대기기에서 설치를 트리거하려면 점 3개로 된 
메뉴를 열고 
앱 설치를 클릭합니다.
단축키 검사
앱 바로가기를 사용하면 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.
매니페스트 파일에서 정의한 단축키를 검사하려면 매니페스트 탭의 단축키 #N 섹션으로 스크롤합니다.
스크린샷을 검사하여 더욱 풍부한 설치 UI 제공
매니페스트 파일에 스크린샷과 설명을 추가하면 앱에 더욱 풍부한 설치 대화상자가 표시됩니다.
스크린샷을 검사하려면 Manifest 탭의 Screenshot #N 섹션으로 스크롤합니다.
테스트 URL 프로토콜 핸들러 등록
PWA는 특정 프로토콜을 사용하는 링크를 처리하여 더욱 통합된 경험을 제공할 수 있습니다. 핸들러를 만드는 방법을 알아보려면 PWA의 URL 프로토콜 핸들러 등록을 참고하세요.
핸들러를 테스트하려면 다음 안내를 따르세요.
- PWA의 방문 페이지에서 DevTools를 엽니다. 예를 들어 이 데모 PWA를 확인하세요.
- 설치 후 데모 페이지에서 PWA를 설치하고 앱을 새로고침합니다. 이제 브라우저에서 PWA를
web+coffee프로토콜의 핸들러로 등록했습니다. - 애플리케이션 > 매니페스트 > 프로토콜 핸들러 섹션에서 핸들러로 테스트할 URL을 입력하고 프로토콜 테스트를 클릭합니다.
이 예시에서는 핸들러가 americano,chai,latte-macchiato를 처리할 수 있습니다. - Chrome에서 앱을 열 수 있는지 묻는 메시지가 표시되면 프로토콜 핸들러 열기를 클릭하여 확인합니다.
- 다음 대화상자에서 앱이
web+coffee링크를 처리하도록 허용합니다.
핸들러가 링크를 성공적으로 처리하면 앱에서 커피 컵 이미지가 열려 있는 것을 볼 수 있습니다.
서비스 워커
서비스 워커는 미래 웹 플랫폼의 기본 기술입니다. 이는 브라우저가 웹페이지와 별도로 백그라운드에서 실행하는 스크립트입니다. 이러한 스크립트를 사용하면 푸시 알림, 백그라운드 동기화, 오프라인 환경과 같이 웹페이지나 사용자 상호작용이 필요하지 않은 기능에 액세스할 수 있습니다.
관련 가이드:
Application 패널의 Service Workers 탭은 DevTools에서 서비스 워커를 검사하고 디버그하는 기본 위치입니다.
- 서비스 워커가 현재 열려 있는 페이지에 설치된 경우 이 탭에 표시됩니다. 예를 들어 위 스크린샷에는
https://airhorner.com/범위에 설치된 서비스 워커가 있습니다. 
오프라인 체크박스를 선택하면 DevTools가 오프라인 모드로 전환됩니다. 이는 네트워크 패널 또는 명령어 메뉴의 Go offline옵션에서 사용할 수 있는 오프라인 모드와 같습니다.
Update on refresh 체크박스는 페이지를 로드할 때마다 서비스 워커가 강제로 업데이트되도록 합니다.
네트워크 우회 체크박스는 서비스 워커를 우회하고 브라우저가 요청된 리소스의 네트워크로 강제 이동합니다.- 네트워크 요청 링크를 클릭하면 서비스 워커와 관련하여 인터셉트한 요청의 목록이 있는 네트워크 패널 (
is:service-worker-intercepted필터)로 이동합니다. - Update 링크는 지정된 서비스 워커를 일회성으로 업데이트합니다.
- 푸시 버튼은 페이로드 (tickle라고도 함) 없이 푸시 알림을 에뮬레이션합니다.
- 동기화 버튼은 백그라운드 동기화 이벤트를 에뮬레이션합니다.
- Unregister 링크는 지정된 서비스 워커의 등록을 취소합니다. 버튼 클릭 한 번으로 서비스 워커를 등록 취소하고 저장소와 캐시를 완전히 지우는 방법을 알아보려면 저장소 비우기를 참조하세요.
- Source 줄은 현재 실행 중인 서비스 워커가 설치된 시점을 알려줍니다. 링크는 서비스 워커의 소스 파일 이름입니다. 링크를 클릭하면 서비스 워커의 소스로 이동합니다.
- Status(상태) 줄은 서비스 워커의 상태를 알려줍니다. 이 줄의 숫자 (스크린샷의
#16)는 서비스 워커가 업데이트된 횟수를 나타냅니다.
Update on refresh 체크박스를 선택하면 페이지가 로드될 때마다 숫자가 증가합니다.
상태 옆에 시작 링크 (서비스 워커가 중지된 경우) 또는 중지 링크 (서비스 워커가 실행 중인 경우)가 표시됩니다. 서비스 워커는 브라우저에 의해 언제든지 중지 및 시작되도록 설계되었습니다. stop 링크를 사용하여 서비스 워커를 명시적으로 중지하면 이를 시뮬레이션할 수 있습니다. 서비스 워커를 중지하면 서비스 워커가 다시 시작될 때 코드가 어떻게 동작하는지 테스트할 수 있습니다. 영구적인 전역 상태에 관한 잘못된 가정으로 인한 버그를 자주 드러냅니다. - Clients 줄은 서비스 워커의 범위가 지정된 출처를 알려줍니다. 포커스 버튼은 여러 개의 등록된 서비스 워커가 있는 경우에 주로 유용합니다. 다른 탭에서 실행 중인 서비스 워커 옆에 있는 포커스 버튼을 클릭하면 Chrome에서 해당 탭에 포커스를 맞춥니다.
Update Cycle 표에는 서비스 워커의 활동과 설치, 대기, 활성화와 같은 경과된 시간이 표시됩니다. 각 활동의 정확한 타임스탬프를 보려면
Expand(펼치기) 버튼을 클릭합니다.
자세한 내용은 서비스 워커 수명 주기를 참조하세요.
서비스 워커로 인해 오류가 발생하면 Service Workers 탭의 Source 줄 옆에 오류 수와 함께 
Error 아이콘이 표시됩니다.
이 번호가 있는 링크를 클릭하면 기록된 모든 오류가 있는 콘솔로 이동합니다.
모든 서비스 워커에 대한 정보를 보려면 서비스 워커 탭 하단의 모든 등록 보기를 클릭합니다. 이 링크를 클릭하면 서비스 워커를 추가로 디버그할 수 있는 chrome://serviceworker-internals/?devtools로 이동합니다.
서비스 워커 캐시
캐시 스토리지 탭에는 (서비스 워커) Cache API를 사용하여 캐시된 리소스의 읽기 전용 목록이 표시됩니다.
캐시를 처음 열고 리소스를 추가하면 DevTools가 변경사항을 감지하지 못할 수 있습니다. 페이지를 새로고침하면 캐시가 표시됩니다.
캐시가 두 개 이상 열려 있는 경우 캐시 저장소 드롭다운 아래에 표시됩니다.
할당량 사용
Cache Storage 탭 내의 일부 응답이 '불투명'으로 표시될 수 있습니다. 이는 CORS가 사용 설정되지 않았을 때 CDN 또는 원격 API와 같은 다른 출처에서 가져온 응답을 나타냅니다.
교차 도메인 정보 유출을 방지하기 위해 스토리지 할당량 한도 (예: QuotaExceeded 예외 발생 여부)를 계산하는 데 사용되고 navigator.storage API에서 보고하는 불투명한 응답의 크기에 상당한 패딩이 추가됩니다.
이 패딩의 세부정보는 브라우저마다 다르지만 Chrome의 경우 캐시된 단일 불투명 응답이 전체 저장소 사용량에 기여하는 최소 크기는 약 7MB입니다. 캐시할 불투명 응답 수를 결정할 때 이 점을 염두에 두어야 합니다. 불투명 리소스의 실제 크기를 기준으로 예상하는 것보다 훨씬 빨리 저장용량 할당량 제한을 쉽게 초과할 수 있기 때문입니다.
관련 가이드:
저장용량 비우기
저장용량 비우기 탭은 프로그레시브 웹 앱을 개발할 때 매우 유용한 기능입니다. 이 탭을 사용하면 버튼 클릭 한 번으로 서비스 워커를 등록 취소하고 모든 캐시와 스토리지를 지울 수 있습니다. 자세히 알아보려면 아래 섹션을 확인하세요.
관련 가이드:
기타 애플리케이션 패널 가이드
Application 패널의 다른 창에 대한 자세한 도움말은 아래 가이드를 확인하세요.
관련 가이드: