Skip to content

Instantly share code, notes, and snippets.

@lyzadanger
Created October 24, 2011 20:33
Show Gist options
  • Save lyzadanger/1310111 to your computer and use it in GitHub Desktop.
Save lyzadanger/1310111 to your computer and use it in GitHub Desktop.
AppCache demo w/jQuery Mobile & PHP
<!DOCTYPE html>
<html manifest="manifest.appcache.php">
<head>
<title>AppCache Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>AppCache Demo</h1>
</div><!-- /header -->
<div data-role="content">
<ul id="dynamic-content" data-role="listview">
<?php include('list.php'); // Rendered dynamically...unless this is cached ?>
</ul>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript">
$('[data-role="page"]').live('pageinit', init); // jQM-addled DOM is ready!
function init() {
var appCache = window.applicationCache,
$content = $('#dynamic-content');
ensureFreshContent();
function ensureFreshContent () {
// If browser doesn't support cache manifest, move along.
// Note that we could (TODO) implement some sort of caching solution using
// various local storage mechanisms for browsers that support, say,
// IE User Data, but not HTML5 cache manifests
if (!appCache) return;
// Otherwise, hide the content until we know we have the latest
// (TODO: display a loading indicator)
$.mobile.showPageLoadingMsg();
$content.hide();
// If there's nothing to update, we'll show the cached version
appCache.addEventListener('cached', showCached, false);
appCache.addEventListener('error', showCached, false);
appCache.addEventListener('noupdate', showCached, false);
appCache.addEventListener('obsolete', showCached, false);
// But if we recognize an update, swap out the cache & display it.
appCache.addEventListener('updateready', updateCache, false);
// Kick off the update
appCache.update();
}
function showCached (evt) {
$content.show();
}
function updateCache (evt) {
appCache.swapCache();
// .swapCache() has retrieved the updated MANIFEST,
// but we still need to retrieve the updated resource.
updateList();
}
function updateList() {
// AJAX request to get updated dynamic data.
// This will only get fresh data if the manifest
// has been updated.
$.get('list.php', function(data) {
$content.html(data);
$content.listview('refresh');
showCached(); // Needed explicitly
$.mobile.hidePageLoadingMsg();
});
}
}
</script>
</body>
</html>
<?php
// Set Modified header of right now
header('Last-Modified: ' . date('r'));
?>
<?php for ($i = 0; $i < 10; $i++): ?>
<li><a href="#"><?php print date('M d, Y h:i:s'); ?></a></li>
<?php endfor; ?>
<?php header('Content-type: text/cache-manifest'); ?>
CACHE MANIFEST
# Update cache every 1 minutes
# <?php echo (date('hi')); // Hi! Hah! ?>
CACHE:
list.php
index.php
http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css
http://code.jquery.com/jquery-1.6.4.min.js
http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js
http://code.jquery.com/mobile/1.0rc1/images/ajax-loader.png
http://code.jquery.com/mobile/1.0rc1/images/icons-18-white.png
http://code.jquery.com/mobile/1.0rc1/images/icons-18-black.png
http://code.jquery.com/mobile/1.0rc1/images/icons-36-white.png
http://code.jquery.com/mobile/1.0rc1/images/icons-36-black.png
@lyzadanger
Copy link
Author

Oh, the update-every-one-minute thing on the manifest is for prototyping purposes/is arbitrary. In a real situation, one would update the manifest file when it needs updating (i.e. when the dynamic data returned by list.php, in this example, would be different). In my case, this would be when other resources are updated. But anyway.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment