New APIs have emerged to answer the need of a web moving from documents to applications. Pete Lepage presented at web.dev LIVE a short but thorough description of the options developers have to store and cache data on the client. The CacheStorage, StorageManager and other APIs help developers create applications with offline capabilities and performance closer to native mobile applications’.
Lepage presented three important topics addressed in the talk:
Even in perfect wireless environments, caching, and other storage techniques can substantially improve performance, reliability, and, most importantly, the user experience.
[…] How should we be storing data and caching our critical app resources on the client?
How much can we store?
How does the browser deal with eviction?
Let’s dive into storage on the Web.
Lepage first enumerated storage mechanisms that are appropriate in fairly specific and limited scopes and may cause significant performance issues.
SessionStorage is scoped to the lifetime of a browser tab, will block the main thread and is limited to around 5MB-strings. While useful for storing small pieces of session-specific information, the session storage is not visible from outside the tab, e.g. from web or service workers.
LocalStorage and Cookies are also synchronous and blocking, with similar scope and format limitations. Lepage also emphasized that cookies should never be used for storage. Because cookie data is transferred together with an HTTP request, large cookies result in large web requests. Other technologies have been deprecated or are no longer maintained (WebSQL, Application Cache).
To store and cache a significant amount of structured data (user documents, settings, and more), developers can use the Cache Storage API, IndexedDB and the StorageManager API, when the latter is available. IndexedDB and the cache storage API are supported in every modern browser, work asynchronously, and are accessible from the browser’s window by web workers and service workers.
The policy determining the maximum amount of data that can be stored in the browser vary per browser vendor. Some browsers may set a limit as a percentage of available disk space (over 50% for Chrome and Firefox), or a hard limit (around 1GB for Safari) that can be extended through explicit user prompting.
Developers can use the StorageManager API estimate method to determine how much storage is available as follows:
if (navigator.storage && navigator.storage.estimate) {
const quota = await navigator.storage.estimate();
// quota.usage -> Number of bytes used.
// quota.quota -> Maximum number of bytes available.
const percentageUsed = (quota.usage / quota.quota) * 100;
console.log(`You've used ${percentageUsed}% of the available storage.`);
const remaining = quota.quota - quota.usage;
console.log(`You can write up to ${remaining} more bytes.`);}
The StorageManager API is not available on Safari and must be feature-detected prior to being used. Even when available, to ensure the reliability of their application, developers have to explicitly handle the errors (QuotaExceededError) occurring from overcoming the available storage quota. In the case of the Cache API, Lepage provided the following code example:
try {
const cache = await caches.open('my-cache');
await cache.add(new Request('/sample1.jpg'));
} catch (err) {
if (error.name === 'QuotaExceededError') {
// Fallback code goes here
}
}
When reaching quota limits, developers may adopt a few strategies to free up space: delete old content, delete large content, or delegate the decision of what to remove to the user. Lepage however recalled that (unless a site has requested persistent storage) the browser may evict site data at its discretion, for example, when device storage is low. Eviction policies vary per browser vendor. Safari for instance recently implemented a new seven-day cap on all writable storage in the frame of its intelligent tracking prevention program. Other browsers may use an LRU strategy. Users may also clear cache data through the browser settings.
Lepage concluded with encouraging developers to check other related online resources. The original talk is also available online on youtube and packs many technical details and illustrations in a short time frame.
web.dev LIVE is a Google-sponsored three-day online community event addressing the state of web development. The 2020 edition of the event took place at the end of June. All recorded sessions are already available.
