Created
October 24, 2011 20:33
-
-
Save lyzadanger/1310111 to your computer and use it in GitHub Desktop.
AppCache demo w/jQuery Mobile & PHP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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; ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 |
BTW, having mixed luck with getting the jQM page loading spinner to show up. Sometimes it does, much of the time it doesn't.
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
Possible approach to semi-sane handling of offline mode w/appcache. Allows for use of dynamically-generated page offline via updated manifest file, appcache events, Last-Modified header on dynamic data source and AJAX requests. Down side: manifest.appcache.php doesn't meet manifest filenaming conventions.