I’ve been looking into Google Gears over the weekend, had other things on my mind so its taken longer than I wanted. My first thoughts are: pain.
Details of what Google Gears is can be found at http://gears.google.com/ with the developer reference at http://code.google.com/apis/gears. Put simply, it saves a copy of all resources a developer references in a manifest and saves them in a local SQLite database on the client, with each site (protocol, url, port defines site) having there own directory and database for each browser it is viewed in allowing for isolation and improved security. Still not 100% sure about this, I bet it will/can be hacked. This database can also be used to store data, writing to the database from within javascript using standard SQL. Today, I am interested in getting the basic Silverlight 1.0 template (clickable button) working with Gears in a offline state.
To start with, I installed Gears inside of my Orcas VPC as I have it preconfigured with everything and is going to be deleted when the next CTP is released (I’m hearing end of June). I then used the JavaScript on Google’s developer site to enable the offline support, this has a number of problems which I will discuss.
As mentioned, Gears takes a copy of all the files required for the application to work offline. For this Silverlight project, the default is
Default.html
Default.html.js
Scene.xaml
Scene.xaml.js
Silverlight.js
gears_init.js (JavaScript for Google Gears)
go_offline.js (JavaScript for Google Gears)
These are all the files required to have the application running, in this case both online and offline. You need to reference everything which the user might require, images, stylesheets etc. If the user requests something not within the Google Gears database for the site, then it will first go to the browser cache, if it can’t find it there it tries the server and fails if your offline. This brings me onto an important point, with Google Gears it will always look in the local DB first even if your online and then check for updates/sync.
So lets break down how to setup the site to enable the files above to be downloaded. My example is going to automatically save into Google Gears when the user first visits the site, in a real application it more likely that you will have a link which allows it to go offline. This depends on a app-by-app basis. Within Default.html, I reference the two JavaScript for Google Gears.
Gears init creates the ActiveX object, one way for each browser (IE, FireFox, Safari). go_offline was taken from the tutorials on Google’s site, but requires modifications. This has all of the logic to create the database and save the files. The local Google Gears deals with everything else.
With the two files reference, we need to call the correct functions. Calling init(); will create the database and the store for the website. The createStore(); function deals with the saving of the items into the local database. Within both files there is a check to make sure Gears is installed – if (!window.google || !google.gears) { //Not Installed }
Init() has two important lines of code. The first line creates the database, giving it a name and the version number of Google Gears expected. When first line is called, the dialog asking the user if the site is allowed to access Google Gears is displayed. If the user clicks Deny, an exception is thrown so you will need to deal with this correctly within your application incase if ever happens.
localServer = google.gears.factory.create(“beta.localserver”,”1.0″);
The second line is creates the store for where everything is to be saved within the database.
store = localServer.createManagedStore(STORE_NAME);
Within createStore(); you first need to check to make sure store != undefined, as if the user clicked Deny it will be. Two lines then give the manifest file for the URL, which I will discuss below, and then tell it to check for updates.
store.manifestUrl = MANIFEST_FILENAME;
store.checkForUpdate();
The manifest file is in json format, and tells Google Gears everything it should download in order to make the application work offline. There is then a version number which relates to the manifest, this is what Gears uses to decide if it needs to change its local list of files. If you do not increment, or the format is wrong, then Google Gears uses what it already has in the DB even if the file itself has changed. This needs to be saved as Manifest.json an referenced to store.manifestUrl.
{
“betaManifestVersion”: 1,
“version”: “0.3”,
“entries”: [
{ “url”: “Default.html”},
{ “url”: “Default.html.js”},
{ “url”: “Scene.xaml”},
{ “url”: “Scene.xaml.js”},
{ “url”: “Silverlight.js”},
{ “url”: “gears_init.js”},
{ “url”: “go_offline.js”}
]
}
This caused a few problems, as at first I wasn’t incrementing the version so any changes where not taken into account. The second problem was that I forgot a comma, so the file wasn’t downloaded but Gears did not make this known.
As mentioned, the main area is error handling, mainly making sure the user did not click deny and if they do handling the logic correctly. The go_offline also has a textOut function to display some status information, however this throws an exception on the first execute. I also found that after making a change to the web files, it took a while for Google Gears to update and take the change into account. Not so bad for live sites, but makes development a lot more effort. However, this could cause problems for sites like BBC News where users mainly check to see if there is new information, with Gears this could cause the user to see a older version without realising.
I also found having to disconnect from the network (in VPC change the network card to something else) and clear the cache a painful way to make sure the application was working correctly with Gears. Once I didn’t have go_offline referenced in the manifest, it took a long time to actually realise, as sometimes it worked from the browser cache instead. Might improve in later releases. However, this does allow a offline Silverlight application which isn’t a bad thing.
Download Sample
Demo @ http://blog.benhall.me.uk/Code/Silverlight/SilverlightGearedUp/Demo/Default.html
Code @ http://blog.benhall.me.uk/Code/Silverlight/SilverlightGearedUp/Code.zip