Silverlight 3 - An Out Of Browser Example

One of the many new things available in Silverlight 3 is the ability to create out-of-browser applications. At first glance, this new out-of-browser capability sounds like it is Microsoft's duplicate of Adobe AIR, but for a number of very important aspects, the two are completely different. In fact, Silverlight's out-of-browser ability has more in common with Mozilla's Prism or Google Gears.

This is because unlike with Adobe AIR, Silverlight's out-of-browser ability comes down to pretty much just copying the XAP file to the local machine. In fact, even when the app is run out-of-browser, it is still somewhat in a browser - it runs in a browser sandbox. This leads to the other really big difference between AIR and out-of-browser Silverlight - the permissions for a Silverlight app stay constant whether it is in or out of the browser, while an AIR app gets a bunch of new permissions that its web counterparts do not. This means Silverlight out-of-browser apps don't get any access to the file system or custom chrome or any of a number of things that an AIR app can do.

So what is the point then, you ask? Well, the same reason that Gears and Prism exist. The ability to work offline, and the ability to make a web app feel more like an OS app (by pulling it out of the web browser chrome).

Ok, enough talking about what Silverlight out of browser is - let's talk about how to actually do it. Below we have a small Netflix Silverlight application, which I took from The Reddest's Silverlight and the Netflix API tutorial. I've modified it slightly to take advantage of some new Silverlight 3 features, and I've added the ability for it to be an out of browser app. Check it out by clicking the "Install out of browser" button on the bottom right.



Cool right? Well making it happen is actually really easy, and can be done to any Silverlight app. Open up a Silverlight project in Visual Studio, right click on the project and go to properties:

Once you are here in the properties page, the options should jump right out at you (and if they haven't, I drew some arrows on the pictures below):

First off, you want to check the checkbox "Enable running application out of the browser". At the core, this is all you really have to do, although you probably want to configure some other settings as well - which is what the button on the right (Out-of-Browser Settings...) will let you do. The screenshot below is of the dialog that that button brings up:

This dialog will let you set a number of items, like the window title and various icons - all pretty self explanatory. One thing to note, though - the icons files are required to be png files. Don't know why, but that confused me for a few minutes as I tried to set an 'ico' file as the icon.

Now that you have done all this configuration, you may have noticed a new file appear in your project, the "OutOfBrowserSettings.xml" file:

This file is where all the configuration information you just entered ends up getting stored. For example, in the case of this Silverlight Netflix app, the file looks like this:

Should be pretty obvious that all of that is straight from the Out-of-Browser settings dialog. If you really hate dialogs, you can go straight into this file and edit away to get the settings that you want.

That is really all you need to do to make a Silverlight app work as an out-of-browser app. "But wait!" you say, "What about the install button?" Well, actually, you don't need that install button. The option is automatically available in the Silverlight context menu once you checked that checkbox in the properties page:

But making the button work is ridiculously easy as well - here is the code for it:

That method is the click event handler for the install button. Checking to see if the application is running as an in or out-of-browser app is as simple as checking the IsRunningOutOfBrowser property. Triggering the install is just as easy - you just call Install.

So what actually happens when the user chooses the install context menu option of you call Install in your code? Well, the user gets a dialog like this:

The get to choose where to place shortcuts, which is the only install option. As you can see, this is where the 128x128 icon gets used, and the "ShortName" (or "Shortcut Name") is the name displayed here to the user as the name of the application. Once they click ok, a few seconds later the app will pop up in its own window:

And in this case, since the user chose to place a shortcut in the Start Menu, we get a shortcut there:

Silverlight out-of-browser applications don't show up in Add/Remove programs, so how do we get rid of them? Well, removing the application is as simple as installing it, through the context menu:

That is pretty much it for the life cycle of Silverlight out-of-browser applications. Before we end, though, there is one other small snippet I'd like to show you. Since these Silverlight out-of-browser apps are installed locally, there is no guarantee that the computer is connected to the internet when the app is run. Microsoft gives us an easy way to detect this, however, using the NetworkInterface.GetIsNetworkAvailable method:

All this method does is return a boolean - true if the computer is connected to a network, and false otherwise. It is true that being connected to 'a network' does not always mean you can get to the internet, but it is a good first check.

Well that wraps it up for this introduction to Silverlight out-of-browser apps. You can grab the sample app in the zip file below if you want to play with the code yourself, and as always leave a comment if you have any questions.