3

I have one html file and one js file. The html file is refreshed, but the js file never gets reloaded. I have tried clearing the history and the cache as well as turning the iPad off. I have also deleted all nine pages in the iPad.

Finally I found a workaround. Renaming the js file solved the problem. But it is an awkward solution.

Is there a better way?

(I'm using the oldest iPad. Can't find out any version numbers.)

Kri-ban
  • 514
  • 4
  • 17
  • "Can't find out any version numbers." Why's that? – Lightness Races in Orbit Oct 14 '11 at 19:20
  • 2
    some more details there: http://stackoverflow.com/questions/32414/how-can-i-force-clients-to-refresh-javascript-files – Amr Elgarhy Oct 14 '11 at 19:26
  • @Tomalak: Maybe you can tell me where I can find them? e.g. Safari version. – Kri-ban Oct 14 '11 at 22:26
  • When using Chrome on my laptop, the latest version of the js file is loaded from the server at FatCow. Also using Opera on the iPad works. The problem is, using Safari on the iPad does not load the latest js file. I think the problem is within Safari on the iPad. They are trying to save some bandwidth. – Kri-ban Oct 14 '11 at 22:29
  • I'm amazed everybody recommends adding a version number. There ought to be a better solution. I'm not sure about the mechanics involved. Does the browser ask the server about the timestamp of the js file, before deciding to download or not? Eventually the timestamp could be sent from the browser, letting the server decide, to minimize the number of message interchanges. – Kri-ban Oct 14 '11 at 22:33
  • 1
    The browser should issue a conditional get request to check if there is a newer version of the file, however the browser may choose to implement a more agressive caching strategy to make things faster. – Richard Garside Oct 14 '11 at 22:54

3 Answers3

6

To force a reload of a JavaScript file during development I typically add a query string parameter to the end of the file. Like this:

<script type="text/javascript" src="file.js?v=0.1"></script>

When development is complete for that version I include a version number in the file name.

This can be a good idea during testing even if you're not having problems with an iPad or similar. You want to be confident that people are seeing the latest version of the file and explaining how to empty their browser's cache or forcing them to refresh every page will cause problems and false bug reports.

Richard Garside
  • 82,523
  • 9
  • 75
  • 82
  • Yes, I am using this way also – Amr Elgarhy Oct 14 '11 at 19:25
  • This works. I added a version number and I don't even have to increment it. Spooky. – Kri-ban Oct 15 '11 at 11:25
  • Some browsers are more cautious about caching items with query strings, so that might be it. I'd still increment the version number when asking others to test the page, so you can be sure everyone is testing the same version. – Richard Garside Oct 16 '11 at 12:04
  • For some reason, I cant get a querystring like that on a js-file to work in iOS Safari (using absolute path). – cederlof Oct 31 '12 at 10:34
  • Ok. Understood this. But why is this only necessary on iPad AND in home screen use. In all other ways including regular browsers a changed .js file is always actual? When I develop and testing online in all browsers and iPad safari (NOT home screen) I never never had problems with not refreshed scripts. Am I totally going wrong here? – Garavani Sep 01 '14 at 09:13
  • Moreover my finder (MacOsX Maverick) does not allow to put v=0.1 after .js, it automatically changes in scriptname.jsv=0.1.js – Garavani Sep 01 '14 at 09:50
  • @Garavani. The actual file name stays the same. You just change the src link to it. The ? and anything after it is not part of the file name and in this case is ignored by the server. But it does force the browser to ask for the file again. – Richard Garside Sep 02 '14 at 14:49
  • Wow, thanks for opening my eyes! Don’t know how to upvote a comment though. – Garavani Sep 03 '14 at 05:30
0

This is a natural habit of caching. When the file actually changes, the iPad should reload the file. This is the same as a PC browser, or any other device with caching on.

To overcome this, add a variable to the name of the javascript file, something like myfile.js?id=[ADD TIMESTAMP HERE]

On which you ofcourse add a timestamp with the programming language you use, for example in PHP: time()

Rene Pot
  • 23,406
  • 6
  • 64
  • 89
0

I'm not 100% sure I understand your question, however if you are building a website and you don't want user's browsers to cache the javascript file I would recommend adding a build number to the JS file each time you save it and update the html reference to the file +buildnumber.js.

Example:

instead of 

<script src="myAwesomeJavscriptFile.js"></script>

make it:

<script src="myAwesomeJavscriptFile.001.js"></script>

Then the next time you change it make it:

<script src="myAwesomeJavscriptFile.002.js"></script>

The other way to do it is to send down specific no-cache headers for each file using your web server (Apache, Nginx, IIS)

Good luck!

Josef Salyer
  • 93
  • 6