iOS standalone web app cant load new content after upgrade to iOS7

Question

I have a JavaScript application that I run in standalone mode (added to home screen) on an iPad.

I have upgraded from iOS 6 to iOS 7 and now my app is always loading the same content, it keeps caching. Even if I load my JS and CSS files dynamically on every app load with unique timestamp as parameter. I needed that to be sure that JS and CSS files are not cached and it worked in iOS 6.

I tried the following:

1. removing app from home screen

2. deleting cookies and website data

3. restarting iPad

4. I had manifest="manifest.appcache" removed that (then tried again 1 to 3)

5. I have added following meta tags

   <meta http-equiv="cache-control" content="no-cache"> and
   <meta http-equiv="pragma" content="no-cache">

6. Since I develop this locally and that page is served from my desktop PC I have tried to change the IP of my PC and then tried 1 to 3 but it did not solve my problem.

So all of my changes are not appearing no matter if they are in the HTML file or JS.

There is obviously some changes in how iOS handles standalone apps. What am I missing?

Gropius

i had similar problems... looks like apple does not like those standalone webapps.. fullscreen on iphone 5 needs special css hack , some videos that play on ios5 & 6 don't play on 7, audio streams don't work anymore... and there is alot of flickering on images.and there is much more problems like that.nothing to do with your question but i think they just don't want to support free webapps.fortunately i can't upgrade my ipad 1.but i test sometimes my webapps on other ios6+ devices and they just don't work as they should. – Manille

You are right! It is not a new thing to see that apple is doing what they can to demotivate developers for making web apps. My only question is why did they in first place made support for standalone? In anyway I found lots of examples even tests from developers that are showing how badly standalone/web apps are working in iOS7 and that they worked ok in iOS6... – Gropius

Answer 1

1. It seems that making a change to your manifest file (like adding a version number ), should make the app reload content: Mobile Web App not clearing cache properly

2. You should add a version number to your CSS and JS urls to solve caching issues. e.g. file.css?v=2

Cheers, Z.

Albi

Thanks for answer, but I have already done this. Tried to add version to manifest file by adding # comment that I change. Also I am dynamicaly creating both css and js files on every page load and adding timestamp as parameter at the end of their sources like this file.css?timestamp=1380270300000 – Gropius

Answer 2

Just remove the manifest reference in your HTML. i.e., Don't use a manifest file.

And while you're at it, is your manifest file served with the correct mimetype?

Venomous

Done both of that one of the first things... and it did not helped :( – Gropius

Also not using a manifest at all and it still saves the javascript. – Mallory

Answer 3

i found this php script to output a correct manifest.cache file to the browser

i made some time ago maybe it helps.

it automatically checks if some files are modified and forces the browser to reload the new manifest.cache.

manifest.php

<?php
header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: Wed, 11 Jan 1984 05:00:00 GMT");
header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";
$hashes="";
$dir = new RecursiveDirectoryIterator(".");
foreach(new RecursiveIteratorIterator($dir) as $file){
 if ($file->IsFile()&&$file!="./manifest.php"&&substr($file->getFilename(),0,1)!="."){
  echo $file."\n";$hashes.=md5_file($file);
 }
}
echo "NETWORK:\n";
echo "*\n";
echo "FALLBACK:\n";
echo "online.html fallback.html\n";

echo "# Hash: " . md5($hashes) . "\n";
?>

atm i can't test on ios 7

Manille

Interesting approach, yet I am not working on that project anymore also am not in the same company so I can not test it :( – Gropius

Answer 4

How about manually refreshing the cache and then reloading the page:

<script>
if(window.applicationCache) {
  applicationCache.onnoupdate = function() { alert("debug: manifest not changed!") };
  applicationCache.onupdateready = function() { location.reload() };
  applicationCache.update();
}
</script>

Venomous

Answer 5

Try manually clearing the cache. You can do this through the settings.

Gutsy

Answer 6

Try deleting your app from the home screen, then go to the app url in safari but at the end of your url in safari add something like ?v=2. Then click go, and add to home screen. This will ensure that you are getting a non-cached version of your css and javascript from the server.

You can also add a random number to the end of your javascript and css calls in your html. This will ensure that all future requests from the app on the home screen get uncached versions of the css and javascript.

Mydriasis

Answer 7

I found this tutorial. Turns out ios7 stores website data in a different place than just in the cookies and data section.

http://www.imore.com/how-clear-stored-website-data-ios-7-safari

1. Launch the Settings app from the Home screen of your iPhone or iPad.
2. Scroll down and tap on Safari.
3. Now scroll all the way to the bottom and tap on Advanced.
4. Tap on Website Data. Notice here you can see how much space on your iPhone or iPad website data is taking up.
5. Scroll to the bottom again and tap on Remove All Website Data.
6. Confirm one more time you'd like to delete all data.

Tricksy