How do I avoid having JSONP returns cached in an HTML5 offline application?
I had good luck with cached offline apps until I tried including data from JSONP endpoints. Here's a tiny example, which loads a single movie from the new Netflix widget API:
<!DOCTYPE html>
<html manifest="main.manifest">
<head>
<title>Testing!</title>
</head>
<body>
<p>Attempting to recover a title from Netflix now...</p>
<script type="text/javascript">
function ping(r) { alert('API reply: ' + r.catalog_title.title.regular); }
var cb = new Date().getTime();
var s = document.createElement('SCRIPT');
s.src = 'http://movi.es/7Soq?v=2.0&output=json&expand=widget&callback=ping&cacheBuster=' + cb;
alert('SCRIPT src: ' + s.src);
s.type = 'text/javascript';
document.getElementsByTagName('BODY')[0].appendChild(s);
</script>
</body>
</html>
... and here's the contents of my manifest, main.manifest, which contains no files and is only there so my browser knows to cache the calling HTML file.
CACHE MANIFEST
Yes, I've confirmed that my server is sending the manifest down with the correct content type, text/cache-manifest.
The app works fine--meaning both alerts show--the first ti开发者_Python百科me I run it, but subsequent runs, even with the attempt at cache-busting in line 10, seem to be attempting to load the script from cache no matter what the query string is. I see the alert showing the script source, but the callback never fires.
If I remove the manifest link from line 2 and reset my browser--being Safari and the iPhone Simulator--to clear cache, it works every time. I've also tried alerting the number of SCRIPT tags in the page, and it's definitely seeing both the existing and dynamically-created tag in all cases.
Aha, found it in the spec, of all the crazy places:
http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#concept-appcache-onlinewhitelist-wildcard
I needed to add http://movi.es/ to the NETWORK: section of my manifest. Complete file now looks like this:
CACHE MANIFEST
NETWORK:
http://movi.es/
... and seems to hit the network every time.
加载中,请稍侯......
精彩评论