Updating Silverlight.js and Firefox 3

I’m hoping this post will help explain a few things with regard to Silverlight detection scripts that some sites may be using.  This is related to the silverlight.js Javascript file that was deployed with a lot of Silverlight 1.0 applications/sites and is also available as a part of the Silverlight 2 SDK tools.

What the heck is this Silverlight.js you speak of?

Simply put, Silverlight.js is a helper file which enables Web sites to create advanced Silverlight installation and instantiation experiences.  It was a resource file that was initially shipped along side several templates and helper projects to aid in the detection of browsers and platforms and instantiate a new Silverlight application on a web page.  This actually was a method similar to other frameworks that used Javascript to instantiate plugin content to provide for a better user experience in some deployment instances.  When delivering rich internet applications, it is important to provide your users with the most positive experience in installing any plugins they may require.  You can read more about my thoughts about that here in Providing a great Silverlight deployment experience.

Although not generally used for Silverlight 2 deployment now in favor of simply using the <object> tag explicitly, it is still a resource available to site developers should they choose to use it.  It provides some simple functions like checking if Silverlight is installed, and a method to create the HTML output content for when it is (object) and when it is not (HTML content).

So why is it being updated, is something totally wrong?

Not really.  We received feedback on some areas of the file and some scenarios where an enhanced version of certain aspects should be modified.  As an example, after the plugin was installed (by a user who previously did not have Silverlight), the browser had to be refreshed (and in some cases restarted) prior to the Silverlight plugin being able to be used.  This was one area of feedback that we heard and while some script methods surfaced as work arounds, ultimately they ended up being incorporated into this newer Silverlight.js file.

Some of the enhancements provided in this update are:

• Auto-refresh behavior where available, providing WaitForInstallation and onSilverlightInstalled hooks for developers to use.
• Reduced clicks in the default installation badge
• Inproved UI for default badge image (i.e., looks better on all sites)

Although they may seem minor, they help in enabling site owners deliver great deployment experiences.

Great, so where can I get this update?

The updated Silverlight.js file has been available for a while in the Silverlight 2 SDK materials.  However, you have had to download the full Silverlight 2 SDK just to get to the one file you may need.

NOTE: If you have already done this, the file is located in C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Tools path.

Today, we actually made it available on its own without having to download the full Silverlight 2 SDK (but you should really check out Silverlight 2…it’s really great).  Leveraging the MSDN Code Gallery, the Silverlight.js file is now available for download as a stand-alone file at the Silverlight.js Code Gallery project site.  A link to the API documentation and any breaking changes from the previous version are also available there.  What is further great is that it is being released under the Microsoft Public License (Ms-Pl), which means it is available for you to freely modify to your own needs.

I got the file, how and what should I be updating with this new file?

Now that you have the updated file, what do you do with it.  Well, that depends :-).  The simplest answer here is to replace your old Silverlight.js file with this new one.  IMPORTANT: Review the breaking changes documentation to ensure you aren’t using things that may break.  If you never knew you were even using the Silverlight.js file you should generally be safe with a simple replace.  Your old file will likely be sitting in your web application and named Silverlight.js…just copy this file over that one (I’d recommend backing up your old one just in case).

There may be other areas where you want to update the file so that you don’t have to update the file to begin with.  Now, please note this is a suggestion from me and likely ‘unsupported’ but I feel pretty safe about updating these templates.   Here are some suggestions:

Visual Studio 2005 Project Templates

If you are using VS2005, you probably downloaded the Silverlight 1.0 SDK which installed some VS2005 project templates for your creating Silverlight 1.0 applications.  Look for the template file in C:\users\(username}\Documents\Visual Studio 2005\Projects\Templates\ProjectTemplates\Silverlight\SilverlightJSApplication.zip.  This is the path on Vista, but the user path is slightly different on Windows XP (c:\documents and settings…etc.).  If you open that archive you’ll see the Silverlight.js file there.  Now, please note this is a suggestion from me and likely ‘unsupported’ but I feel pretty safe about updating this template.  Simply use your favorite archive tool to open the template file and replace the Silverlight.js file with the new one.  Now when you choose File…New…Silverlight Javascript Application in Visual Studio 2005 you’ll have the updated Silverlight.js file already!

Visual Studio 2008 Project Templates

NOTE: These actually shouldn't need updating if you are using the latest Silverlight 2 Beta 2 SDK tools...the templates already have the update in them.

If you are using VS2008 you are likely using Silverlight 2 development (which the project templates do not use Silverlight.js), but there actually is a Silverlight Script Web project type for still working on 1.0 projects.  The location of that template is C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\ProjectTemplates\Web\{language}\1033 where language is both CSharp and VisualBasic (there is a template for both).  Within this folder is an archive file called SilverlightScriptWeb.zip which is the template file.  If you open that archive you’ll see the Silverlight.js file there.  Simply use your favorite archive tool to open the template file and replace the Silverlight.js file with the new one.  Now when you choose File…New Web Site…Silverlight Script Web in Visual Studio 2008 you’ll have the updated Silverlight.js file already!

Expression Encoder Output Templates

All of the Expression Encoder media output templates use this file.  This process is a bit more time because there are more templates than just two.  Navigate to C:\Program Files\Microsoft Expression\Encoder 2\Templates\en to see the templates.  If you have Encoder 1 installed the path will be different slightly in C:\Program Files\Microsoft Expression and might be called Media Encoder depending on what version you have (but you really should get Encoder 2, it rocks).  In each of those template folder you’ll see the Silverlight.js file there.  Again, I’d recommend backing this up ‘just in case’ before making any changes.  Since none of these are in an archive folder, you can copy/paste the file into each of the template folders.  If you have Powershell installed you can navigate to the run this command (nod to ScottHa for the help):

   1: dir . silverlight.js -recurse |% { copy c:\foo $_.FullName  }

obviously replacing {c:\foo} with the location of where you downloaded the updated Silverlight.js file.  One note here is that the Encoder templates included an obfuscated/compressed version of Silverlight.js.  The new one is not compressed/obfuscated and you should test your templates to ensure everything works.

Does this fix any Firefox 3 issues?

It’s important to note that Firefox 3 is not currently a supported browser for Silverlight.  At the time of release of Silverlight 1.0, Firefox 3 was not a released product.  And right now Silverlight 2 is still in beta as well.  We intent on making Firefox 3 a supported browser when Silverlight 2 releases this year.

That said the updated file will likely fix one problem with Firefox 3 visiting sites that use Silverlight.js.  Using the old file, visitors using Firefox 3 would see an image asking them to install Silverlight even though they already had it installed.  We’ve made some updates to the isInstalled method to cover the Firefox 3 scenario so this won’t happen.

You can see an example I put up on my server by visiting the same Silverlight application using the old script or the new script.  The only difference between these two is a cut/paste of Silverlight.js.

OLD:

NEW (replacing only silverlight.js):

Attention site owners:  If you are seeing information from your users or haven’t tested your Silverlight applications in Firefox 3, please do so and update to the latest Silverlight.js file if you are using the old one.  Visitors, if you see sites that are displaying the ‘install Silverlight’ badge and you have Silverlight installed, you can try to contact them and refer them to this post…or leave a comment here as well.  Yes, I know some Microsoft sites need this update as well, we’re working on getting the site owners to update as well!

I saw a link about Silverlight.supportedUserAgent.js as well, what is that?

This file is an optional add-on for Silverlight.js. It adds Silverlight.supportedUserAgent function which determines if the user's browser is supported by Silverlight.  This is not included in the base because supportedUserAgent is highly dependent upon the current Web browser implementations.  Because browsers evolve, this file would need to be updated more frequently than Silverlight.js.  If you need this functionality, you’ll want to check back often to get any updates.  The supportedUserAgent file has a Code Gallery project site as well.

I hope this helps clear up some confusion and provide some pointers where you might want to update.  If you have any questions, leave a comment and I’ll do my best to answer!