How to Configure & Send FirefoxOS Push Notifications using PushSharp

This is a step by step guide that will show you how to setup your FirefoxOS app to receive push notifications from your server.

For privacy purposes, Mozilla does not allow payload when sending notifications. Push notifications are sent to tell the application to sync data from the server. It's more like GCM send-to-sync.

In order to get started, we're going to use the FirefoxOS boilerplate.

As described in the Mozilla Developer Network, push notifications works like follows :

#Step 1 Create two buttons in the index.html file. One for registering the device to get an endpoint from Mozilla servers. This endpoint will be used to communicate with the device.

Next we attach two click handlers, one for each button.

Now we need to subscribe in order to get an endpoint that allows communication with the device. To do so, in the js/webapp.js file we do the following :

// Push Notifications
var registerPush = document.querySelector('#register-push');

if (registerPush) {
	registerPush.onclick = function () {
		if (!navigator.push)
			return alert('Push notifications are not supported !');

		var request = navigator.push.register();

		request.onsuccess = function () {
			console.log(request.result);
		}

		request.onerror = function () {
			alert('Error getting a new endpoint !');
		}
	}
}

Here of course we're going to log the returned endpoint to the console. In a real world app, the endpoint should be sent to your notification server.

#Step 2

In this step, we're going to set the application behavior when receiving a push notification. In this case, the system should create a notification and when clicking on it the application should open.

navigator.mozSetMessageHandler('push', function () {
	var notification = new Notification('Got a notification from the server !', { body: 'Hi there !' });

	notification.addEventListener('click', function () {
		var request = window.navigator.mozApps.getSelf();

		request.onsuccess = function () {
			if (request.result)
				request.result.launch();
		}
	});
});

#Step 3 Now we have our application ready to receive the push notifications, we need to fire a notification. For that, we're going to write a simple console application that uses PushSharp.

PS : In the time of writing the article the NuGet package does not support FirefoxOS. So, you need to download the source, compile it and you're good to go.

class Program
{
	static void Main(string[] args)
	{		
		// Create our push broker
		var push = new PushBroker();

		// Wire up the events for all the services that the broker registers
		push.OnNotificationSent += NotificationSent;
		push.OnChannelException += ChannelException;
		push.OnServiceException += ServiceException;
		push.OnNotificationFailed += NotificationFailed;
		push.OnDeviceSubscriptionExpired += DeviceSubscriptionExpired;
		push.OnDeviceSubscriptionChanged += DeviceSubscriptionChanged;
		push.OnChannelCreated += ChannelCreated;
		push.OnChannelDestroyed += ChannelDestroyed;
		
		// Read endpoint url
		var endpoint = Console.ReadLine();
		
		// Register 
		push.RegisterFirefoxOSService();

		// Push the notification
		push.QueueNotification(new FirefoxOSNotification()
                .ForEndpointUrl(new Uri(endpoint))
                .WithVersion("1"));

		Console.WriteLine("Waiting for Queue to Finish...");

		//Stop and wait for the queues to drains
		push.StopAllServices();

		Console.WriteLine("Queue Finished, press return to exit...");
		Console.ReadLine();			
	}
}

#Step 4

Now, let's see some results.

1- Launch the application on the FirefoxOS simulator
2- Register the application
3- Grab the endpoint from the debugging console
4- Launch the C# console application (Enter the endpoint)
5- Push it !

###Resources Firefox OS Simulator - Using Firefox App Manager (For Debugging)
FirefoxOS Boilerplate
Simple Push APIs