As someone who uses a few iOS devices around the house, I’ve become fond of visiting sites and seeing a little banner that lets me know that a native app is available for the web app I’m using. This concept was introduced in iOS 6 and called “Smart App Banners” in the developer documentation. You may have seen them as well
I wanted to provide the same affordance for Windows Store apps and recalled there are already two ways to integrate the web app browsing experience with the native app in the Windows Store:
- Linking to your app
- Connect your web site to your Windows Store app
- High quality visuals for Pinned Sites in Windows 8
And that’s what I did: https://github.com/timheuer/jquery.smartbanner
With a few more conditional checks, if you put this in your web app/site now you’ll get it automatically linked to your Windows Store app if you have the correct meta tags. For the implementation for Windows Store apps I’ve made some assumptions about the meta tags used. The following would get you a good experience:
If you have the combination of linking your app using the msApplication-ID and msApplication-PackageFamilyName values and the pinned sites high fidelity msApplication-TileImage value to deliver the combined experience. If you have all these, then the banner “just works” for you.
NOTE: Because the Microsoft documentation mixes msApplication and msapplication (note the casing on the “A”), you should use the capitalization (which is more consistent in the documentation) for ensuring it all works smoothly.
Now some may use a different pinned site TileImage than that of what they may use for the app tile, however this can also be overridden in the options:
When done the web app/site would display a dismissable banner (using Hulu as an example here) on a machine running Windows 8:
NOTE: While the ‘View in Store’ button works in IE, Safari and Firefox it does not work in Chrome. I’m not sure what any timeframe it would be for Chrome to support the store launch protocol.
Anyhow, I thought this might be a useful addition to app developers web apps that have a Windows Store app counterpart (and perhaps already have an iOS and Androi counterpart as well). I’ve submitted a pull request to the project I forked from, but you can get it from my GitHub repository for jquery.smartbanner.
Hope this helps!
Please enjoy some of these other recent posts...