Silverlight 2 is an awesome platform for development of rich web applications. One issue to be aware of, though, is that some browser features do not extend into Silverlight apps. For example, the Back and Forward browser buttons do not always work as the user may expect with Silverlight apps. The set of browser features you’ll miss in Silverlight apps is pretty much identical to what you’d miss in Flash or AJAX, and some of them are about to be addressed in the Silverlight 3 release.

Let’s go over the affected browser features one by one, and discuss ways of getting them working in Silverlight apps.

Feature 1: Bookmarking and deep linking

Users like to be able to copy the link from the address bar, email it to a friend, bookmark it, or post it on Twitter or Facebook.

A Silverlight app will typically transition between different views without redirecting the user to a different URL. This makes the user experience smooth and polished. As an unfortunate consequence, a user that copies the URL from the address bar or bookmarks the page will not get a link to the current active view, but instead a link to the initial view of the app.

Thankfully, there is a solution in Silverlight. A Silverlight app can modify the “bookmark” section of the URL, which is the part of the URL following the # character. The app can update the URL each time the user transitions to a different view, and read the bookmark on startup. See this article for details on how to implement this.

The Navigation Framework feature in the upcoming Silverlight 3 release will provide an easy-to-use solution to this problem.

Feature 2: Search engine discoverability

If your Silverlight app links to another page, that link is invisible to search engines. As a result, pages on your site that cannot be reached via traditional HTML links will likely not get listed in search results.

The solution is simple: list all pages on your site in an XML document called a Sitemap. Host the Sitemap on your site, and submit the Sitemap link to search engines. Once you do that, the search engines should include all pages on your site in their indexes.

For details, see the Wikipedia article on Sitemaps.

Feature 3: Back and Forward browser buttons

The Back and Forward browser buttons do not work in Silverlight apps. Switching to a different view in a Silverlight app does not insert a bookmark into the browser history, so the user can’t go to the previous view by clicking the Back button.

The problem is similar to the bookmarking issue (Feature 1), except that the solution is more complicated. If the Silverlight app modifies the bookmark part of the URL, the previous bookmark does not get recorded in the browser history, so the user still cannot use the Back button to return to the previous view.

It is in fact possible to get the Back and Forward buttons working. As of SP1 3.5, ASP.NET exposes a History Control that simplifies the solution significantly (see Control Silverlight by Using Browser Back and Forward Buttons). There is a variety of solutions available online in case you are not using ASP.NET 3.5 SP1, but beware that they typically involve hacks that don’t necessarily work in all browsers.

Or, you can wait until Silverlight 3, because browser history is properly handled in the Navigation Framework.

Feature 4: Support of external tools (translation, accessibility, …)

Automated translation, special browsers for people with disabilities, automated RSS aggregating… these are just some examples of useful tools that consume web content. These tools typically process HTML, but don’t peek inside Silverlight applications.

Since HTML is the standard representation of online documents, consider whether it would make sense to expose a simplified version of your content as a simple HTML page, in addition to your Silverlight application.

Feature 5: Printing

Silverlight does not currently have much support for printing. In Internet Explorer 7, Silverlight applications show up on the printout, but in Firefox or Safary they do not.

So, a Firefox or Safari user will not be able to print out the information displayed by your Silverlight application (at least not without taking screenshots, etc).

If you need to support printing, you can try two different solution approaches. If you only need to print content that can be represented using HTML (e.g., no Silverlight-generated charts and such), see this solution. An alternate approach is to convert XAML to an image format on the server.

Feature 6: Open link in new tab

There doesn’t seem to be a very good way to implement the ‘Open link in new tab’ feature in Silverlight. You can use a HyperlinkButton with a Target set to _blank, which seems to open a new tab in Firefox and a new Window in IE 7. But that still won’t allow the user to choose whether to open the page in the same or different tab/window.

If you are committed enough, you can probably implement a HyperlinkButton with a context menu allowing the user to open the link in a new tab/window. Right-clicking is not directly supported in Silverlight, but workarounds do exist.

Or, use hyperlinks sparingly in Silverlight apps.

Feature 7: Find on this page

I use the ‘Find on this page’ feature (CTRL+F) extensively when browsing the web. But, content inside Silverlight apps is not searched by the browser.

A mitigation is to carefully design the app UI in a way that minimizes the user’s need to search. Data should be sortable and searchable in various ways, and important information should be shown prominently (e.g., the user’s own position on a scoreboard should be highlighted).

These are all good practices regardless of your development platform, but unavailability of the ‘Find on this page’ feature makes them even more important.

Conclusion

Hopefully you’ll find these points helpful when designing your next Silverlight application. If you have other tips on extending browser features into Silverlight apps, let me know in the comments!

Tags:

3 Comments to “7 tips for extending browser functionality to Silverlight apps”

  1. jakes says:

    thanks for all of the tips

  2. Aakash says:

    Quote:


    Feature 6: Open link in new tab

    If you are committed enough, you can probably implement a HyperlinkButton with a context menu allowing the user to open the link in a new tab/window.

    Could you guide me as to ow would I open it in a new tab assuming they select open in New Tab? The right click can be handled to create a context menu as given in the post. Though how can it be further used to actually open the link in a new tab?

  3. On right-clicking the hyperlink, I would display a box that contains two hyperlinks, “Open” and “Open in new tab or window”. The “Open in new tab or window” hyperlink will have Target property set to _blank.

    When Target is _blank, the browser gets to decide whether to open a new tab or a new window. From my limited experimentation, Firefox opens a tab, and IE7 opens a window.

    I didn’t actually try doing this, but it seems possible. Or is there some issue that I am missing?

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>