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