사용자가 PWA를 설치할 때 브라우저에서 PWA를 고유하게 식별할 방법이 필요합니다.
있습니다. 그러나 최근까지는 웹 앱 매니페스트 사양이 명시적으로
PWA를 고유하게 식별하는 방법을 정의하여 브라우저에서
서로 다른 구현으로 이어집니다 일부 브라우저에서는 start_url
가 사용되는 반면, 다른 경우에는 매니페스트 파일의 경로가 사용되므로
이러한 필드 중 하나를 업데이트할 수 없습니다.
이 문제를 해결하기 위해 웹 앱에 새로운 선택적 id 속성이 추가되었습니다.
매니페스트 사양에 따라
있습니다. 매니페스트에 id 속성을 추가하면
start_url 또는 매니페스트의 위치를 확인하고,
나중에 업데이트될 것입니다
id 속성의 기능은 무엇인가요?
id 속성은 브라우저에 대한 PWA의 ID를 나타냅니다. 날짜
브라우저가 애플리케이션과 일치하는 ID가 없는 매니페스트를
이미 PWA를 설치한 경우 PWA가 제공되더라도 새 PWA로 취급됩니다.
다른 PWA와 동일한 URL에 있습니다. 그러나 ID가 포함된 매니페스트를 확인하면
이미 설치된 PWA와 일치하는 경우 설치된 PWA로 취급됩니다.
브라우저 지원
Chrome 96에서 id 속성이 지원됩니다.
id가 없는 앱이 있으면 어떻게 해야 하나요?
별도의 조치를 취할 필요가 없으며,
웹 앱 매니페스트에 id를 추가하지 마세요 (단, start_url 및
매니페스트 경로는 동일하게 유지됩니다). 향후 PWA를 대비할 수 있도록 다음을 추가하세요.
id 속성을 웹 앱 매니페스트에 추가해야 합니다.
id를 어떻게 결정하고 설정하나요?
PWA의 id를 결정하는 가장 안전하고 정확한 방법
Chrome에서 계산한 값을 확인하는 것입니다.
- Chrome 96 이상을 사용하여 DevTools Application 패널의 Manifest 창
- 앱 ID 속성 옆에 있는
(!)아이콘 위로 마우스를 가져갑니다. 이(!)도움말 아이콘은id이 웹 앱 매니페스트 파일에 있습니다. - 툴팁에 표시된
id값을 확인합니다 (아래 스크린샷 참고). - 다음에 나와 있는
id값을 사용하여 웹 앱 매니페스트에id속성을 추가합니다. 도움말을 참조하세요
{
...
id: "/?homescreen=1",
start_url: "/?homescreen=1",
...
}
id를 설정하지 않으면 어떻게 되나요?
아무것도 고장나지 않으니 걱정하지 마세요. Chrome 96부터
매니페스트에 없는 경우 브라우저에서 id를 생성함
웹 앱 매니페스트의 start_url에 기반합니다.
웹 앱 매니페스트에 id를 추가하면 가능
를 사용하여 start_url 및 매니페스트 경로를 변경합니다 (특정
origin은 동일하게 유지됩니다.)
브라우저가
start_url가 아닌 지정된 id에 따라 PWA를 식별합니다.
매니페스트 파일에 포함됩니다.
테스트하려면 어떻게 해야 하나요?
동작을 테스트하려면 다음 단계를 따르세요.
- PWA를 설치합니다.
about://web-app-internals/를 열고unhashed_app_id를 확인합니다. 설치된 PWA의start_url속성- 다음 단계에 따라 웹 앱 매니페스트에
id속성을 추가합니다. 위의id를 확인하고 설정하는 방법 chrome://restart를 사용하여 브라우저를 다시 시작하고about://apps그런 다음 PWA를 닫아 매니페스트 파일을 강제로 새로고침합니다.about://web-app-internals/를 열고manifest_id속성을 확인합니다. 설치된 PWA가 변경되지 않았는지 확인합니다.- 웹 앱 매니페스트에서
start_url을 변경합니다. chrome://restart를 사용하여 브라우저를 다시 시작하고about://apps그런 다음 PWA를 닫아 매니페스트 파일을 강제로 새로고침합니다.about://web-app-internals/를 열고start_url속성을 확인합니다. 설치된 PWA를 실행하여 예상대로 업데이트되었는지 확인합니다.