cache-api
Creating Fast, Reliable Apps with Cache API
mm
Leo Farias
Posted on: November 15, 2018
Mobile
Tags: cache api progressive web apps PWAs
Tags: cache api progressive web apps PWAs

Progressive Web Apps (PWAs) are leading the charge in providing mobile access at a relatively low price point.

They have a lot of advantages over hybrid apps and bypass the “download barrier” of native apps altogether.

PWAs operate within browsers, which imposes some limitations. One of these is the browser’s built-in cache.

Mobile apps rely on caching to stay operational in variable signal strength areas, and the browser’s native cache is too unreliable to provide the best possible service.

There is a tool smart developers use to give PWAs – and other applications- a performance edge: Cache API.

The Power of PWAs

PWAs are hosted by a website and accessed through a device’s browser. The most obvious benefit is that there’s no download required.

Users simply navigate to the app, grant permission for limited device access, and are granted full access to the app’s features.

That isn’t the only reason for their popularity. As a mobile option, PWAs offer better user experience than responsive mobile sites without the higher cost of standalone apps.

They’re fast, secure, always updated, and have the native look and feel that appeals to users. They can access a growing array of device features.

PWAs also work anywhere. After the first load, users don’t even need to be online.

The app can store information for automatic update when the connection is restored – which is why reliable caching is so important.

Introducing Cache API

Cache API is a system that securely stores requests and responses via JavaScript that can be accessed anytime. It can use service workers to cache network requests so the app is usable offline.

The API also serves as general storage, able to store almost any kind of response without worrying they’ll expire.

Caching things like this decreases traffic and network activity. It boosts the application’s performance, which is a major benefit when user experience weighs so heavily in repeat purchase decisions.

Cache API Vs Browser Cache

It might seem like using Cache API when there’s already a built-in browser cache is a waste of time, but there are good reasons to use Cache API in addition.

First and foremost is control. Developers who choose Cache API can implement custom cache control logic.

They can set priorities for what remains in the cache and what can be purged to make space. The browser cache only purges based on storage requirements.

This feeds into another benefit: reliability. Cache API adds a layer of dependable control that’s missing from even the better modern browsers.

Chrome and Firefox have been working to improve their browser caching, but it still needs improvement. A Facebook study found that only 25% of what they expected to find in the cache were actually there.

As a technical advantage, when users refresh a PWA their browser skips the HTTP cache. Service workers set up with Cache API always intercept requests.

It’s also useful that Cache API can cache multiple requests when the PWA is first run. Even those that haven’t been accessed yet can be stored.

Having these ready speeds up later requests even as the user moves through low signal areas.

Looking At Limitations

Cache API has a few notable limitations. Some browsers require use of https to access the API. Size can be a problem, too, since each browser has its own storage limits that need to be addressed.

Developers can manage this using cache quota usage estimates found through the StorageEstimate API.

Compatibility is another issue. Browser support for PWAs is growing but not consistent, and not all browsers support this feature. That does seem to be changing.

Cache API can be used in Chrome, Opera and Firefox now, and Edge and Safari have reportedly marked it as “In Development”.

Final Thoughts

With a simple API and a little javascript, applications can be given an amazingly functional caching layer that improves their performance while decreasing bandwidth usage.

It benefits users and servers alike. Given these benefits, Cache API should be on the technology short list when it comes to building PWAs.

Having a user-centric mobile presence is a critical part of modern digital strategy, and it doesn’t have to break the bank. To learn more about mobile technology that meets your company’s needs (including your budget), set up a free consultation with one of our experienced developers.

Request a Consultation

Leo Farias is the CTO and Co-founder at Concepta. He received his MPS in Business of Art & Design from the Maryland Institute College of Art. With over 18 years of technology-focused experience, he plays a vital role in architecting and leading various mission-critical projects for world-renowned clients like Time Warner Music, Orlando City Soccer, Vasco de Gama and Corinthians Soccer Club.