How much storage space is my Progressive Web App using?
If you had told me when I first start developing many years ago, that I’d be able to build websites that work on a mobile device and even respond when offline - I’d be blown away! One of my favourite features of Progressive Web Apps is the ability to build resilient websites that respond under little or no internet connection. As soon as a user has visited your site, you can then cache the critical resources required, and then serve this information to them regardless of their network connection.
However, with this power comes great responsibility. With a few lines of code, you can start caching resources on your users device and depending on how your code is written, the amount of data you store can quickly start to add up.
Getting started
This is where Storage Estimate comes in. It allows you to determine how much data your web app is allowed to store and how much of that data you have already used up.
By adding the following code to your website, you can tap into this functionality:
In order to get a better understanding of the code above, let’s break it down into smaller chunks.
Firstly, we need to do a quick check to see if the current browser supports both cache storage and the Storage Estimate feature. We need to do this first because the storage estimate feature is still relatively new and not available in all browsers at the time of writing this article.
If the browser does support these features, we then call the navigator.storage.estimate() function, which expects a Promise to return an object with the information that we need. This object contains a quota for your web app on this device, as well as the overall usage amount. Both of these amounts are in bytes.
How can I use this data?
If your users are concerned or interested in the amount of data that is being stored on their device, you could always expose this information to them via the UI. In fact, I’ve done just that on a side project of mine called Progressive Beer. When browsing the site, you can head over to the Settings page, which gives the user a detailed view of the data stored on their device.
Whilst this page is quite basic, it could be expanded to allow users to clear their cache from within the web app by simply clicking a button. Imagine the following code takes place when a user clicks a “Clear Cache” button.
The code above doesn’t need to be run inside a service worker file, you can run this as a standard JavaScript file. First off, this code is checking to see if the current browser supports service workers, so that we can determine if cache storage is supported. Next, we get a list of all the current cache names and then loop through and delete each of them. This code deletes all caches, but with a bit of filtering, you could delete certain caches depending on your use case.
Depending on the type of your Progressive Web App, you might not want to expose (or remove) this information to your users, but it is helpful to know that it is easily accessible.
How accurate is Storage Estimation?
As the name itself implies, it is only an “estimation” of the amount of data that is available and used. While these numbers aren’t meant to be a precise measurement, they can help you with determining approximately how much space your Progressive Web App is really using.
According to the Google Developers website, it gives the following as a guideline about the usage estimate:
“Usage reflects how many bytes a given origin is effectively using for same-origin data, which in turn can be impacted by internal compression techniques, fixed-size allocation blocks. To prevent the leakage of exact size information, cross-origin, opaque resources saved locally may contribute additional padding bytes to the overall usage value.”
It says the following about the quota estimate:
“Quota reflects the amount of space currently reserved for an origin. The value depends on some constant factors like the overall storage size, but also a number of potentially volatile factors, including the amount of storage space that's currently unused. So as other applications on a device write or delete data, the amount of space that the browser is willing to devote to your web app's origin will likely change.”
Summary
Building for the offline web is a new challenge that many web developers are yet to face. It’s important that we build offline websites that keep our users informed and make the offline experience an enjoyable one!
If you’d like to explore the code that is used on the Progressive Beer App, please head over to the Github repo for more information. I also recommend reading the following article on the Google Developers website for further tips and tricks.