프로그레시브 웹 앱 오프라인 지원 감지 개선

Penny McLachlan
Penny McLachlan

프로그레시브 웹 앱 (PWA)은 모바일 및 모바일 애플리케이션을 위한 웹 기술을 사용하여 설치 가능한 최신 애플리케이션을 있습니다.

최신 웹 환경을 구축하기 위한 기준 중 하나일 뿐 우연히 PWA의 경우, 기기가 백그라운드에서 실행되더라도 님은 오프라인 상태입니다. 즉, 네트워크 연결이 끊겨도 Chrome 공룡 화면이 표시되지 않습니다. 액세스할 수 있습니다.

모든 PWA 기준의 목표는 사용자가 우수한 앱 경쟁력을 경험할 수 있는 환경을 제공합니다. Chrome은 설치를 사용 설정하기 전에 PWA 기준을 충족하는지 확인 PWA에 대해 자세히 알아보세요.

모든 핵심 요소를 충족하는 앱만 프로그레시브 웹 앱 설치 가능 기준(지원 포함) Chrome에서 기기에 설치할 수 있습니다.

이전 오프라인 감지 로직

오프라인 지원 여부 확인이 PWA 설치 가능 여부의 일부였습니다. 10년 넘게 인공지능을 구현해 왔습니다 최근까지만 해도 Chrome에는 서비스 워커를 통해 요청을 시뮬레이션할 수 있으므로 올바른 오프라인 동작을 할 수 없었습니다.

서비스 워커 다이어그램

즉, Chrome이 fetch 이벤트 핸들러가 오프라인 확인 중에 HTTP 200으로 유효한 리소스를 반환했습니다. Chrome은 서비스 워커에 실제로 fetch 핸들러가 있는지만 확인했습니다.

오프라인 감지 로직 업데이트

Chrome 89에는 서비스 워커를 통해 오프라인 감지 로직이 지원할 수 있습니다.

이 새로운 기능을 사용하여 PWA가 올바른 페이지를 방문했지만 해당 계획은 보류하도록 설정했습니다. 설치 가능 여부 확인 페이지에 fetch 이벤트 핸들러

개발자에게는 어떤 영향을 미치나요?

지금은 변경할 필요가 없지만 업데이트된 로직을 사용하여 유효한 페이지에 표시할 수 있습니다.

어떤 종류의 오프라인 환경을 제공할지는 사용자가 결정합니다. 오프라인 경험의 한 쪽 끝은 온전히 작동하는 오프라인 경험입니다. 다시 말해 필요한 모든 리소스와 데이터를 사전 캐싱하고 데이터를 다시 온라인 상태가 되면 서버에 전달됩니다. 캐싱 리소스 또한 핵심 웹 vitals 측정항목을 정의하므로 네트워크의 리소스를 매번 할당하지 않습니다. 스펙트럼의 다른 쪽 끝에는 맞춤 오프라인 대체 페이지를 참조하세요.

Chrome 90 무렵에는 개발자 도구의 문제 탭이 삭제됩니다.