(Not Quite) Putting a Silverlight App in the Chrome Web Store?

I must admit that I had a little bit of an “eye opening” experience today with the “Chrome Web Store”.

Firstly, before you jump on me for talking about a web-browser other than IE let me say that I, of course, run IE and I’m currently running the IE9 beta as my default browser but I also run FireFox (4.0 beta) and I run Chrome which I upgraded today to the 9.0 beta.

Naturally, I have these browsers because Silverlight runs in all of them and it’s worth remembering that it provides a consistent runtime across Windows XP, Windows Vista, Windows 7, OS X which is “no mean feat” and especially when that runtime has hit around 70% penetration with almost everyone already on the latest version (4).

Anyway, sales pitch over Winking smile

One of the things that I noticed in the Chrome beta was the “Chrome Web Store”.

I’d heard somewhere about the web store and I hadn’t really “got it”. The message I’d heard was something along the lines of;

You can now take a regular web app and stick it into the web store – e.g. you can take YouTube and put it into the web store.

and I was left thinking “Huh? Why would I bother? I’m not having any trouble finding YouTube”.

But today I used it for the first time and I think I “got it”. I ran up Chrome and it looks like this ( having re-themed it );

image

and I thought “Hmm, what’s this Web Store all about then?” and went to take a look and ( uninstalling Flixster for a moment ) I got to the store;

image

and I saw that Flixster was an available free “app” and I’m familiar with Flixster so I figured I’d give it a try and installed it;

image

and so I installed it and it showed up in Chrome;

image

and I click on Flixster and it opens up the website;

image

and this is exactly the same as me opening up http://flixster.rottentomatoes.com and at this point I’m thinking “meh, so what?” but then I revisit the little icon in Chrome;

image

and set it up so that it opens in full screen and so that there’s a shortcut on my desktop;

image

and now I’m running this like an app from my desktop;

image

Now, there’s a pretty subtle difference between me doing this on my laptop and typing http://flixster.rottentomatoes.com into the address bar on my browser.

However, if I move to a different kind of device, perhaps one without a keyboard then that subtle difference becomes perhaps more important as I might be used to the idea of browsing an app store, finding an app, installing it and running it from an icon on the desktop and that metaphor is preserved here.

Of course, there’s a whole bunch of commercial aspects around this as there’s a paid-for model around these apps and I guess Google gets some share of that revenue and also gains some level of control around what content is distributed via this mechanism. I haven’t looked at any of this and I’ll leave the commercial aspects aside for the moment.

The Flixster app is a really nice app although it doesn’t feel quite as “rich” as the other variants I’ve seen on the Windows Phone 7 and on the iPad and, specifically, I found that it didn’t resize very nicely with the window ( although another app – the New York Times – did ).

Also, the app wasn’t particularly responsive to touch input on my touch monitor so I suspect it’s written in HTML/JS and doesn’t attempt to do anything about touch. That’s not a criticism – as far as I know, there’s no way to do touch in a standardised way from HTML/JS today (see very recent draft) so it’s not surprising that this app doesn’t do it and there are definitely Flixster apps out there for other platforms (e.g. Windows Phone 7 and iOS) that deal with touch very well.

One last thing I noticed was that, in this case, without a network connection the app simply said “This app is not available” when I tried to run it from the desktop.

I’m not sure that this would be the case for all apps from this store as I think there are two models for apps – “hosted” and “packaged” which I’ll return to in a moment.

Now, IE9 on Windows 7 has some similar desktop-integration features in that it allows the idea of pinning a site to the task bar. Today, you can go to a site like the BBC’s iPlayer at http://www.bbc.co.uk/iplayer and if you simply drag the tab out of IE to the Windows 7 task bar;

image

then I have the iPlayer pinned there and can (e.g.) use jump-lists and so on;

image

as though it were an installed application so, once again, this boundary between “browser content” and “installed app” is blurring with IE9.

What interested me for the moment though was that Chrome’s app store is technology agnostic claiming to take “any web app” and so I wondered “Ok, does that include a Silverlight app?”.

So, I thought I’d experiment with that. I figured I’d take my recent amazing clock application and see if I could make an app out of it.

It turns out that there are two kinds of app in the store;

  1. Hosted – it’s already out there on the web and you provide a bit of metadata describing it.
  2. Packaged – you provide some bits in a ZIP file that can be downloaded and installed.

and, as you might imagine, there’s a different security model around the 2 options with (2) being able to request permissions via its metadata and, possibly, be granted those permissions at installation time if the user agrees (this feels a lot like the marketplace model for WP7 applications – see the section “Capability List” on MSDN).

I decided that I’d go for a packaged application and so I set about authoring my metadata but, for the life of me, I couldn’t get Silverlight and Chrome to play nicely together over this.

Now, I’m not sure who to blame Smile 

What I did was to put together a set of files – an HTML file to load the plugin, a XAP file containing my app and a JSON manifest describing the app ( specifically pointing at an icon and the HTML file ).

image

with test.html looking like;

<html>
<body>
<h1>Hello World</h1>

	 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="640" height="480">
		<param name="source" value="clock.xap"/>
	 </object>
</body>
</html>

and the JSON manifest looking like;

{
  "name": "Mikes Amazing Clock",
  "description": "It tells the time and sometimes even gets it correct",
  "version": "6",
  "app": {
    "launch": {
      "local_path": "test.html"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  }
}

Now, if I use Chrome and simply point it at this HTML file then all is good;

image

which surprised me because IE would display a warning about running active content from the file system but Chrome doesn’t seem to mind loading from c:\temp and just “going for it”.

Anyway, if I then go and load up my package into the browser via the developer tab;

image

then all seems well until I come to run the application when I see;

image

Now, that whitespace is definitely being occupied by a loaded Silverlight plug-in but I get no content and I can only think that the plug-in is not managing to find or load the clock.xap specified in the source parameter of the object tag.

Why? I’ve no idea. I would have assumed that the Chrome environment would transparently “pretend” that the HTML was loaded exactly as if it had been loaded from the web and so the plugin would run (it seems to) and then request clock.xap via the browser and the browser would deliver it. But that seems not to happen…

My clock.xap goes missing when running in this environment and I got pretty stuck in trying to figure out where it’s gone – I tried quite a few tricks but nothing seemed to work. What it ultimately seems to come down to is that if I simply run the app from the filesystem then I see Chrome delivering;

image

whereas if I run it as an application then I only see Chrome delivering the HTML file;

image

and so either Chrome or the plug-in aren’t playing well together here – I’ll update the post if I find out any more information and if anyone who can debug Chrome wants to tell me why the .xap file request seems to disappear then I’d be much obliged Smile