Quickstart: Adding push notifications for a mobile service (JavaScript backend)

  • Article

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

This Quickstart walks you through enabling push notifications in a Windows Store app using Azure Mobile Services. Mobile Services makes it easy to send push notifications to your app by using the Windows Push Notification Services (WNS). To learn more, see the Mobile Services dev center. Microsoft Visual Studio 2013 makes it easy to enable push notifications in your Mobile Services app. This topic builds on the previous topic Quickstart: Adding a mobile service (for C++, Quickstart: Adding a mobile service using C++). When you are done, you will have added push notifications to your new mobile service and tested the app by sending a new notification.

This Quickstart applies to mobile services that use the JavaScript backend. If you are using the .NET backend, see Get started with push notifications in mobile services.

Prerequisites

Add and configure push notifications in the app

First, you use the Add Push Notification wizard in Visual Studio 2013 to register your app with the Windows Store, configure your mobile service to enable push notifications, and add code to your app to register a device channel.

Note  This topic assumes that a mobile service connection has already been added to the project, which was done in the previous topic. When a mobile service has not been connected, the Add Push Notification wizard creates this connection for you.

 

  1. In Visual Studio 2013, open Solution Explorer, right-click the project, click Add then Push Notification.... This starts the Add Push Notification Wizard.

  2. Click Next, sign in to your Windows Store account, then supply a name in Reserve a new name and click Reserve. This creates a new app registration in the Windows Store.

  3. Click the new registration in the App Name list, then click Next.

  4. Select the mobile service that you created when you completed Quickstart: Adding a mobile service or Quickstart: Adding a mobile service using C++, click Next, then click Finish. This configures your mobile service to work with Windows Push Notification Services (WNS) to be able to send notifications to your app.

    Note  When your app isn't already configured to connect to the mobile service, the wizard also completes the same configuration tasks demonstrated in Quickstart: Adding a mobile service.

     

  5. (Optional) Expand Services, Mobile Services, your service name, and open the generated code file. (In a C++ project, this file is named PushRegister.cpp.) Inspect the UploadChannel method (in C++, the AcquireAndUpdatePushChannel member function) that obtains the installation ID and channel for the device and inserts this data into the new channels table. This table was created in your mobile service by the Add Push Notification wizard. A call to this method was also added by the wizard to the OnLaunched event handler in the App.xaml.cs, App.xaml.vb, or App.xaml.cpp code file. This ensures that registration of the device is attempted whenever the app is launched.

  6. (Optional) Examine the code in the file notifyallusers.js. Visual Studio does not add notifyallusers.js to the project, because it is part of the mobile service backend. The file appears in Server Explorer under the node for your mobile service. The code is a custom API associated with your mobile service, and when run, it sends a push notification to client apps that are registered for push notifications.

    exports.post = function(request, response) {
    response.send(statusCodes.OK,{ message : 'Hello World!' })

    // The following call is for illustration purpose only
    // The call and function body should be moved to a script in your app
    // where you want to send a notification
    sendNotifications(request);
};

// The following code should be moved to appropriate script in your app where notification is sent
function sendNotifications(request) {
    var payload = '<?xml version="1.0" encoding="utf-8"?><toast><visual><binding template="ToastText01">' +
        '<text id="1">Sample Toast</text></binding></visual></toast>';
    var push = request.service.push; 
    push.wns.send(null,
        payload,
        'wns/toast', {
            success: function (pushResponse) {
                console.log("Sent push:", pushResponse);
            }
        });
}

    The payload variable represents the XML for a certain type of toast notification that Windows Store apps use. For a complete description of the toast notification templates, see The toast template catalog.

  7. Use CTRL+F5 on the keyboard, or Debug > Start without Debugging from the menu to run the app and verify that a notification is immediately received from the mobile service.

  8. (Optional) Use ALT+TAB keys to return to Visual Studio without closing down your app. If you want to test your app's response to push notifications by sending notifications interactively from Visual Studio, follow the steps in How to send push notifications from Visual Studio.

Summary and next steps

Now you know how to use Mobile Services to add push notification capabilities to your Windows Store app.

Next, consider learning how to use Mobile Services to add the following functionality to your apps:

Schedule recurring jobs in Mobile Services

Work with server scripts in Mobile Services