Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mobile Web App not clearing cache properly

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?

like image 715
Mulberry Avatar asked Dec 01 '11 07:12

Mulberry


People also ask

Why is the cache not clearing?

Here are some ways you can try to fix your caching problem, in order of escalation: Try holding down the Shift key while pressing the Refresh button. Close your browser and re-open it (make sure you are NOT on the cached page) and delete your temporary Internet files (clear your cache).

Why does the cache come back after I clear it?

However, since you erased the data used for optimal performance, some elements (like those mentioned above) will load more slowly the next time you use the app. You might notice that when you clear cache, it comes back eventually. This is normal; over time, apps will build up cache again based on your usage.


2 Answers

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

like image 102
Ludovic Avatar answered Oct 05 '22 15:10

Ludovic


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.

like image 43
bench-o Avatar answered Oct 05 '22 14:10

bench-o