How to clear the cache of a website added to the home screen?

Safari & Web General WebKit

Created Jan ’16

Replies 23

Boosts 0

Views 37k

Participants 19

I am developing a simple web application. Users of the application can add the application to the home screen of their iOS device to be presented with a nice app icon and an almost app-like user experience. This approach has one problem though:

While developing I deploy a new version of the application rather often. I then open Safari on the iOS device, hit refresh, and all HTML-, JavaScript- and CSS-files are refreshed. So far everything works as designed.

But if I open the website using the shortcut added to the homescreen, old stylesheets are being loaded and no matter what I do, the website cannot be persuaded to discard its cached files and reload them.

Here is what I tried so far:

I removed and recreated the shortcut.
I cleared the history and browser data from Safari
I cleared the history and all website data using the Settings app.
I rebooted my device.
I even added headers instructing the browser to not cache any files at all.
I tried a whole bunch of combinations of the steps mentioned above.

The home screen web app did reload an HTML-file that had a single word changed, though - so something must be working correctly. Appending some suffix or parameter to the CSS file links is no option here. I am using Aurelia in combination with jspm - all stylesheets and script files are included automatically acoording to their names.

And to just repeat it: When opening the page using Safari (or any other brother on the iOS device) everything works as expected.

Could anybody point me in the right direction on how to fix this problem?

Boost

KMT OP

Nov ’17

Why all this trouble? Can't you just set the page(s) server side to expire last visits and force new pulls after x min/hours/days?

paperscenery OP

Sep ’20

Encountering the exact same issue in 2020. Following a clue from an earlier poster, I checked out Setting > Safari > Advanced. From there, go to Website Data and delete all data associated with the site you're developing. This allowed the icon to refresh.

rss81 OP

Feb ’21

Apple products and support is really bad. How is this company so successful?

lours OP

Feb ’21

Up !

xophe OP

Jan ’23

I found a workaround for this infuriating bug:

in safari, go to the Develop menu to open the consolewrite a piece of javascript to load the resource that is stubbornly cached:

request = new XMLHttpRequest() request.open("GET", "url you want to reload") request.send()

This forces a refresh of the cache with the new file. If you look at the file in the Sources tab, you'll see its content being refreshed while executing this.

xophe OP

Jan ’23

I found a workaround for this infuriating bug:

in safari, go to the Develop menu to open the console
write a piece of javascript to load the resource that is stubbornly cached:

request = new XMLHttpRequest() request.open("GET", "url you want to reload") request.send()

This forces a refresh of the cache with the new file. If you look at the file in the Sources tab, you'll see its content being refreshed while executing this.

EKJ315 OP

Jun ’24

The above solution from @xophe no longer works as of Safari 17.5. Apple took care of that! I tried it and it is still using the old version of my CSS from its permanent, un-clearable memory cache.

I am going to have my website block Safari users with a message suggesting they switch to a working browser. It's better than them looking at my site and thinking I don't know how to code at all because it's completely broken and I can't debug my CSS, which already works perfectly fine in every other browser, to work in Safari since it will never let me see my changes.

EKJ315 OP

Jun ’24

Update: apparently it has been documented in some web projects that there is a long-standing bug in Safari where it will not allow you to ever clear the cache. https://github.com/ElMassimo/vite_ruby/issues/258

All we can do is block Safari users until Apple chooses not to publish broken software.