Adding Toast Notification to your new Windows Universal App created from an existing web app.

Adding Toast Notification to an App is very common requirement. In one our previous post you have seen How to create a universal windows app form the existing web app. In this post lets see how to add the toast notification to the web app which gets triggers only when the web app is used as an universal windows app.

So at very first, follow these steps  ( Creating a Windows Universal App from your existing Web Sites using Visual Studio 2015  ) to create your universal app.

Adding Toast notification requires the following step.

Step 1: Add a method toastNotification in the JavaScript files.

create an java script method toastNotification and add the JS file to the HTML page.

function toastNotification(toastNotificationData) { }

Step 2: Check whether the app runs as universal windows apps.

Check for the condition whether the web app run as a universal windows app. If this condition is set to true then only access the windows specified API to send the notification.

if (typeof Windows !== 'undefined' &&    typeof Windows.UI !== 'undefined' &&    typeof Windows.UI.Notifications !== 'undefined') { }

Step 3: declare the name space.

In order to use the toast notification API we need to declare Windows.UI.Notifications namespace

var notifications = Windows.UI.Notifications;

Step 4: Select an toast notification template.

In this sample I have chose toastImageAndText02  template, which requires one image and one title string and one description string.

var template = notifications.ToastTemplateType.toastImageAndText02;

var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

Step 5: Set the text to be displayed in the Title and in the notification.

Set the title text to be displayed.  In this sample i have used “daily .net tips” as the title of the toast notification.

var toastTextElements = toastXml.getElementsByTagName("text");

toastTextElements[0].appendChild(toastXml.createTextNode("daily .net tips"));

The description string can be a dynamic text, which you wanted to display as a toast in your application. In this sample I am using displaying a toast whenever a new post id published.

toastTextElements[1].appendChild(toastXml.createTextNode(toastNotificationData));

Step 7: Set the image for the toast.

Setting an image to the toast gives a much more visual feed back to the user. As this image will not appeared when the toast displayed in windows phone.

var toastImageElements = toastXml.getElementsByTagName("image");
toastImageElements[0].setAttribute("src", "https://dailydotnettips.com/wp-content/uploads/2013/08/DailyDotNETTips.png");

toastImageElements[0].setAttribute("alt", "daily .net tips");

Step 8:  Creating the toast notification based on the XML content and sending it.

Now the toast XML content is created and we need to send the notification to the user.

var toast = new notifications.ToastNotification(toastXml);

var toastNotifier = notifications.ToastNotificationManager.createToastNotifier();

toastNotifier.show(toast);

Duration and audio to the toast are addition features which can be added.

now the final code looks like the following.

function toastNotification(toastNotificationData)
{

if (typeof Windows !== 'undefined' &&    typeof Windows.UI !== 'undefined' &&    typeof Windows.UI.Notifications !== 'undefined') {

var notifications = Windows.UI.Notifications;

var template = notifications.ToastTemplateType.toastImageAndText02;var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);var toastTextElements = toastXml.getElementsByTagName("text");toastTextElements[0].appendChild(toastXml.createTextNode("daily .net tips"));toastTextElements[1].appendChild(toastXml.createTextNode(toastNotificationData));

var toastImageElements = toastXml.getElementsByTagName("image");
toastImageElements[0].setAttribute("src", "https://dailydotnettips.com/wp-content/uploads/2013/08/DailyDotNETTips.png");toastImageElements[0].setAttribute("alt", "daily .net tips");

var toast = new notifications.ToastNotification(toastXml); var toastNotifier = notifications.ToastNotificationManager.createToastNotifier(); toastNotifier.show(toast);  }

}

Now when the user opens the page in the browser then he will not be able to trigger the notification. But when the page is opened by using a universal windows apps, then the toast gets displayed.

Hope this post might have helped in creating a toast notification for the existing web app.