Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Progressive Web App용 오프라인 저장소

DevTools의 PWA
Pokedex Cache API는 URL 주소 지정 가능한 리소스로 사용되는 반면에 Progressive Web App은 애플리케이션 상태 및 Pokemon 데이터 집합에 IndexedDB를 사용합니다.

인터넷 연결은 이동 중에 없거나 쉽게 끊어질 수 있으므로 오프라인 지원 및 신뢰할 수 있는 성능은 Progressive Web App의 일반적인 기능으로 제공됩니다. 완벽한 무선 환경에서도 캐싱 및 기타 저장 기술을 현명하게 사용하면 사용자 환경이 크게 향상될 수 있습니다. 이 글에서는 PWA용 오프라인 데이터 저장소에 대한 몇 가지 아이디어를 요약하여 설명합니다. 의미 있는 경험을 오프라인으로 제공하는 데 필요한 JSON 페이로드, 이미지 및 일반 정적 데이터에 대해 생각해 보세요.

권장 사항

오프라인으로 데이터를 저장하는 것과 관련된 일반적인 권장 사항은 다음과 같습니다.

그 근거는 다음과 같습니다.

두 API는 모두 비동기식입니다(IndexedDB는 이벤트 기반이고 Cache API는 프라미스 기반). 또한 웹 워커, 창 및 서비스 워커를 사용합니다. IndexedDB는 모든 곳에서 사용할 수 있습니다. 서비스 워커(및 Cache API)는 이제 Chrome, Firefox 및 Opera에서 사용할 수 있으며 Edge용으로 개발 중입니다. IndexedDB에 대한 프라미스 래퍼는 IndexedDB 라이브러리와 함께 제공되는 강력하지만 복잡한 절차(예: 트랜잭션, 스키마 버전 관리)를 숨깁니다. IndexedDB는 탭 간 간편한 동기화를 허용하는 관찰자(observer)를 지원합니다.

Safari 10은 최신 Tech Preview에서 오래된 많은 IndexedDB 버그를 수정했습니다. 참고: Safari 10의 IndexedDB 및 PouchDB에서 안정성 문제가 발생하여 속도가 다소 느린 경우가 있습니다. 더 많은 연구가 이루어지기 전에는 마일리지가 다를 수 있습니다. webkit 이용자 및 관련 OSS 라이브러리 작성자가 살펴볼 수 있도록 브라우저 버그를 테스트하고 정리하세요. LocalForage, PouchDB, YDN 및 Lovefield는 (끊어진 IndexedDB에 대한 효율적인 기능 테스트 방법이 없기 때문에) 기본적으로 Safari에서 WebSQL을 사용합니다. 즉, 해당 라이브러리는 별도의 작업 없이 Safari 10에서 작동합니다(IndexedDB를 직접 사용하지 않음).

PWA의 경우 Cache API를 통해 애플리케이션 셸(JS/CSS/HTML 파일)을 작성하여 정적 리소스를 캐시하고 IndexedDB에서 오프라인 페이지 데이터를 채울 수 있습니다. IndexedDB에 대한 디버깅 지원은 이제 Chrome (Application 탭), Opera, Firefox(Storage Inspector) 및 Safari(Storage 탭 참조)에서 사용할 수 있습니다.

다른 저장소 메커니즘은?

웹 저장소(예: LocalStorage 및 SessionStorage)는 동기식이며 Web Worker를 지원하지 않으며 크기와 유형(문자열 전용)이 제한되어 있습니다. 쿠키는 용도가 있지만 동기식이며 Web Worker를 지원하지 않으며 크기가 제한되어 있습니다. WebSQL은 광범위한 브라우저 지원을 제공하지 않으므로 사용하지 않는 것이 좋습니다. File System API는 Chrome을 제외한 모든 브라우저에서 지원되지 않습니다. File APIFile and Directory Entries APIFile API 사양에서 개선 중이지만 아직은 널리 채택할 만큼 충분히 성숙되었거나 표준화되지 않았습니다.

저장 가능한 양은?

브라우저 제한
Chrome 여유 공간의 6% 미만
Firebox 여유 공간의 10% 미만
Safari 50MB 미만
IE10 250MB 미만

Chrome 및 Opera에서 저장소 용량은 API 단위가 아닌 원본 단위(per origin)입니다. 이 두 저장소 메커니즘은 브라우저 할당량에 도달할 때까지 데이터를 저장합니다. 앱은 Quota Management API를 통해 사용 중인 할당량을 확인할 수 있습니다. Chrome에서 앱은 최대 6%의 디스크 여유 공간을 사용할 수 있습니다. Firefox에서 앱은 최대 10%의 디스크 여유 공간을 사용할 수 있지만 50MB의 데이터가 저장되면 추가 저장소를 요청하는 메시지를 표시합니다. 모바일 Safari에서 앱은 최대 50MB까지 사용할 수 있는 반면 데스크톱 Safari는 무제한 저장을 허용합니다(5MB 저장 후에 안내 메시지 표시). IE10+은 최대 250MB까지 사용할 수 있으며 10MB 저장 후에 안내 메시지를 표시합니다. PouchDB는 IDB 저장 동작을 추적합니다.

앱이 사용하는 저장소 공간의 크기를 확인하는 방법은?

Chrome에서 Quota Management API를 통해 현재 사용 중인 저장소 공간의 크기와 애플리케이션에서 사용할 수 있는 용량을 쿼리할 수 있습니다. 새로 제공된 Storage Quota Estimate API를 사용하면 프라미스 지원을 통해 원본에서 사용 중인 할당량을 훨씬 쉽게 찾을 수 있습니다.

캐시 제거 작동 방식은?

브라우저 제거 정책
Chrome Chrome에 공간이 부족하면 오래 전에 사용한 항목 제거
Firebox 전체 디스크가 가득 차면 오래 전에 사용한 항목 제거
Safari 제거 안 함
Edge 제거 안 함

원본에는 적당한 공간이 제공됩니다. 이 여유 공간은 각종 원본 저장소(IndexedDB, Cache API, localStorage 등)가 공유합니다. 제공되는 여유 공간은 사양으로 지정되지 않고 기기와 저장소 상태에 따라 다릅니다.

웹 저장소 공간이 부족하면 UA는 사용 가능한 공간을 확보하기 위해 저장소를 비웁니다. 이 경우 오프라인 응답성을 저해할 수 있으므로 최근에 업데이트된 저장소 사양은 'Persistent' 및 'Best effort'(기본값) 전략을 정의합니다. “Best effort”는 사용자를 방해하지 않고 저장소를 비울 수 있음을 의미하지만 장기간 및/또는 중요한 데이터에 대한 영구성이 떨어집니다. 현재 IndexedDB와 Cache API는 모두 “Best effort” 범주에 해당합니다.

'Persistent' 저장소는 저장소 공간이 부족할 때 자동으로 비워지지 않습니다. 사용자가 (브라우저 설정을 통해) 해당 저장소를 수동으로 비워야 합니다. Chrome은 Origin Trial을 통해 Persistent Storage에 대한 지원을 실험해왔으며 최신 뉴스에 따르면 해당 저장소는 Chrome 55에 제공될 예정입니다.

현재 및 미래 오프라인 저장소 작업

오프라인 저장소에 관심이 있는 경우 다음을 참조하세요.

  • Durable Storage: 사용자 에이전트의 지우기 정책으로부터 저장소를 보호합니다.

  • Indexed Database API 2.0: 고급 키-값 데이터 관리를 지원합니다.

  • Promisified IndexedDB: 프라미스 친화적인 버전의 IndexedDB에 대한 기본 지원을 제공합니다.

  • IndexedDB Observers: 데이터베이스 래퍼가 필요 없는 기본 IndexedDB 관찰을 지원합니다.

  • Async Cookies API: 문서 및 워커에 대한 비동기 JavaScript Cookies API입니다.

  • Quota Management API: 앱/원본이 사용하는 할당량을 확인합니다.

  • writable-files: 사이트에서 로컬 파일과 훨씬 원활하게 상호작용할 수 있도록 지원합니다.

  • Directory downloads: 사이트에서 .zip 파일 없이 디렉토리를 다운로드할 수 있도록 지원합니다.

  • File and Directory Entries API: 드래그 앤 드롭 방식을 통한 파일 및 디렉토리 업로드를 지원합니다.

  • 현재 Async Cookies API는 폴리필을 통해 지원하도록 구상하고 있습니다.

  • Debugging IndexedDB는 현재 Edge에서 지원되지 않습니다(기본 JetDB는 디버그할 수 있음). 기본 제공 지원에 대한 투표는 여기에서 하세요.

  • 비동기 LocalStorage에 대한 아이디어는 과거부터 있었지만, 현재는 IndexedDB 2.0을 개선하는 데 중점을 두고 있습니다.

  • writable-files 제안은 원활한 로컬 파일 상호작용을 위한 더 나은 표준 추적 솔루션을 제공할 수 있습니다.

  • 더욱 영구적인 저장소가 필요한 앱의 경우 Durable Storage에서 진행 중인 작업을 참조하세요.

오프라인 저장소는 마법 같은 것이 아니며 기본 API에 대한 이해는 현재 사용할 수 있는 기능을 최대한 활용하는 데 도움이 됩니다. 이러한 API를 직접 사용하든 추상화 라이브러리를 사용하든 그 방법을 숙지하세요.

이 가이드가 PWA를 빛나게 만드는 오프라인 경험을 만드는 데 일조하기를 바랍니다! ✨

관련 자료

유용한 리소스

  • sw-toolbox(동적/런타임 요청에 대한 오프라인 캐싱)

  • sw-precache(정적 자산/애플리케이션 셸에 대한 오프라인 사전 캐싱)

  • Webpack 사용자는 위의 항목 또는 offline-plugin을 직접 사용할 수 있습니다.

검토할 가치가 있는 IndexedDB 라이브러리

웹 저장소 공간에 대한 정보는 Nolan Lawson, Joshua Bell(Open Web Storage 및 BlinkOn talk 관련 글에서 많은 영감을 받았음), Jake Archibald, Dru Knox 및 기타 연구자의 글을 참조했으며, 그들에게 감사드립니다.