How to handle WNS (Push Notifications) in UWP with WinJS

Question

I have coded an app with WinJS and that's ok. But I need to send push notifications (like toast) to this app. Server side in PHP it's ok and tested on a Apache Cordova app (Android and Windows Phone 8.1).

But in UWP Windows 10 app with WinJS I don't know how to handle the WNS responses/calls and notificate the user (in Cordova, I have used a plugin Phonegap Push-Notifications and it's very easy because the plugin implements all tasks and handlers).

Answer 1

Just simple...

Create a backgroundTask.js with the code:

(function () {
        "use strict";

        var backgroundTaskInstance = Windows.UI.WebUI.WebUIBackgroundTaskInstance.current;
        var taskName = backgroundTask.task.name;

        function doWork() {

            var notificationContent = backgroundTaskInstance.triggerDetails.content;

            close();
        }

        doWork();
    })();

Then, declare var pushNotifications = Windows.Networking.PushNotifications; on your default.js Create a function (standalone or into a Namespace)...

registraTaskPush: function (){
        var taskRegistered = false;
        var exampleTaskName = "Push";
        var iter = background.BackgroundTaskRegistration.allTasks.first();

        while (iter.hasCurrent) {
            var task = iter.current.value;

            if (task.name === exampleTaskName) {
                taskRegistered = true;
                break;
            }

            iter.moveNext();
        }
        if (taskRegistered != true) {
            var builder = new Windows.ApplicationModel.Background.BackgroundTaskBuilder();
            var trigger = new Windows.ApplicationModel.Background.PushNotificationTrigger();

            builder.name = exampleTaskName;
            builder.taskEntryPoint = "js\\bgTasks.js";
            builder.setTrigger(trigger);

            var task = builder.register();
        }
        var channel;

        var channelOperation = pushNotifications.PushNotificationChannelManager.createPushNotificationChannelForApplicationAsync();

        return channelOperation.then(function (newChannel) {
            channel = newChannel;
            $.ajax({
                url: 'url/save/channel/in/database', type: 'POST',
                data: { 'r': channel.uri, 'tp': 'windows' }
            });

        },
            function (error) {
               console.log('Error: '+error);
            }
        );
        channel.addEventListener("pushnotificationreceived", onPushNotification, false);
    }

Then...call the "registraTaskPush" function on your default.js after activation of the app. "registraTaskPush" function implements the channel call to WNS and send to a server the channel URL to save on a database. When the notification is started by server, the database returns all WNS URL's stored to code navigate between this URL's and send push for all.

In addition, "registraTaskPush" register the background task to Windows System, to receive push notifications even the app is closed.