Web Application Template Push Notifications

Web App Template

The Web Application Template (WAT) is a great way to create a presence in the Windows App Stores if you already have a suitable web application. It provides a native application wrapper which provides code to hook your web app into platform features. These features are exposed via a JSON configuration file making it extremely easy to get up and running quickly. After installing the WAT you can create a Universal WAT app - which can be submitted to the Windows and/or Windows Phone Stores - via a template in Visual Studio.

For further information please see http://wat.codeplex.com and a video introduction here http://channel9.msdn.com/Shows/Web+Camps+TV/Building-Windows-8-Applications-with-HTML5-and-Web-App-Template.

Essentially, your web app is hosted inside a web control and the platform features are ‘plugged-in’ using javascript to provide a communication bridge between the native app (which is also written in javascript) and your web app. You can plug in live tiles, native app and navigation bars, sharing, etc. and you can easily modify the css of the running page to tailor the app experience.

Push Notifications

I will go through a step-by-step of how to set up and use push notifications with the Microsoft Web App Template (WAT). The WAT supports Azure Notification Hubs which provide an easy-to-use infrastructure that enables you to send mobile push notifications from any backend (in the cloud or on-premises) to any mobile platform. In order to set up your notification hub you will need an Azure account; go here https://azure.microsoft.com and sign up for a free trial if you don’t have an existing account set up.

You will need to create a service bus namespace and from their create a new notification hub

I followed the instructions here http://azure.microsoft.com/en-us/documentation/articles/notification-hubs-windows-store-dotnet-get-started/ to configure my windows store app and also my azure notification hub. I will just set this up for a Windows Store app; assuming the process is similar for Windows phone (and other platforms). I did wonder at first whether I needed to submit my app to the store to have it receiving notifications but that isn’t the case you just need to register the app with the service so you can get the SID as described at the link above.

Once you have the SID and have associated your app with the store you can set up the WAT config file to register the app with the service. My completed config looked like this (with the secret key removed :)). The WAT app has code to register with the notification hub so we should be nearly done.

1. "notifications": {
2.     "enabled": true,
3.     "azureNotificationHub": {
4.         "enabled": true,
5.         "endpoint": "https://peted70.servicebus.windows.net/",
6.         "secret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
7.         "path": "wat-push",
8.         "tags": [
9.             "watdemo"
10.         ]
11.     }
12. },

You also need to set your Windows Store app to be Toast Capable; this is a setting in the package manifest.

After configuring all of this I was beginning to wonder what I would do if it didn’t work! Luckily, the Azure portal has a Debug tab which allows sending test push notifications. I tried it out and you can see the result below:

There is a REST API to use to send notifications or you can use the Nuget package here http://www.nuget.org/packages/WindowsAzure.ServiceBus/. Either way, it’s straightforward to send the notifications see here for an example console app.