What should you use for offline storage of your Progressive Web App?
Recommentations:
- URL addressable resources: Use the (Service Worker) Cache API
- All other data: IndexedDB (using a Promise wrapper library)
| Type | Sync | Async | Web Workers | Window | Service Workers | Notes | Libraries |
|---|---|---|---|---|---|---|---|
| IndexedDB | Nearly unlimited storage. Mandatory complexity (schema versioning, transactions). Security (per-origin). | localForage (promises, legacy browser support), idb-keyval (<500 bytes, promises, if only need key-value), idb (promises, also does iteration, indexing), Dexie (complex queries, secondary indices), PouchDB (sync), Lovefield (relational), ydn-db (dexie-like, works with WebSQL) | |||||
| Cache API | sw-toolbox | ||||||
| Cookies | Size-limited, only strings. | js-cookie, Cookies.js | |||||
| Web Storage | Size-limited, only strings. | store.js, lawnchair | |||||
| File API | Superseded by the File and Directory Entries API | FileAPI library. For file-saving see FileSaver.js and the writable-files proposals | |||||
| WebSQL | Nearly unlimited storage. Not available in a Web/Service Worker. Rejected by Edge, Firefox. Likely to unship in Chrome. | ||||||
| AppCache | Chrome: Deprecating HTTP support, Firefox: Intent to Deprecate | ||||||
| FileSystem | Nearly unlimited storage. Sandboxed - not native file access. No interest outside Chrome |
- "Nearly unlimted storage" generally means storage up until the available quota is reached
- If the SW cache (Cache API) is full, the browser will fail to cache more data (this applies to all origin storage, including IDB). Date headers can be used to get the age of cached items for cache invalidation.
Current and future work
- Durable Storage: protect storage from the user agentโs clearing policies
- Indexed Database API 2.0: advanced key-value data management
- Promisified IndexedDB: native support for a Promise-friendly version of IDB
- IndexedDB Observers: native IDB observation without needing wrapper around the database
- Async Cookies API: async JavaScript cookies API for documents and workers
- Quota Management API: check how much quota an app/origin is using
- writable-files: allow sites to interact with local files more seamlessly
- Directory downloads: allow sites to download directories without .zip files
- File and Directory Entries API: support for file and directory upload by drag-and-drop