다양한 기기와 네트워크 연결 유형을 사용하는 많은 사람들이 현대 웹을 즐기고 있습니다. 크리에이터의 콘텐츠는 전 세계 사용자에게 도달할 수 있지만 모든 사용자에게 웹에서 안정적인 환경을 제공하기는 어려울 수 있습니다. 신뢰성이 무엇을 의미하는지 이해하는 것조차 어려울 수 있습니다.
오프라인 상태에서도 안정적
신뢰성을 고려하는 한 가지 방법은 웹 앱이 네트워크 연결 없이 작동하는지 확인하는 것입니다. 이는 사용자가 앱 스토어에서 휴대기기에 설치된 플랫폼별 앱에서 당연하게 여기는 안정성 유형입니다. 이러한 앱 중 하나의 아이콘이 표시되면 현재 인터넷에 연결되어 있는지와 관계없이 아이콘을 탭하여 일종의 환경을 열 수 있을 것으로 예상합니다.
최근까지는 네트워크 연결 없이 안정적인 웹 애플리케이션을 빌드하는 것이 어려웠습니다.
안정적으로 빠른 속도
신뢰성을 고려하는 또 다른 방법은 사용자가 이상적이지 않은 네트워크에 연결되어 있을 때 웹 앱이 충분히 빠른 속도로 로드될 수 있는지 확인하는 것입니다. 재방문 사용자가 모바일 데이터에 연결되어 있을 때 웹 앱과 상호작용하는 환경이 Wi-Fi에 연결되어 있을 때와 동일한가요? 지연 시간이 높거나 '거짓 Wi-Fi' 연결을 사용하는 사용자는 어떻게 되나요? 이러한 시나리오에서도 웹 앱이 안정적으로 빠르게 작동하나요?
최적의 조건에서만 빠른 것으로는 충분하지 않습니다. 사용자는 모든 네트워크 조건에서 웹 앱이 작동하는 방식을 통해 웹 앱의 성능을 확인합니다.
신뢰성은 달성할 수 있습니다.
다행히도 최신 웹 플랫폼은 안정적인 웹 애플리케이션을 만들기 위한 구성요소로 사용할 수 있는 서비스 워커, 캐시 저장소 API와 같은 기술을 제공합니다. 이를 통해 웹 앱과 네트워크 사이에 있는 코드를 작성할 수 있습니다. 대부분의 경우 네트워크를 완전히 우회하고 이전에 캐시된 콘텐츠를 대신 사용하여 웹 앱의 요청을 처리할 수 있습니다.
방향을 안내하는 등대: 오프라인 상태에서 200 OK로 응답
서비스 워커를 빌드하고 캐시에서 콘텐츠를 제공하기 시작하면 효과적으로 수행하고 있는지 알기 어렵습니다. 구현한 서비스 워커가 웹 앱이 네트워크를 피하는 데 실제로 도움이 되는지 어떻게 알 수 있나요? 캐싱 전략을 약간만 변경해도 신중하게 제작한 오프라인 환경이 깨지지 않도록 하려면 어떻게 해야 할까요?
Lighthouse는 안정적인 웹 앱을 빌드할 때 특히 유용한 한 가지 테스트를 제공합니다. 오프라인 상태에서 200 OK로 응답:
여기서 실제로 테스트되는 것은 무엇인가요? 브라우저에서 네트워크 연결 손실을 시뮬레이션한 다음 사이트에서 감사 중인 URL을 로드하려고 시도하는 것입니다. 이 테스트에서는 제어되고 반복 가능한 일련의 작업을 사용하여 안정적인 사이트 구축의 한 측면인 오프라인 상태에서 안정성을 테스트합니다.
여정
이제 막 시작한 단계라면 오프라인 시 200으로 응답 확인에서 부정적인 결과가 나올 가능성이 매우 높습니다. 괜찮습니다. 맞춤설정된 스타터 프로젝트를 사용하지 않는 한 웹 애플리케이션에는 기본적으로 이러한 유형의 안정성이 없습니다. 다음 몇 가지 가이드에서는 웹 앱이 로드되는 항목을 식별하는 데 필요한 기술을 소개하고 Lighthouse를 사용하여 로드 환경을 안정적으로 만드는 방법을 알려줍니다.
이 과정에서 Lighthouse 감사를 계속 다시 실행하는 것이 좋습니다. 새 웹 애플리케이션으로 시작하여 안정적인 프로그레시브 웹 앱으로 끝나는 여정 전반에 걸쳐 안내 역할을 합니다.