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

Question

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

Answer 1

aswkpk OP

Oct ’16

looks like a bug for me. I am also experiencing this problem.

Andreas

0

Answer 2

Jesse1 OP

Oct ’16

I recently asked this same question here:

https://forums.developer.apple.com/thread/62464

And even referenced this thread. I haven't gotten any replies there, but for what it's worth I can offer further confirmation that this does seem to be an issue.

I filed a bug report just in case, but meanwhile I'm still looking for a solution. So, if anyone has any ideas or suggestions, please don't hesitate to share.

0

Answer 3

jainaer OP

Dec ’16

Team

Has there been any workaorund on this issue since iOS 10.1.1 still shows issue?

Thanks

Pankaj

0

Answer 4

fatherviking OP

Dec ’16

I am have two units that are experiencing a similar problem; We have a website designed to have a sub-page saved to the home screen. On these two units it seems like an old version of code has been cached (or something), resulting in a bug being unable to be fixed.

Any workaround or solution would be very appreciated. Alternatively, any suggestions on how to troubleshoot, in order to help you possibly find the source of the problem.

Thanks,

Oscar

0

Answer 5

mdornfeld OP

Dec ’16

I am having this problem as well. When I set <meta name="apple-mobile-web-app-capable" content="no"> a non-cached version loads in Safari and can be installed.

However, with content="yes" a non-cached version loads in Safari, but the original cached version is re-installed from Share > Add to Home Screen.

I have tried disabling the cache from Safari > Develop > Disable Caches, emtying the caches from Safari > Develop > Empty Caches, and hard reloading from the inspector with cmd+shift+r.

Also, clearing from iOS with Settings > Safari > Clear History and Website Data, as well as Settings > Safari > Advanced > Website Data > Edit > Remove.

0

Answer 6

mdornfeld OP

Dec ’16

It would be nice if the Develop > Empty Caches command would flush the entire cache on Safari iOS when mobile device is connected with cable.

0

Answer 7

Fischi OP

Dec ’16

Same here - absolutely anaoying - I tried some ways descripted above and nothings helps ... Not only the MacOS Sierra Safari is driving me nuts with its poor cache behavior since the init version of Sierra. Also this issue here on iOS is horrible as a Home Screen web app totally ignore any changes of ressources of an web app,

0

Answer 8

robdownunder OP

Jan ’17

If you have a Mac, try this...

iOS: open settings -> safari -> advanced enable web inspector.

Mac open safari -> Preferences -> Advanced enable “Show Develop menu in menu bar"

connect iOS to Mac with cable.

Open offending web app on iOS device

Open Mac-Safari

Under “Develop” find the name of your iOS device, move to it. Should see the webpage name appear. click it.

This will open a safari Web Inspector. press the refresh button (arrow going in clockwise direction). Phone should refresh with new content.

1

Answer 9

HansNyb OP

Jan ’17

I just discovered this today and after searching the web I discovered that most of the reports about it are as old as 2012.

Many of the suggestions are the same as reported here.

https://discussions.apple.com/thread/3802691?tstart=0

I tried everything suggested without any success.

The weird is that only my iPhone 6 has the problem.

My iPad air does update. I Use IOS 10.2 on both.

Has anyone created a bug report on this. It just weird that this bug has existed since 2012 without anyone doing something about it.

0

Answer 10

Jesse1 OP

Jan ’17

"Has anyone created a bug report on this."

I filed a bug report a while ago. I haven't tried it on 10.2 yet though, so I'm not sure what the current state of things is (aside from what's being reported here).

0

Answer 11

mdornfeld OP

Feb ’17

Just upgraded to 10.2 and am still having this problem.

The app will occasionally refresh (I think based on a timer), but behaviour is incredibly inconsistent and making it impossible to develop a web app on mobile devices.

Am having this problem on iPad 2 and iPhone 5 running iOS 9 and 10, respectively.

0

Answer 12

RIMMSTV OP

Apr ’17

Hi all

We have been building using a similar method to you guys and came across the same issue in iOS 10; just really unpredictable caching behaviour.

Eventually, our work around has been to strip back our manifest file and build it up item item.

The smaller the manifest file, the more predictable and reliable the caching behaviour.

So, suggest that if you can strip any fat out of your manifest and build it item by item, giving this a go.

Sorry it's not a 'proper' solution though!

0

Answer 13

cmdln OP

Sep ’17

I dont know how to fix the home screen problem, but 2 ways to force the page to reload once this happens are

1. Double click on refresh.

2. Load the page from a shortcut within Safari.

0

Answer 14

Wittner OP

Oct ’17

To avoid hair pulling you can put a false parameter name after the call to the css or js file you are trying to update/refresh. This works on Chrome too which also holds on to cache aggresively. Just put something like the following on the end of your script inclusion:

or for js file

This forces Safari/Chrome into treating the file as ‘dynamic’ and it will update it each time. You can remove the ?id=12345 for production

Notes:

‘id’ can be anything

‘12345’ can be anything

You don’t have to change the figure each time you make a change, but if your browser suddenly stops updating again you can just change the number by one digit for instance,

hope that helps,

cheers,

Wittner

0

Answer 15

nearbytv OP

Nov ’17

Changing the stylesheet filename has worked for me in the past.

But even quicker on my IPhone 6, I was able to refresh to updated CSS data for a webpage-in-progress by holding down refresh (right side of address bar) until "Request Desktop Site" popped up. I clicked on it and the webpage completely updated, styles and all.

Subsequent loads from a blank browser page and simple refreshes are still using the updated CSS data.

Phil

nearbytv

0