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 st

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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!

Answer 5

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.

Answer 6

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