- [Instructor] For years, we have been working with several storage APIs in the client. Now it's time to say hello to a new one, it's the Cache Storage API. This API comes with the service workers API. And it's a new storage available client-side, so in the browser. It's different from IndexedDB or Web Storage. Well, IndexedDB stores objects, and Web Storage stores strings.
In this case, the Cache Storage API has HTTP requests as keys and HTTP responses as values. It's like a dictionary of requests and responses. So it's like a browser cache, but managed by our service worker. It's not the same cache as the one that is managed by the browser. The one that is used by the browser when you reload the page to not download everything again, but this is completely different.
It's similar because we are storing HTTP responses but it's completely a new API. Regarding limits, it depends on the browser, so, we will not need permission from the user to use the space. On Chrome or basically Chromium-based browsers, we can store up to 6% of the available size in user's hard drive or memory if it's a mobile phone. This maximum is per origin, not per service worker.
So that means if you have more than one service worker in the same domain, but in different folders, they will share the space. Safari is the most restrictive browser. It's allowing us only to store 50 megabytes per origin. Firefox, it's 10% of the available size, and Edge is the one with the more complex formula to decide the maximum. On Edge, it's up to the volume size because Edge works on mobile devices with Windows 10, mobile duh-dish-shun, tablets, and also desktop computers.
So in that case, if it's a mobile phone typically the volume size is less than eight gigabytes. It will have only 50 megabytes per origin. Up to 32 gigabytes, that typically is tablet, it 500 megabytes, up to 128 gigabytes, it's 4% of the volume size, that can be, for example, a netbook. And finally a desktop, so if you have a hard drive with more than 128 gigabytes, it will be 20 gigabytes or 4%.
So you can see it's a lot of space that every website can use without user's intervention. On some browsers there is an API available to ask about the current information about quota and usage. It's navigator.storage.estimate that we return a promise with information about the current usage of our origin. Regarding the life span of the data, most browsers will keep the data, let's say forever.
So, browsers will not delete that data that we are storing with cache storage. The only exception is under storage pressure. So if the user doesn't have more space in her device then that will pressure the browser to start deleting files from storage. Safari, on iOS and macOS, is the only browser that has a policy on removing data after a couple of weeks of inactivity, which means that if the user is not coming back to our website, after a few weeks Safari can delete the service worker, and all the files that service workers in that origin have downloaded.
On some browsers, such as Chrome, you can ask for Persistent Storage. In this case you're asking the browser, hey browser, please don't delete the data that I have sha-ft fayb-duh. And the browser will grant you permission for persistent storage on some situations such as, high activity with that website, or having push messages enabled, or if the user has installed that website as a PWA.
For using that API you-shaz call navigator storage persist, and it will return a promise with a Boolean value, saying if it was granted, or not. Just remember that with cache storage, the owner is the origin, not the service worker. So several service worker will share the cache. Be careful because if you unregister a service worker, you're not deleting the cache data. Other responses that we are storing there are grouped in something known as a cache. That's like a folder where we're going to store responses.
- Service worker life cycle
- Registering service workers
- Handling service worker events
- Updating service workers
- Acting as a network proxy
- Configuring cache storage
- Communicating with clients
- Optimizing web performance