Mobile Web App not clearing cache properly

Question

I've been developing a mobile web app for iPad and I've been running into an issue while testing my code.

Occasionally, and seemingly at random, the iPad will stop properly updating all of the JS libraries I've written. After updating some code and posting the changes, I will notice some files will have properly updated while others have not. This bahavior persists after numerous cache clears, power cycles, and wifi toggles.

If I load the app in safari i have no issues with it, but when I load from the app's homescreen icon the problem re-appears. I've done simple tests like adding an alert line to a library and that alert fires without issue anywhere except within the mobile-web-app window. Then, seemingly at random again, the problem is disappears, sometimes it takes 5 minutes, sometimes it takes an hour.

I see this behavior regardless of whether the app is using a manifest file or not. I have also tried to flush these legacy files by updating the manifest file to force the recache that way, but the problem still persists.

Does anyone know if this is a known issue with iPad? Is there anything on my end that can be done to address this?

Malefaction

Old post, but setting the date to the future then back again can also work (as a quick trick) #17576569 – Bigwig

Answer 1

For me, the solution is adding ?v=1 at the end of all your Javascript and CSS links. I've tried everything before seeing that on another Stackoverflow post and it worked directly !!! It was about time...

Uxorial

SOURCE: #8792755 – Dielle

This does not work for the main html/php file at the base of the app. Infuriating. – Sofer

You have to write them down in your manifest file like : CACHE MANIFEST #Version 3.0.10 CACHE: index.html ... – Uxorial

Answer 2

I got the solution!

But first the problem: iPad and iPhone is not refreshing the cache when opening the app. Even deleting the app, clearing safari cache, restarting device etc. etc. doesnt work.

And here is the solution ... taadaa !

Your manifest-file MUST change. If it is changed, iPad/iPhone will reload the cache. So just write a version number in your manifest file and change it when you changed something:

# Version: 1.2

So a full manifest file could look like this:

CACHE MANIFEST

# Version 1.5

NETWORK:
*

CACHE:
index.html
jquery-1.7.2.min.js
images/logo.jpg

It even reloads things like images that are not written into the manifest file. I tested it a several times.

Btw. dont forget to check your manifest-file with http://manifest-validator.com

My source is this very cool how to about offline web applications: http://gregsramblings.com/2012/05/28/html5-application-cache-how-to/

It also says that you maybe need to start your app twice:

If the manifest was updated, the browser will download all of the files in the cached file list, BUT, the original content will have already loaded at this point (remember that it’s already cached, so it loads super fast!).

But it worked for me always on first attempt.

Lingam

Unfortunately, this does not seem to work if only the CSS file changed. My manifest is generated dynamically and it includes the last-modified timestamp of the latest modified file. If I look in safari on ipad, all changes are visible, however when started from the home screen, the old data is cached somewhere. Deleting the home screen app, clearing safari cache/cookies and saved websites does NOT solve the problem. When I re-add the app to home screen and start it from the icon - it still loads the old cached CSS. – Jenjena

This is not enough for making the webapp upadate the cache on iOS. under Safari it works well but not when the webapp is started from the homescreen – Capuche

@Lingam validator link is broken. Can't find obvious replacement. It's also not longer clear what manifest you're talking about as manifest.json is now a thing whereas I think you're referring to Safari's appcache manifest? – Hammer

Answer 3

Work around for this problem. Add a link to the Web App itself like...

<a href="javascript:top.frames.location.reload();">refresh</a>

It works just like the reload button on the iPhone/iPad Safari address bar!

Camm

Answer 4

I spent several hours trying to fix this problem, and it seems as though the manifest file that is supposed to manage file caching, can itself be cached, leaving your web-app in limbo.

In my case, I didn't want anything cached. Here's how I solved the problem:

• Enable the mod_expires Apache module on my server
• Create a .htaccess file in the same directory as the index file. The file should contain the line ExpiresDefault A1.

This tells the server that every file should expire one second after it was accessed. My web-app is used as a survey at student conventions, so only one person is using it at a time. My solution works for me; you might need to tweak it further so it suits you.

In the past, this problem had presented itself seemingly at random. All of my recent testing has shown it to respond as one would expect.

Ardehs

Answer 5

I can't verify the cache being cleared properly but this worked for me :

In order to do this, you need to allow Web Inspector on your iOS device. Go to Settings > Safari > Advanced > Web Inspector (it has to be active) And you have to activate the developer menu on your computer's Safari. Go to Preferences > Advanced > Activate Developer menu

1. Connect your device to your computer with the USB cable
2. Go to safari > Developpement > Your Device name > Inspect an App (The app has to be running)
3. This will open The inspector on your computer for the web app
4. While the inspector is open Clear the cache (command + alt + E)
5. With the inspector still open refresh the page on your computer (command + R)

Somehow the Webapp cache got cleared and i got the non-cached code.

Euphroe

Would this also work with the last version of Safari for Windows? – Lunular

This is the only solution that worked for me when using an AngularJS full screen web app on iPad. – Hemoglobin

Answer 6

I'm having exactly the same problem with my web applications on iPad - sometimes, at random, the web app run in standalone mode wouldn't refresh a particular resource (HTML/CSS/JS file), despite killing every possible app, clearing Safari cache & history, rebooting, restarting wifi-connection, refreshing or removing the manifest file or putting the device in a microwave; even applying a sledgehammer proved to be futile.

While I haven't found a "kosher" way to fix it, there is always a workaround - rename the resource.

Simply change the name of the not-refreshing file. If you have a problem with, let's say, foobar.js not updating, rename it to foobar2.js and update the references to this resource in other files. This of course could be a pain in you know what (especially when after a week's worth of development you are at foobar12.js), but until we see an official fix to iOS or a working refreshing technique, it's the only way I know of to get it up and running.

Sudatorium

I have the same problem, but renaming the JS file didn't work for me, unfortunately. :-( – Patriciate

@Gunder I think you might keep on renaming it each time you have problem with a certain file .. :/ – Bliss

Renaming your source files is not a good, clean, or professional way to go about it. Why don't you just use ?v=10 at the end of your file ? I.e. somescript.js?v=10. After all, this is what it's meant for... – Mccomb

Answer 7

turning the ipad off and on works for me - at least on ios 5. not completely off, just use the sleep button on the top of the ipad and then the home button to turn it back on. appending a version number at the end of files also works, but that gets quite tedious.

Diazo

Answer 8

I spent many days working on this problem. It looked like a rendering bug because of some coincidental changes I had made in both CSS and HTML, thus putting buttons at random places on the screen rendering the app unusable.

I determined that the CSS was cached, after several days of poking and prodding, and finally tried renaming the files, something @Neo talks about. I also changed cache-control in my .htaccess file, as I had been using an old .htaccess that instructed the browser to cache for a year.

tl;dr: Remove cache-control (mod_expires and mod_headers) for your webapp files, and just use a cache manifest if you're not already. Then rename the files and update the links in your HTML and you should be good.

Vorous

Answer 9

I had the exact same problem.

I tried the different suggestions here, and added cache control with no luck. I tried renaming the file that refused to update, no luck. I tried adding a cache manifest (I had one before, but removed it), no luck. And I tried all the usual things: delete app, clear cache, reboot, reinstall app, no luck.

The only thing that worked for me, was to rename the virtual directory on my web server. This might not be a viable solution for everyone, but luckily for, this was not really a problem, as I'm testing using a local IIS server.

Hokanson

Answer 10

To fix this problem you should add new letters with numbers (not just numbers) to the end of link like that:

?v1
?x2
?z3

And every time you want to update your script, you should add a different letters and numbers (different letters is required because today many mobile browsers are ignoring all pure numbers in the end of Javascript/CSS link.)

Trashy