How to send push notifications for Windows Phone 8 using PHP

In the last post of this series I gave an introduction about how one could send and receive push notifications in Windows Phone 8. In this post I am going to discuss toast notifications. There are three parts to this tutorial.

  • Sending a push notification
  • Setting up a client to receive toast notifications
  • Receiving toast notifications

Sending a push notification

We need a webpage that sends a toast notification by using the URI that is returned when the push channel is created on the device. The MSDN website explains how this can be done using ASP.NET but in this tutorial I will be using PHP to setup a push notification system on a server. You will be needing a domain and hosting to setup your notification service on the server. If you don’t have any website then sign up for free on 000webhost.com and get free domain and hosting. They provide hosting absolutely free, there is no catch. You get 1500 MB of disk space and 100 GB bandwidth. They also have cPanel control panel which is amazing and easy to use website builder. Moreover, there is no any kind of advertising on your pages.

Follow these steps to setup a service

Step 1. Add a database table to store the URIs

You will need a database table. From the cpanel of your hosting account add a new MYSQL database and assign a user with all privileges to it. I use a godaddy account but your cpanel will also have similar options.

1

Once you create a database, add a new/existing user who can manage that database.

 

wp_ss_20140701_0001

Now open phpmyadmin from cpanel and login. You will need to create a new table in the database `windowsapptutorials`. My table’s structure is shown below for reference.

 

3

 

Step 2. Add a file in file manager to connect to this database

Go to your file manager using cpanel and browse to public_html folder in it. Create a new directory in it and add a new file to it. Name the file config.php. This script will be used to connect to your database.

Step 3. Add a file to register new URIs

Our client app will send us a request with a notification URI (we call it GCM id) and we need to save it in our databases so that we can send notifications to it later. Create a file userid.php which will take a $_GET request containing the URI and add it to the database. It will also return the user id to be used by the client for updating URI for a device.

  • The script queries the database to get the last inserted user id which is of the form user<id_no> and finds its substring to get <id_no>
  • It increments the <id_no> and gets an encoded gcm id (URI) from the URL.
  • It then inserts a new record in the database for the incremented user id along with the gcm id provided
  • Finally it echoes the incremented userid which the client app saves locally in its isolated storage.

Step 4. Add a file to update existing URIs

The notification URI keeps changing every few days and you will need to update the existing URIs to continue sending messages to the client app. For this purpose let us create another file updategcm.php which will take $_GET parameters userid and new gcm id (new URI) and update the URI corresponding to that userid in our database.

Step 5. Add the PHP script to send push notifications

You would have heard about Rudy Huyn, the famous Windows Phone developer. He wrote a PHP script to send push notifications to windows phone 8. Here’s the project on codeplex project link. Just visit this link and download the windowsphonepush.php file. Add this file to the same folder where you have placed other PHP files created above.

https://phpwindowsphonepush.codeplex.com/SourceControl/latest#windowsphonepush.php

  • You can send toast notifications, tile notifications or raw notifications using windowsphonepush.php.
  • push_toast function sends a toast notification with title and subtitle
  • push_tile function sends a tile update with count, title and background image.
  • push_raw function sends a raw notification which is displayed in a message box
  • push_delay values specify the delay with which the notification should be delivered. The introductory article of this series had a table of values for different delay times.

 

Step 6. Add a file sendmessage.php to send notifications to your app

Lastly add a PHP script that will select all URIs from the database and send notifications to it. This PHP file has windowsphonepush.php included to it.

  • This script file fetches all the notification URIs from the database and sends a push notification to each one of them
  • This script also has a custom toast message which will be sent to the client’s app. You could make a form for this purpose otherwise it would not be convenient to edit this php file again and again

Web Hosting

In app toast notifcations using Toastinet in Windows Phone 8

Toastinet is a simple control that imitate a toast notification in Windows Phone. Developers would know that toast notifications don’t show up when the app is open. So you can imitate a toast using Toastinet. These days many apps like Facebook Messenger, Whatsapp, Twitter use in app toasts. It is available for download on Nuget and quite simple to implement. I am going to try it for the first time. I am also going to blog about it as I implement it in a sample application.

It is available at codeplex. Check it out for source code, documentations and discussions.

https://toastinet.codeplex.com/

Step 1. Create a new Windows Phone 8 app `Toastinet Test`

First things first, let us create a new Windows Phone 8 app and name it Toastinet Test

 

Step 2. Go to Nuget Package manager and install Toastinet

Search for Toastinet in Nuget Package manager and add it to your project. Here’s an article explaining how you could integrate a toolkit or third party SDK using with your Windows Phone app using Nuget Package Manager.

 

Step 3. Add a reference to the assembly for Toastinet

Add an assembly reference for using Toastinet in your XAML

xmlns:toastinet=”clr-namespace:Toastinet;assembly=Toastinet”

Step 3. Add the code below to add toasts in your page

Just below the Layout root add the code for toastinet. We also add a button to trigger toast notification in our app. There are lots customizations to personalize the toast notification. First we try the basic toast. This is how the main page of the app looks. The code for toasts is also embedded below.

 

 

  Step 4. Add the click event handler for Trigger toast button This will simply display a toast notification when clicked. You just have to set the Message property of the Toast control to see the toast appear. this.Toast2.Message = “This is a basic toast”;   The code behind looks something like this.  

That’s all we need to do. Let run it in the emulator and see the results. It doesn’t look very pretty but at-least it works.

I tried a few customizations and the results were quite good. I have managed to get in app toasts similar to standard toasts. Here’s the code that would be needed. I even hid the system tray to make it look even better. There are various animations to choose from to get different toast effects.

 

 

Toastinet also supports various event handlers. I tried the tap event handler to navigate to a different page. It worked smoothly and you need to add an event trigger just as you would do with any other control. For the record, it took me just 48 minutes to implement and simultaneously blog about it.

Here’s the full source code of the tiny project

Download full source code Toastinet-Test.zip

How to send and receive push notifications for Windows Phone 8 – Introduction

You can setup your apps to receive push notifications from a web-service and update its live tile, display a toast notification or a raw notification. Firstly your app needs to be registered for receiving push notifications and then a web service (or even an app capable of sending messages to Microsoft Push Notification Service). MSDN describes its push notification service as

“The Microsoft Push Notification Service in Windows Phone is an asynchronous, best-effort service that offers third-party developers a channel to send data to a Windows Phone app from a cloud service in a power-efficient manner.”

The diagram (taken from MSDN) shows how a push notification is sent.

  1. Your app requests a push notification URI from the Push client service.
  2. The Push client service negotiates with the Microsoft Push Notification Service (MPNS), and MPNS returns a notification URI to the Push client service.
  3. The Push client service returns the notification URI to your app.
  4. Your app can then send the notification URI to your cloud service.
  5. When your cloud service has info to send to your app, it uses the notification URI to send a push notification to MPNS.
  6. MPNS routes the push notification to your app.

 

Note: It is recommended that your web-service should be authenticated and use a secure channel. Heres how you could set up an authenticated web-service. Later on we will show how to create a web-service using PHP but not ASP.NET.

To send push notifications your app/ web-service should do the following

  • For each Windows Phone device a POST message should be created
  • There are different formats for toast, tile and raw notifications. Construct a message accordingly (which will be describe later in the post). Downgrade your message for windows phone 7 by removing fields that are not supported
  • Post the messages to push notification service
  • Get the response from MPNS and respond accordingly

You can have 3 different types of notifications in your app

Toast

A toast notification displays for about 10 seconds unless the user dismisses it with a flick to the right. If the user taps the toast, by default, your app’s start screen launches.

Tile

A Tile is an image that represents your app on the Start screen. Windows Phone 8 supports three Tile templates: flip, iconic, and cycle.

Raw notifications

They are notifications that appear while the app is running.

Custom HTTP Headers

Custom HTTP headers can include a notification message ID, batching interval, the type of push notification being sent, and the notification channel URI.

  • The MessageID is the notification message ID associated with the response. If this header is not added to the POST request, the push notification service omits this header in the response.

For example: XMessageIDUUID

  • The NotificationClass is the batching interval that indicates when the push notification will be sent to the app from the push notification service. 

For example: X-NotificationClass: 1

  • The Notification Type is the type of push notification being sent. Possible options are Tile, toast, and raw. If this header is not present, the push notification will be treated as a raw notification.

For example: X-WindowsPhone-Target:toast 

Push notifications batching intervals

The batching interval describes the values different types of notifications could take for various types of delivery times.

Time/Type Toast Tile Raw
Immediate delivery 2 1 3
Delivery within 450 seconds 12 11 13
Delivery within 900 seconds 22 21 23

 

Special characters

The following characters should be encoded while using in XML

In the next few posts I will explain how to integrate tile, toast or raw notifications in your windows phone app.