프로그레시브 웹 앱은 웹사이트입니다. 모든 애셋은 웹과 동일하지만 온라인에서는 애셋이 빠르게 로드되고 오프라인에서도 사용할 수 있는 새로운 도구가 있습니다.
앱 구성요소
애플리케이션 개발에는 일반적으로 로직 및 코드 (컴파일 여부와 관계없이)부터 화면 디자인, 이미지, 로고, 글꼴과 같은 사용자 인터페이스 요소에 이르기까지 여러 애셋과 리소스가 필요합니다.
프로그레시브 웹 앱은 웹사이트이므로 웹의 모든 애셋이 동일합니다.
- 콘텐츠 및 초기 페이지 렌더링을 위한 HTML입니다.
- WebAssembly 모듈 (컴파일된 코드)을 실행하고 하드웨어에 최적화된 2D 및 3D 그래픽을 렌더링하는 기능을 포함한 로직용 JavaScript입니다.
- 레이아웃, 스타일 지정, 애니메이션용 CSS
- PNG, JPEG, WebP, SVG와 같은 웹 형식의 이미지
- MPEG-4 및 WebM과 같은 웹 형식의 동영상
- 웹 글꼴:
- JSON 또는 다른 형식의 데이터입니다.
기본적으로 웹사이트는 HTML로 시작하여 나머지 리소스까지 네트워크를 통해 애셋을 다운로드합니다.
이러한 리소스를 빠르게 로드하여 오프라인에서 사용할 수 있도록 관리하는 것은 웹 입장에서 어려운 일이었습니다. 요즘 PWA에서는 이전에는 플랫폼별 앱에만 연결되었던 기능을 사용합니다.
플랫폼별 앱과 PWA 비교
플랫폼별 앱을 설치하는 경우 일반적으로 코드, 이미지, 글꼴, 동영상 등 앱의 모든 애셋이 포함된 패키지를 다운로드합니다. 따라서 앱이 오프라인일 때도 이러한 모든 리소스를 기기 저장소에서 사용할 수 있습니다.
반면 기존 웹사이트에서는 필요한 경우 애셋을 다운로드하려면 네트워크 연결이 필요합니다. 오프라인 상태인 경우 클라이언트 측에 애셋이 없으므로 브라우저에서 오류가 표시됩니다.
PWA 접근 방식은 플랫폼별 앱과 마찬가지로 일부 또는 모든 애셋을 클라이언트 측에서 사용할 수 있도록 하여 기존 웹 환경을 개선합니다. 따라서 PWA를 열 때 초기 렌더링은 플랫폼 앱처럼 즉시 실행될 수 있습니다. 네트워크로 이동하지 않고도 애셋을 사용할 수 있기 때문입니다.
캐시 및 스토리지
웹이 시작될 때부터 개발자는 리소스가 캐시되는 방식을 완전히 제어할 수 없었습니다. 브라우저는 HTTP 캐시를 담당하며 다른 정책에 따라 리소스를 캐시하거나 제공하지 않을 수 있습니다. Web Storage 및 IndexedDB와 같은 다른 스토리지 옵션은 간단한 데이터와 객체를 저장하기 위한 것이었습니다.
PWA는 콘텐츠와 관련해 이러한 정책만 사용할 필요가 없습니다. 대신, 현재 리소스를 캐시하는 시기와 방법과 리소스를 로컬로 전달하는 시기와 방법을 더 잘 제어할 수 있는 솔루션인 Cache Storage API가 있습니다. 웹에는 몇 가지 클라이언트 측 저장소 솔루션이 있습니다.
- 웹 저장용량:
localStorage및sessionStorage가 포함됩니다. 이러한 API는 간단한 키-값 문자열 쌍을 저장합니다. 웹 저장소는 제한적이고 동기식 API가 있으므로 가능하면 사용하지 않는 것이 좋습니다. - IndexedDB: 웹 성능에 우수한 비동기 API를 사용하는 객체 기반 데이터베이스 (No-SQL)입니다. IndexedDB는 구조화된 데이터와 바이너리 데이터를 클라이언트 측에 저장할 수 있습니다. 일반적으로 API 요청으로 가져오거나 보내는 것과 같이 데이터를 저장하는 데 사용됩니다. 데이터를 즉시 로컬에 저장한 후 나중에 서버와 동기화하는 것도 유용합니다. IndexedDB API는 데이터베이스와 상호작용하는 데 사용됩니다.
- 캐시 저장소: 리소스를 서버에서 제공하는 그대로의 HTTP 헤더와 함께 저장하고 검색하는 데 사용할 수 있는 HTTP 요청 및 응답 쌍의 모음입니다. Cache Storage API를 사용하면 오프라인일 때도 애셋과 같은 네트워크 요청을 저장, 검색, 업데이트, 삭제할 수 있습니다.
서비스 워커의 필요성
PWA는 캐시 저장소 및 IndexedDB에 애셋을 저장할 수 있지만, 이러한 애셋을 어떻게 하면 사용자에게 빠른 오프라인 환경을 제공할 수 있을까요? 답은 무엇일까요? 서비스 워커
서비스 워커를 사용하면 네트워크로 이동하지 않고도 자산을 제공하고, 사용자에게 알림을 보내고, PWA 아이콘에 배지를 추가하고, 백그라운드에서 콘텐츠를 업데이트하고, 전체 PWA가 오프라인으로 작동하도록 할 수 있습니다. 서비스 워커에 대한 자세한 내용은 다음 장을 참조하세요.
오프라인 지원
사용자는 애플리케이션이 빠르고 항상 준비된 환경을 제공하기를 기대합니다. 즉, 앱이 오프라인에서 작동합니다.
오프라인 준비가 되었다고 해서 네트워크 연결 없이 모든 콘텐츠나 서비스를 사용할 수 있는 것은 아닙니다. 하지만 사용자가 오프라인 상태일 때 계속 진행하기 위해 인터넷에 연결하도록 요청하는 페이지와 같이 최소한 기본적인 환경을 제공하면 더 나은 사용자 환경을 제공할 수 있으므로 일반적인 브라우저 오류가 아닌 앱 환경을 사용할 수 있습니다. 일부 브라우저에서는 이 기능이 PWA 설치 기준을 통과해야 합니다. PWA의 사용자 인터페이스를 캐시된 콘텐츠와 함께 표시하는 것이 더 좋습니다. 사용자가 다시 온라인 상태가 되었을 때 전체 PWA를 계속 사용하고 서버 변경사항을 동기화할 수 있게 하는 것이 오프라인 작업의 가장 중요한 표준입니다.
앱을 오프라인에서 사용할 수 있게 하려면 오프라인 환경에 필요한 애셋을 캐시하고 나중에 서비스 워커가 이러한 애셋을 제공하도록 해야 합니다. 오프라인 애셋을 사용하기 전에 캐시에 추가해야 합니다. 이 경우 요청 시 이를 캐시할 수 없습니다.
자주 사용되는 캐시 접근 방식
PWA에서는 사용자가 모든 결정을 담당합니다. 필요에 따라 애셋을 캐시하거나 설치하는 최선의 방법을 선택할 수 있습니다. 이때 다음과 같은 사항을 결정해야 합니다.
- 사전 캐싱: 처음 로드할 때 설치할 애셋을 선택합니다. 이러한 애셋에는 앱을 렌더링하기 위한 HTML과 최소 애셋이 포함되어야 합니다. 사전 캐시를 사용할 때는 기기의 공간과 네트워크를 사용하고 있다는 점에 유의하세요. 애셋을 다운로드하고 캐시할 때는 주의를 기울이고 책임감 있게 사용하세요.
- 필요에 따라 캐시: 요청 시 캐시에 애셋을 추가하는 데 사용됩니다. 일반적으로 이미지 또는 콘텐츠와 같이 앱 버전과 관계없이 변경될 수 있는 애셋입니다. 필요에 따라 캐싱하는 방법에 대한 다양한 전략은 캐싱 섹션을 참조하세요.
- API 및 웹 서비스: API 호출을 캐시할 수 있습니다. 또는 API 응답을 캐시하는 대신 IndexedDB에 데이터를 저장할 수 있습니다.
저작물 업데이트 중
앱 카탈로그 설치 앱의 표준 앱 모델에서는 개발자가 앱을 업데이트해야 할 때 새 패키지를 게시합니다. 대부분의 애셋이 변경되지 않았더라도 사용자는 전체 패키지를 다시 다운로드해야 합니다. PWA에서는 위 섹션의 접근 방식을 사용하여 애셋을 업데이트하는 방법과 시기를 결정합니다. 저작물을 업데이트하는 방법은 다음과 같습니다.
- 전체 업데이트: 이 경우 앱을 변경할 때마다(사소한 변경사항 포함) 코드가 모든 애셋을 다시 캐시에 다운로드합니다.
- 부분 업데이트: 이 접근 방식에서는 업데이트된 저작물을 정의하는 방법을 만들고 사용자의 개입 여부에 관계없이 저작물만 업데이트합니다.
- 지속적인 업데이트: 이 기법을 사용하면 애셋이 PWA를 사용할 때마다 자동으로 확인되고 업데이트됩니다.
크기 및 수명
일반적으로 플랫폼별 앱은 크기 제한을 처리하지 않습니다. 설치 시 앱의 크기는 기가바이트 또는 그 이상일 수 있습니다. 기기에 용량이 충분하면 설치가 허용됩니다. 또한 앱이 설치되어 있는 동안에는 앱 사용 여부와 관계없이 총 저장용량을 사용합니다. PWA에서는 스토리지가 다르게 처리됩니다. 브라우저는 PWA의 로직에 정의한 정책에 따라 애셋을 저장합니다.
크기 제한은 브라우저에 따라 다릅니다. 플랫폼별 앱만큼 유연하지는 않지만 대부분의 웹 앱에는 충분합니다. 이 도움말에서 브라우저별 구체적인 제한사항을 확인할 수 있습니다.
저장 압력에 따라 또는 사용자가 브라우저에서 PWA를 사용하는 경우 몇 주간 활동이 없으면 브라우저에서 애셋을 제거할 수 있습니다. 일부 플랫폼에서는 사용자가 PWA를 설치해도 제거되지 않습니다. 가능한 경우 코드에서 API를 통해 영구 저장소를 요청하여 제거를 방지할 수 있습니다.