28

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.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
dizietsm4
  • 401
  • 1
  • 4
  • 5

6 Answers6

20

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...

SquareFeet
  • 651
  • 4
  • 16
  • 1
    Same technique works for CSS files. – bearroast Feb 29 '12 at 09:12
  • And images : `` – Alexandre Khoury Jun 29 '12 at 09:57
  • 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! – stvn Oct 10 '12 at 08:38
  • 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? – Shahar Oct 04 '15 at 12:52
  • Good solution, but my web application loads old version on index.html :)) – Selirion Jan 17 '17 at 05:44
  • 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. :-) – dgatwood Feb 07 '17 at 21:34
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

Alexandre Khoury
  • 3,896
  • 5
  • 37
  • 58
  • 2
    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. – Oliver Pearmain Oct 09 '12 at 11:05
  • 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. – michal-michalak Nov 25 '19 at 13:31
1

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.

muzzamo
  • 1,721
  • 2
  • 14
  • 18
  • Only issue with that is that Visual Studio's browser link feature doesn't work with bundling. – rookie1024 Jul 01 '16 at 01:16
  • @rookie1024 VS BrowserLink does in fact work with bundling. Are you using Mads Kristensen's extension here - https://visualstudiogallery.msdn.microsoft.com/9ec27da7-e24b-4d56-8064-fd7e88ac1c40 ? – HumbleBeginnings Dec 05 '16 at 18:23
  • @HumbleBeginnings 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. – rookie1024 Dec 06 '16 at 23:05
0

If you are jailbroken, just do this in the terminal

rm ./Library/Caches/com.apple.webapp/Cache.db
andrewsi
  • 10,807
  • 132
  • 35
  • 51
  • 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) – Alexander Jun 01 '13 at 09:53
0

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.

Chris
  • 5,876
  • 3
  • 43
  • 69
  • I've tried that. It used to work in iOS 6 or so, but it doesn't seem to work in iOS 10. – dgatwood Feb 06 '17 at 03:48
  • Yeah I don't know if this is valid in the latest version. – Chris Feb 07 '17 at 18:06
  • 1
    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). – dgatwood Feb 07 '17 at 21:32
0

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>
SnazzyJava
  • 87
  • 12