I’ve recently done a few things that would benefit from having an offline mode. Empowered by Appcache Facts I tried to make the newly published La Vuelta 2011 results page an offline-capable app.
Goal
The goal of this exercise is twofold:
- To force caching of resources that slow down the loading of your page.
- To actually be able to use the app when offline.
Solution
It’s as simple as writing a cache manifest. It pays to name it [something].manifest, as Apache already serves the correct header with that suffix. What you do is list all the files you want cached, add stuff you allow on the network (check Appcache Facts and Dive Into HTML5 – Offline Web Applications) and it all works. Except it doesn’t.
CACHE MANIFEST
# version 1
CACHE:
resource.js
NETWORK:
*
http://*
https://*AJAX stuff
If you’re using AJAX to get data from a server using jsonp/script, your framework of choice (jQuery in my case) will probably default to using a no-cache approach to loading it. This will mean that it will request the file + some suffix to prevent browser caching. This will mean that the resource will not be available if you’re actually online.
You can use navigator.onLine to switch cache on/off, but I suggest you first try requesting the no-cache resource and if it errors out, request the cached resource. The benefit is that even if you are online but the server is not, the users will still see the data / use the app.
$.ajax({
dataType: 'script',
url: 'resource.js',
cache: false,
success: successHandler,
error: function () {
$.ajax({
dataType: 'script',
url: 'resource.js',
cache: true,
success: successHandler
});
}
});iPad issues
Fixing the AJAX meant that it worked properly on the desktop (test with Firefox that has offline mode) and in Safari on the iPad. The trouble started when I added the app to Home Screen – data failed to load. It was the same app as in Safari and it should have worked.
After some debugging I found out that the data actually was loaded but the eval failed (I was using $.getScript). Some weird testing showed that the problem was a newline character in the data. As I really liked the newline there I added some code to the error handling that removed the newline and evaled the data, then ran success. And it worked!
$.ajax({
dataType: 'script',
url: 'resource.js',
cache: false,
success: successHandler,
error: function () {
$.ajax({
dataType: 'script',
url: 'resource.js',
cache: true,
success: successHandler,
error: function (xhr) {
eval(xhr.textResponse.replace(/\n/g, ''));
successHandler();
}
});
}
});Debugging
It’s somewhat hard to debug offline stuff. I suggest using a clearly visible version indicator in the file to make sure you know which version of the file you’re looking at. Also remember that the first time you load the app after changing the file & cache manifest it is served from cache. At the same time the manifest is checked and on the iPad the files are downloaded after everything else is done (app finished loading and rendering).
It works!
After these problems were solved I used the aforementioned navigator.onLine to hide stuff that normally comes from the network but is not relevant to the offline app (banners, share links, like/+1 buttons) and you can now check the La Vuelta 2011 results page.