Building Android Apps: Going Offline - Debugging

It can be tough to debug apps that use the offline application cache, because there’s very little visibility into what is going on. You may find yourself constantly wondering if your files have downloaded or if you are viewing remote or local resources. Plus, switching your device between online and offline modes is not the snappiest procedure and can really slow down the develop-test-debug cycle.

One thing you can do to help determine what’s going on when things aren’t playing nice is to set up some console logging in JavaScript.

---

Note:

If you want to see what’s happening from the web server’s perspective, you can monitor its log files. For example, if you are running a web server on a Mac or Linux computer, you can open the command line , and run these commands (the $ is the shell prompt, which you should not type):

$ cd /var/log/apache2/
$ tail -f access?log

This will display the web server’s log entries, showing information such as the date and time a document was accessed, as well as the name of the document. When you are done, press Control-C to stop following the log.

The ? on the second line will match any character; on Ubuntu Linux, the filename is access.log and on the Mac it is access_log. If you are using another version of Linux or if you’re on Windows, the name of the file and its location may be different.

---

1. The JavaScript Console

Adding the following JavaScript to your web apps during development will make your life a lot easier, and can actually help you internalize the process of what is going on. The following script will send feedback to the console and free you from having to constantly refresh the browser window:

// Convenience array of status values
var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

// Listeners for all possible events
var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

// Log every event to the console
function logEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? 'yes' : 'no';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'online: ' + online;
    message+= ', event: ' + type;
    message+= ', status: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (prolly a syntax error in manifest)';
    }
    console.log(message);
}

// Swap in newly downloaded files when update is ready
window.applicationCache.addEventListener(
    'updateready', 
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    }, 
    false
);

// Check for manifest changes every 10 seconds
setInterval(function(){cache.update()}, 10000);

					  

---

Note:

You can store this in a .js file such as debug.js and refer to it in your HTML document via the script element’s src attribute, as in <script type="text/javascript" src="debug.js"></script>.

---

This might look like a lot of code, but there really isn’t that much going on here:

You can view the console messages in Chrome by selecting View→Developer→JavaScript Console and clicking Console if it was not automatically selected.

If you load the web page in your browser and open the console, you’ll see new messages appear every 10 seconds (Figure 1). If you don’t see anything, change the contents of one of the files (or the name of a file) and reload the page in your browser twice. I strongly encourage you to play around with this until you have a feel for what’s going on. You can tinker around with the manifest (e.g., change the contents and save it, rename it, move it to another directory) and watch the results of your actions pop into the console like magic.

Figure 1. Use the console.log() function to send debugging messages to the JavaScript console