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?

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.

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?

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

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>

Answer 5

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

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.

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.