PWA app - Store images and videos in local storage using Angular 6

Question

I am creating a Progressive web app(PWA) using angular javascript. where I need to store images and videos downloaded from the server.

I have explored on local storage and IndexedDb, both have limitation in storage size. The official document says, Safari browser allocates max of 50 MB and Chrome mobile allocates 6% of free disk space for local storage.

Is there any option to store the images and videos of large size locally and display the same in PWA app when the device is in offline?

Answer 1

You can't bypass the storage constraints set by the browsers(different for each browser as you have observed). Most of the browsers will let you store more(with users permissions where applicable) but that has to be noted is, these data can also be deleted by the browser without your application having any control over preventing it.

Its a snadboxed storage your browser allocated to your app and it can always take back on different scenarios.. like when the disk space goes low, user clears cache etc.,

You can rely on it as long as you have a fallback when the file is cleared. If you are thinking of storing GBs of data, this option is not for you. But if it goes couple of hundred MBs, you should be okay with most browsers, provided user accepts to allocate the space.