chapter: A Complete Webapp ================== CACHE MANIFEST CACHE: # jQuery Mobile's files jquery.js jquery.mobile.js jquery.mobile.css images/ajax-loader.png images/icons-18-black.png images/icons-18-white.png images/icons-36-black.png images/icons-36-white.png # HTML documents # index.html is always cached implicitly feedback.html # Custom script and CSS index.js index.css # Custom images logo.png sponsors.png background.png # We don't need to cache iOS icons or launch image as the # platform will cache it by itself NETWORK: # We will go to the network only for the JSON file # and the script that will receive the feedback # replace mobilexweb.com with your own domain http://mobilexweb.com/jqmbook/sessions.json http://mobilexweb.com/jqmbook/feedback.php ==================================== jQM Conference

jQM Conference

November 5th

Twitter
Facebook

Sessions

Session detail

Where

Hasta la vista 1234, ACME City

About

Organization

This congress is organized by ACME

Dates

November 5th, 2015 9am to 6pm

History

First edition of this congress was........

Sponsors

installation

Complete the installation

To finish the installation, you must add this webapp to your Home Screen. To do that, touch the arrow and select "Add to Home Screen"

Open without installation
==================================== jQM Conference

Feedback

==================================== jQM Conference

Feedback

Thanks for your feedback. Close
==================================== /* Some styles for header */ .ui-header { background-color: #69C; background-image: url('images/background.png'); background-position: top right; background-repeat: no-repeat } /* Some styles for offline installation process */ #console, #consoleInstall { background-color: #FF6; border-radius: 10px; -webkit-border-radius: 10px; padding: 5px; margin: 0; text-align: center; border: 1px solid #CCC; font-size: small; } /* Home's content area */ #home [data-role=content] { background-color: white; text-align: center; } /* Buttons */ .openWithoutInstall { margin-top: 50px; display: block; } /* Navbar text */ [data-role=navbar] .ui-btn-text { font-size: smaller; } ==================================== { "slots": [ // Some slots are special times –opening, breaks, lunch, etc.- { "id": 1, "time": "09:00", "message": "Opening" }, // Some slots are session times { "id": 2, "time": "09:20"} ], "sessions": [ { "id": 1, "title": "A great session", "timeId": 2, "description": "...", "speaker": "...", "room": "..." } ] } ==================================== var data; $(document).bind("mobileinit", function() { if (navigator.platform=="iPhone" || navigator.platform=="iPad" || navigator.platform=="iPod" || navigator.platform=="iPad" || navigator.platform=="iPhone Simulator" ) { // It's an iOS device, we check if we are in chrome-less mode if (!navigator.standalone) { showIOSInvitation(); } } /* We capture the sessions page load to check dynamic session data */ $("#sessions").live("pageshow", function() { if (window.localStorage!=undefined) { // HTML5 Local Storage is available if (window.localStorage.getItem("data")!=undefined && window.localStorage.getItem("data")!=null) { // We first load the offline stored session // information while checking updates showSessions(window.localStorage.getItem("data")); $("#console").html("Checking data update"); } else { // There is no local storage cache $("#console").html("Downloading session data..."); } } else { // No HTML5 Local Storage, downloading JSON every time $("#console").html("Downloading session data..."); } loadSessionsAjax(); }); }); function showIOSInvitation() { setTimeout(function() { // We hide the saving information until the whole webapp is downloaded $("#install").hide(); // We open the iOS instructions for adding to the homepage $.mobile.changePage($("#ios"), {transition: "slideup", changeHash: false}); }, 100); // We capture HTML5 Application Cache events to provide useful information if (window.applicationCache!=undefined) { window.applicationCache.addEventListener('checking', function() { $("#consoleInstall").html("Checking version"); }); window.applicationCache.addEventListener('downloading', function() { $("#consoleInstall").html("Downloading application. Please wait..."); }); window.applicationCache.addEventListener('cached', function() { $("#consoleInstall").html("Application downloaded"); $("#install").show(); }); window.applicationCache.addEventListener('updateready', function() { $("#consoleInstall").html("Application downloaded"); $("#install").show(); }); window.applicationCache.addEventListener('noupdate', function() { $("#consoleInstall").html("Application downloaded"); $("#install").show(); }); window.applicationCache.addEventListener('error', function(e) { $("#consoleInstall").html("There was an error downloading this app"); }); window.applicationCache.addEventListener('obsolete', function(e) { $("#consoleInstall").html("There was an error downloading this app"); }); } } function loadSessionsAjax() { // We bring the JSON as text so it's easy to store in Local Storage $.ajax(/*"http://www.mobilexweb.com/congress/*/"sessions.json", { complete: function(xhr) { if (window.localStorage!=undefined) { if (window.localStorage.getItem("data")!=undefined && window.localStorage.getItem("data")!=null) { if (xhr.responseText==window.localStorage.getItem("data")) { // The new session downloaded is the same as the // one in screen $("#console").html("Schedule is updated"); } else { // There is an update on the session data if (confirm("There is an update in the schedule available, do you want to load it now?")) { $("#console").html("Schedule is updated"); showSessions(xhr.responseText); } else { $("#console").html("Schedule will be updated later"); } } } else { // Local Storage is available but no previous // cache found $("#console").html("Schedule is updated"); showSessions(xhr.responseText); } } else { // No Local Storage, show the info without saving $("#console").html("Schedule is updated"); showSessions(xhr.responseText); } }, dataType: 'text', error: function() { $("#console").html("Schedule update could not be downloaded"); } }); } var isFirstLoad = true; function showSessions(string) { if (window.JSON!=undefined) { data = JSON.parse(string); } else { data = eval("(" + string + ")"); } if (window.localStorage!=undefined) { // Save the new data as string window.localStorage.setItem("data", string); } $("#slots").html(""); var html = ""; for (var i=0; i"; } else { // This is a normal slot with sessions html += "
  • Sessions of " + data.slots[i].time + "
    • "; } } $("#slots").html(html); if (isFirstLoad) { $("#slots").listview(); isFirstLoad = false; } else { $("#slots").listview('refresh'); } } function showDetails(index) { $("#details h1").html("Sessions of " + data.slots[index].time); var html = "" for (var i=0; i"; html +="

    " + data.sessions[i].room + "

    "; html += "

    Speaker/s: " + data.sessions[i].speaker; html += "

    "; html += "

    " + data.sessions[i].description + "

    "; html += ""; } } // We provide the information to the details page $("#sessionInfo").html(html); $("#sessionInfo div").collapsible(); // We change to the details page $.mobile.changePage($("#details")); } function refresh() { $("#console").html("Verifying..."); loadSessionsAjax(); } function openWithoutInstallation() { // We remove the dialog-like iOS installation page $.mobile.changePage($("#home"), {transition:"slideup", reverse:true}); } ==================