How can I clear the cache of an IOS Web App on the Homescreen?

Question

I am using JQTouch to create a Web App on the Homescreen using meta tag "apple-mobile-web-app-capable", but no matter how many times I clear the cache from within Settings, the Web App's Javascript is still an older cached version.

Strangely enough, if I set the meta tag's content to;

<meta name="apple-mobile-web-app-capable" content="no" />

...then add the Web App to the Homescreen, I get the latest version when I launch it.

Yet if I set the meta tag to;

<meta name="apple-mobile-web-app-capable" content="yes" />

...then add the Web App to the Homescreen, I get the older cached version.

PS. I can confirm that is only the javascript which will not refresh.

Villalba

Answer 1

You could try adding a unique string to the end of your js include's src attribute (use a timestamp, for example). Bear in mind you'll have to change this unique string for each refresh you want to do, so you may want to consider doing lazy-loading (which may in itself solve your problem): <script type="text/javascript" src="myScript.js?012345"></script>

This usually forces the browser into grabbing the latest version of the script. Might work...

Akee

Same technique works for CSS files. <link rel="stylesheet" href="css/style.css?3432"> – Cannonade

And images : <img src="foo.png?12345" /> – Rosarosabel

unbelievable, I've been breaking my head on this for a whole day (css problem for me). A similar problem exists with Silverlight, unbelievable that 2 mayor companies make these kind of BUGS! Thanks! – Sudhir

Hi, My problem doesn't regard the controlled resources, I have a cookie which makes an infinite loop which cause an error "too many redirections" on my app. I tried every possible way to delete the cache without success. any ideas how to clear the cookie? – Gasiform

Good solution, but my web application loads old version on index.html :)) – Wavelength

Yeah, the only way that seems to work in iOS 10 is to change the URL for the HTML file in a similar way and add versioning for all other files referenced by the HTML. This might also be solved by adding a cache manifest, but only if you remember to add the cache manifest initially. Otherwise, the old HTML that lacks a cache manifest will get cached permanently, and you're back to adding ?version=1 to the HTML URL. :-) – Glittery

Answer 2

This is a way that worked for me to clear completely the cache:

1-Delete the tabs in safari where there is your app.
2-Delete the icon of the app in the home screen.
3-Kill safari from the memory.
4-Go to settings/safari and press clear cache.
5-You can restart your iPhone/iPod if you want to be sure that it works

Rosarosabel

This is the exact same procedure I used to use but since iOS 6 it doesn't seem to be working, the homescreen app still picks up cached data. – Animalist

Please be aware if you do that you will lose opened Safari tabs. If you have something interesting for later reading there it will be gone. – Frannie

Answer 3

I found that using bundling feature in ASP.NET MVC solved this problem for me.

It automatically generates a bundled link of the form:

http://www.domain.com/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81

The token after the v= changes if any file in the bundle changes, guaranteeing that browser requests for the bundle will get the latest bundle.

Understand

Only issue with that is that Visual Studio's browser link feature doesn't work with bundling. – Beneath

@Beneath VS BrowserLink does in fact work with bundling. Are you using Mads Kristensen's extension here - visualstudiogallery.msdn.microsoft.com/… ? – Micrometer

@Micrometer No, I am not, however I now know that BrowserLink only loses track of files if you have BundleTable.EnableOptimizations set to true in Debug mode. – Beneath

Answer 4

If you are jailbroken, just do this in the terminal

rm ./Library/Caches/com.apple.webapp/Cache.db

Economics

There's no such file on my iOS 5.1.1 device, and still my main.js is taken from cache (regular safari gets a file from server ok though) – Bartolommeo

Answer 5

This drove me absolutely nuts. I tried killing Safari, clearing the cache, switching to private mode, and removing the web app from the home screen. None of those work, but what does work is temporarily loading the web app page in Safari itself and reloading.

If you're using add to home screen, you can add ?web_app_ready=1 to the install URL. Since that's not an end user procedure, adding a query string to every script (the answer above) will probably be more effective for non-developer environments.

Fieldwork

I've tried that. It used to work in iOS 6 or so, but it doesn't seem to work in iOS 10. – Glittery

Yeah I don't know if this is valid in the latest version. – Fieldwork

And in iOS 10, it caches the HTML, too, so specifying a ?foo=... to the resource doesn't work because it never sees the updated version of the HTML with the new URL. Basically, caching of home-screen web apps is hopelessly broken at this point unless you have a cache manifest (and maybe even then—I haven't tried yet). – Glittery

Answer 6

Building off of what SquareFeet said, one could automatically pull the new file down every time with a unique GET tag appended to the filename, using PHP. For example:

<link rel="stylesheet" type="text/css" href="/css/global.css?
   <?php echo(mt_rand(10000000, 99999999)); ?>
" />

Theoretically, the same task could be accomplished using JavaScript, albeit with some modifications to the web server:

<link rel="stylesheet" type="text/css" href="/css/global.css?
   <div id="id"></div>
" />

<script language="Javascript" type="text/javascript">
   document.getElementById("id").innerHTML = Math.floor((Math.random() * 10000) + 1);
</script>

Cranio