15

We are building a progressive web app for iOS devices and we know about the 50 MiB cache limitation imposed by the Safari web browser. How can we handle this limitation when we know that our app's service worker might have to cache data more than 50 MiB if we include all the static resources, videos and pictures etc. Our first preference is to keep the app running offline even after the cache is full and if that is not possible than at least prevent the app from breaking if the user is working offline.

It would be good if you give a generic answer which we can implement in other PWAs also.

user444002
  • 151
  • 1
  • 4
  • 5
    You shouldn't do so. The limit exists for a reason: to save the usage of cellular data. 50MB is a lot for a web app; try optimizing your website files by compressing JS & CSS, and use web-optimized version of images & videos. – Raptor Apr 30 '18 at 06:48
  • 7
    Yup, you are right but what if it is a functional requirements to save data offline. Let's say if I am building a PWA version the YouTube app which lets user save videos offline for watching later. – user444002 Apr 30 '18 at 12:05
  • Did you ever figure out a solution to this? I need much more than 50MB for our offline app which also caches videos/pictures, works perfect on Android tablet but we need the same for Ipad... any way to solve this? – webkit May 21 '19 at 10:44
  • 1
    I think this is one of the ways Apple/Google are keeping you from doing whatever you want with PWAs. Probably you should consider native app wrapping your web app and giving you access to some real storage on the device. – Martin Chaov Aug 21 '19 at 12:29
  • 2
    I am working on several PWAs using media (video, audio, photos) and we need to cache more than 50MB in several cases. So using IDB instead is the right play. You need to think about the media files as data rather than pages. Categorize it the same way you would JSON form the API. Also don't forget to apply TTL/invalidation rules to everything you cache. That way you are in control of ache invalidation, not the operating system. – Chris Love Oct 28 '19 at 19:21
  • @Raptor I would argue that its far easier to start with a minimalist approach to designing a website than trying to "fix everything up" after the fact. On many websites, I would say that >90% of the JS/CSS downloaded is never-used bloat. On this webpage, there are 160kib of wasted bandwidth and 464kib of needlessly executed JS thanks for advertisements and JQuery. And, I'm seeing 71% saving from compressing the images, which amounts to 98kib of wasted image bandwidth on this webpage. – Jack G Apr 11 '22 at 21:01

2 Answers2

7

These days you can store much more than 50 MB on Safari mobile using IndexedDB: https://love2dev.com/blog/what-is-the-service-worker-cache-storage-limit/

If the size of free disk space is over 1 GB, the default limit is 500 MB; otherwise it is half the free disk space.

See for yourself using this tool: https://demo.agektmr.com/storage/

Chris
  • 1,978
  • 3
  • 23
  • 35
3

As of at least iOS 13 both IndexedDB and cacheStorage should have a unified quota of 1GB. See the following WebKit change: https://bugs.webkit.org/show_bug.cgi?id=198133#c15

fen1ksss
  • 1,100
  • 5
  • 21
  • 44