How do you force an iPad home screen bookmarked web app to refresh?

T

8

38

I've run into a problem where I add a web app to my iPad home screen (iOS 5.0.1 iPad 2), and when I open it it appears to be caching something behind the scenes, independent of Safari.

I've cleared out everything from Safari that's available in Settings (Clear History and Clear Cookies & Data), and when I navigate to the web app with Safari I see the app in its current state. However if I open the home screen bookmark I get the app in a pre-changed state.

I've seen a lot of information about using a cache.manifest to cache resources for offline use, but I'm not sure if that's relevant to this since I would like the exact opposite: cache nothing.

I've gone to the level of not even testing external resources; if I change some arbitrary test string in the body element of my index.html, the home screen bookmark does not show the updated text.

Tgroup answered 9/1, 2012 at 17:5 Comment(0)

D

8

I think I found a workaround:

The new version of the site only appears when the index.html file changes.
(the first file to be loaded)

If you leave the index.html and only change some js in other files then the site doesn't load the new version.

Dzerzhinsk answered 9/1, 2012 at 20:2 Comment(4)

Interesting. So it doesn't believe anything has changed unless the actual html file changes. Thanks for the tip! – Tgroup 9/1, 2012 at 20:42

Does not refresh the CSS files for me. – Picot 14/3, 2013 at 10:6

Not refreshing JS for me. – Guiana 7/11, 2013 at 0:42

It only works if the index.html does refer to the js script you updated. – Melissa 7/3, 2014 at 11:2

S

28

Another workaround is to add ?v=1 to your Javascript and CSS links. For example:

<link rel="stylesheet" type="text/css" media="all" href="./css/ipad.css?v=1">    
<script src="./js/ipad.js?v=1"></script>

It seems one doesn't have to update the number when your file has changed, as far as I can tell. Apparently, on an iPad 2 with the latest software update installed, it is enough to just hint at something dynamic.

Stumpage answered 2/4, 2012 at 9:6 Comment(2)

Thanks a lot, this finished a morning of headaches! Using iphone 5.1.1 and it seems that home screen webapps only update the JS when the html file is changed, so I'm updating the versions as well. (on 4.3.3 it was updating on every load). – Baalbek 1/6, 2012 at 12:42

@Baalbek I'm using an iPad and I'm finding that even changing the HTML file doesn't make a difference. I tried over and over and over again. The only thing that got it to refresh was to delete it off my home page then add it again from safari. Maybe this suggestion would have made a difference, but on my appserver (grunt-contrib-connect) I couldn't properly download the files when I added ?&v=1 to the end. – Dwight 9/10, 2013 at 2:9

T

15

Create a cache.manifest that instructs it never to cache resources referenced by the main html page:

CACHE MANIFEST

# Version 1.0000

NETWORK:
*

Use it in your index.html:

<!DOCTYPE html>
<html manifest="cache.manifest">

Now whenever you change that manifest file -- for example, by increasing the version number in that comment -- the browser will redownload index.html also.

Ensure your page gets reloaded when the cache is updated:

<script>
function updateSite(event) {
    window.location.reload();
}
window.applicationCache.addEventListener('updateready', updateSite, false);
</script>

The Safari Developer Library has good documentation.

Teledu answered 2/5, 2014 at 4:54 Comment(4)

I had to call window.location.reload(true) to force a bypass of the caches. It didn't work without true. – Granule 10/7, 2014 at 22:40

This is super helpful! This should really be the accepted answer. – Dougie 3/6, 2015 at 15:18

This might work, but before anything, at least ONE reload has to happen before the ipad sees this new manifest. That reload has to be triggered somehow, and simply changing something on the server's end doesn't help a thing when the ipad is deciding all by itself never to load anything from the server - which is the case by default. – Sikorsky 16/6, 2015 at 16:1

applicationCache is now deprecated and does not work in Chrome 85+, see caniuse.com/#feat=offline-apps – Granvillegranvillebarker 31/8, 2020 at 7:26

D

8

I think I found a workaround:

The new version of the site only appears when the index.html file changes.
(the first file to be loaded)

If you leave the index.html and only change some js in other files then the site doesn't load the new version.

Dzerzhinsk answered 9/1, 2012 at 20:2 Comment(4)

Interesting. So it doesn't believe anything has changed unless the actual html file changes. Thanks for the tip! – Tgroup 9/1, 2012 at 20:42

Does not refresh the CSS files for me. – Picot 14/3, 2013 at 10:6

Not refreshing JS for me. – Guiana 7/11, 2013 at 0:42

It only works if the index.html does refer to the js script you updated. – Melissa 7/3, 2014 at 11:2

I

6

For our iOS webclip apps we are using the following. So far no cache problems:

1- We have one cache manifest file called 'manifest.appcache.php'

<?php
    header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate");
    header("Pragma: no-cache");
    header("Expires: Thu, 01 Jan 1970 00:00:01 GMT");
    header('Content-type: text/cache-manifest'); 
?>

CACHE MANIFEST

CACHE:
# Don't cache anything
FALLBACK:
# Nothing
NETWORK:
# Request everything from server
*

2 - In the HTML file we have:

<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache.php">
    <head>
...

Inviting answered 24/1, 2013 at 9:55 Comment(1)

I had to add the cache mainfest also to the html parts that I inserted via Ajax. Only method that worked for me. Thanks! – Isopiestic 30/3, 2015 at 12:57

D

2

I have an angular app I'm developing and ran into this issue when trying to test it on an iPad. By adding a meaningless query to the end of the url I was able to get a current version of all the assets.

www.somesite.com?meaninglessquery

Dave answered 26/8, 2015 at 23:25 Comment(0)

A

2

You can force the open web app to reload without using the cache if you have the Safari Web Inspector open and pointing at your open web app. With the Web Inspector active, press SHIFT + COMMAND + R (on a Mac). You may need to refresh one more time to trigger the updated assets.

Apanage answered 17/10, 2016 at 11:5 Comment(0)

I

1

I've had luck with powering off the device. I had changed the app manifest; but presumably, you need a refresh or something to get the browser to look for it. Since I removed the browser chrome, there's no reset button. We tried "closing" the app (haha) and swiping the app away; but I presume iOS tends to keep things running anyway. Shutting down did the trick to get it to refresh.

Maybe there's some gesture for refresh I don't know. Perhaps one should tuck a little "check for updates" refresh button into cached web apps.

Incipit answered 16/1, 2015 at 18:38 Comment(0)

A

-1

The latest Safari (v12.0.1) developer tools has a "Ignore resource cache" button at the top right of the Network tab. Check that, then reload.

Abattoir answered 4/2, 2019 at 21:18 Comment(0)

Recommended topics

Hot tags