bryfox/index.php

## index.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('pageshow', 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();
        $.mobile.hidePageLoadingMsg();
      }

      function updateCache (evt) {
        appCache.swapCache();
        // .swapCache() has retrieved the updated MANIFEST,
        // but we still need to retrieve the updated resource.
        updateList();
        $.mobile.hidePageLoadingMsg();
      }

      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>

## list.php
<?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; ?>

## manifest.appcache.php
<?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
	<!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('pageshow', 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();
	$.mobile.hidePageLoadingMsg();
	}

	function updateCache (evt) {
	appCache.swapCache();
	// .swapCache() has retrieved the updated MANIFEST,
	// but we still need to retrieve the updated resource.
	updateList();
	$.mobile.hidePageLoadingMsg();
	}

	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