Answer

IndexedDB vs localStorage: which should a PWA use?

Short answer

localStorage is a simple synchronous key-value store limited to strings and roughly 5-10MB, and it is not accessible from inside a service worker. IndexedDB is an asynchronous, transactional database that can store structured objects, blobs and much larger amounts of data, and it is accessible from both the page and the service worker — making it the right choice for most PWA data storage.

By InstantPWA engineering·Reviewed July 25, 2026

Why service workers matter here

localStorage is synchronous and blocks the main thread; it is also unavailable inside a service worker at all, which rules it out for offline-first data that needs to be read during a fetch event.

Capacity

localStorage is capped around 5-10MB per origin depending on the browser; IndexedDB shares the much larger Cache Storage quota, often hundreds of MB to GBs.

Ease of use

IndexedDB’s raw API is verbose, which is why most teams use a wrapper library like idb or Dexie.js rather than the native API directly.

Sources

MDN — IndexedDB API

What is the Cache Storage API?

The Cache Storage API is a browser-native key-value store for Request/Response object pairs, accessible from both a service worker and the page via the global caches object. It is the primary mechanism PWAs use to store network responses — HTML, CSS, JS, images, API JSON — so they can be served offline or instantly on repeat visits.

What are the storage limits for a PWA?

A PWA typically gets 60% of the device disk space on Chrome and Edge (up to hundreds of GB), 20% of total quota on Firefox, and around 1 GB on Safari. Cache Storage, IndexedDB and OPFS share the same quota. Browsers evict least-recently-used origins under pressure unless the site requests persistent storage.

Can a PWA lock screen orientation?

Yes. The Screen Orientation API’s screen.orientation.lock("landscape") method (or "portrait") can force a specific orientation, but on most browsers it only works while the page is in fullscreen mode via the Fullscreen API. An installed PWA can also declare a preferred orientation directly in its manifest with the "orientation" field, which locks orientation for the whole standalone app.

How does a PWA enter fullscreen mode?

A PWA can enter fullscreen two ways: programmatically, by calling element.requestFullscreen() in response to a user gesture (common for games and video players), or declaratively, by setting the manifest’s "display" field to "fullscreen" so the installed app always launches without any system UI at all, including the status bar.

Can a PWA vibrate the device?

Yes, on Android. Calling navigator.vibrate(200) (milliseconds, or an array of on/off durations) triggers haptic vibration on Android Chrome and other Chromium Android browsers, commonly used for game feedback or notification cues. iOS Safari does not implement the Vibration API at all, so it has no effect on iPhone or iPad.