Windows 8 Metro Style App – Simple WNS Push Notification

I’ve been asked a couple of times about this so I thought I’d write up a simple way in which you can deliver a push notification to a Windows 8 Metro style app for testing purposes. There are other/better ways involving the Windows Azure Toolkit which would give you a lot more but here’s a simple way of getting started.

Firstly, if you’re not involved in an application that’s in the Store then you need to go and visit the following site to register the app;

https://manage.dev.live.com/build

This is well documented on the site but you need to setup a new app by copying from your project’s application manifest;

image

onto the web page;

image

The page then comes back with 3 pieces of information which I’ve scribbled on a little in the picture below;

image

You take the top one of these and drop it back into your package manifest;

image

Now you need some code in order to have a channel URI for receiving notifications. Here’s the most basic JS code I could come up with to set that up;

       var PushNotifications = Windows.Networking.PushNotifications;
        var promise = PushNotifications.PushNotificationChannelManager.createPushNotificationChannelForApplicationAsync();

        promise.done(
            function (channel)
            {
                console.log(channel.uri);
            }
        );

that then gives you a URI and along with the previously obtained “Package Security Identifier (SID)” and “Client Secret” that’s all I need to contact the Windows Notification Service and send a notification.

The details of how to do that are documented here but what I’ve tended to do is to make use of a simple WPF app that I put together months ago purely for testing this out. I’ll include the source code for it at the end of the post. It was put together very quickly in the past.

The app looks like this;

image

Sure it’s a mess 🙂 but the basic idea is;

  1. Paste in your client ID from the website.
  2. Paste in your Client Secret from the website.
  3. Hit TAB to make sure that you lose focus (sorry!) and hit the “Authenticate” button.
  4. Paste in the notification URL that your code got when it ran and got a URL.
  5. Set the type of notification that you want.
  6. Change the XML data if you like.
  7. Hit the “Notify Metro App” button.

And that’s works for me. Naturally, in the real world you wouldn’t notify your users by asking them to send you all of their channel URI’s on a daily basis and then pasting them into this app – you’d use some kind of service that can talk to the WNS service but then you know this already 🙂

Here’s the bits of the WPF app for download – buyer beware on this one as it was put together in a hurry a while ago.

Download