Chrome에서 웹 앱 매니페스트 업데이트를 처리하는 방법

PWA의 아이콘, 바로가기, 색상, 기타 메타데이터를 변경하는 데 필요한 작업

아드리아나 하라
아드리아나 하라
X GitHub 마스토돈
프랑수아 보포르
프랑수아 보퍼
GitHub
피트 르페이지

PWA가 설치되면 브라우저에서는 앱 이름, 앱에서 사용해야 하는 아이콘, 앱 실행 시 열어야 하는 URL에 관한 웹 앱 매니페스트의 정보를 사용합니다. 하지만 앱 바로가기를 업데이트하거나 새로운 테마 색상을 사용해야 한다면 어떻게 해야 할까요? 이러한 변경사항이 브라우저에 언제, 어떻게 반영되나요?

대부분의 경우 변경사항은 매니페스트를 업데이트한 후 PWA 실행 후 1~2일 이내에 반영되어야 합니다.

데스크톱 Chrome 업데이트

PWA가 실행되거나 브라우저 탭에서 열릴 때 Chrome은 로컬 매니페스트가 변경되었는지 마지막으로 확인된 시간을 확인합니다. 브라우저가 마지막으로 시작된 후 매니페스트가 확인되지 않았거나 지난 24시간 동안 확인되지 않은 경우 Chrome은 매니페스트에 네트워크 요청을 한 다음 로컬 사본과 비교합니다.

매니페스트에서 선택된 속성이 변경되면 (아래 목록 참고) Chrome은 새 매니페스트를 대기열에 추가하고 모든 창이 닫힌 후에 새 매니페스트를 설치합니다. 설치되면 새 매니페스트의 모든 필드 (name, short_name, icons 제외)가 업데이트됩니다.

어떤 속성이 업데이트를 트리거하나요?

  • display (아래 참고)
  • scope
  • shortcuts
  • start_url
  • theme_color
  • file_handlers

display 필드가 업데이트되면 어떻게 되나요?

앱의 디스플레이 모드를 browser에서 standalone로 업데이트하면 기존 사용자는 업데이트 후 창에서 앱을 열지 않습니다. 웹 앱에는 두 가지 디스플레이 설정이 있습니다. 하나는 매니페스트 (개발자가 제어함)의 디스플레이 설정으로, 다른 하나는 사용자가 제어하는 창/브라우저 탭 설정입니다. 사용자 환경설정은 항상 존중됩니다.

매니페스트 업데이트 테스트

chrome://web-app-internals 페이지 (Chrome 85 이상에서 사용 가능)에는 기기에 설치된 모든 PWA에 관한 세부정보가 포함되어 있으며 매니페스트가 마지막으로 업데이트된 시점, 업데이트 빈도 등을 파악할 수 있습니다.

Chrome에서 업데이트된 매니페스트를 수동으로 확인하도록 강제하려면 명령줄 플래그 --disable-manifest-update-throttle로 Chrome을 실행하거나 Chrome을 다시 시작 (about://restart 사용)하면 타이머가 재설정되어 다음에 PWA가 실행될 때 Chrome에서 업데이트된 매니페스트를 확인할 수 있습니다. 그런 다음 PWA를 실행합니다. PWA를 닫은 후에는 새 매니페스트 속성으로 업데이트해야 합니다.

참조

Android용 Chrome 업데이트

PWA가 실행될 때 Chrome은 로컬 매니페스트가 마지막으로 변경되었는지 확인한 시간을 확인합니다. 매니페스트가 지난 24시간 동안 확인되지 않은 경우 Chrome은 매니페스트에 네트워크 요청을 예약한 다음 이를 로컬 사본과 비교합니다.

매니페스트에서 선택된 속성이 변경되면 (아래 목록 참고) Chrome은 새 매니페스트를 대기열에 추가하고 PWA의 모든 창이 닫힌 후 기기가 연결되어 Wi-Fi에 연결되면 Chrome은 서버에 업데이트된 WebAPK를 요청합니다. 업데이트하면 새 매니페스트의 모든 필드가 사용됩니다.

어떤 속성이 업데이트를 트리거하나요?

  • background_color
  • display
  • orientation
  • scope
  • shortcuts
  • start_url
  • theme_color
  • web_share_target

Chrome이 서버에서 업데이트된 매니페스트를 가져올 수 없는 경우 확인 기간이 30일로 늘어날 수 있습니다.

매니페스트 업데이트 테스트

about://webapks 페이지에는 기기에 설치된 모든 PWA에 관한 세부정보가 포함되어 있으며 매니페스트가 마지막으로 업데이트된 시간, 업데이트 빈도 등을 확인할 수 있습니다.

매니페스트 업데이트를 수동으로 예약하려면 타이머와 로컬 매니페스트를 재정의하여 다음을 실행합니다.

  1. 기기를 연결하고 Wi-Fi에 연결되어 있는지 확인합니다.
  2. Android 작업 관리자를 사용하여 PWA를 종료한 후 Android 설정의 앱 패널을 사용하여 PWA를 강제 종료합니다.
  3. Chrome에서 about://webapks를 열고 PWA의 '업데이트' 버튼을 클릭합니다. '업데이트 상태'가 '대기중'으로 변경됩니다.
  4. PWA를 실행하고 제대로 로드되는지 확인합니다.
  5. Android 작업 관리자를 사용하여 PWA를 종료한 후 Android 설정의 앱 패널을 사용하여 PWA를 강제 종료합니다.

PWA는 일반적으로 몇 분 내에 업데이트되며 업데이트가 완료되면 '업데이트 상태'가 '성공'으로 변경됩니다.

참조