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

  • Article

This Quickstart walks you through enabling push notifications in a 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. As long as you have a 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. When you are done, you will have added push notifications to your new mobile service and tested the app by sending a new notification.

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) Open the generated YourMobileService.push.register.js code file and inspect the code. This code ensures that registration of the device is attempted whenever the app is activated, and includes a call to the notifyallusers custom API.
  6. (Optional) In Server Explorer, expand Mobile Services, your service name, and open the notifyallusers.js file. This file, which is stored in your mobile service, contains JavaScript code that sends push notifications to all registered users.
  7. Press the F5 key to run the app and verify that a notification is immediately received from the mobile service.

Update the generated push notification code

The Add Push Notification wizard adds code that triggers a test notification to all registered users. While this makes it easy to demonstrate a notification when the app is run, this is not generally a meaningful scenario. As such, you will remove the call to notifyallusers and replace it, with some changes, with code that sends a notification to all registered devices when a insert is made in theTodoItem table.

  1. In Server Explorer, expand Mobile Services, your service name, then notifyallusers.js. It contains code that sends a push notification. Note  The code that sends a push notification can be included in any registered script file. The location of this script depends on how the notification is triggered. Scripts can be registered against an insert, update, delete or read operation against a table; as a scheduled job; or as a custom API. For more information, see Work with server scripts in Mobile Services. In this case, this code is moved to the script file registered against the insert operation into the TodoItem table.

     

  2. Expand the TodoItem table, open the insert.js file and replace the current insert function with the following code, then save your changes:

    function insert(item, user, request) {
// Define a payload for the Windows Store toast notification.
var payload = '<?xml version="1.0" encoding="utf-8"?><toast><visual>' +    
    '<binding template="ToastText01">  <text id="1">' +
    item.text + '</text></binding></visual></toast>';

request.execute({
    success: function() {
        // If the insert succeeds, send a notification.
        push.wns.send(null, payload, 'wns/toast', {
            success: function(pushResponse) {
                console.log("Sent push:", pushResponse);
                request.respond();
                },              
                error: function (pushResponse) {
                    console.log("Error Sending push:", pushResponse);
                    request.respond(500, { error: pushResponse });
                    }
                });
            }
        });
}

    When you save changes to the insert.js file, a new version of the script is uploaded to your mobile service.

    Now, when you insert a new TodoItem, a new push notification is sent immediately back to the device that made the insert request.

  3. In Visual Studio, press the F5 key to run the app.

  4. In the app, type text in Insert a TodoItem, and then click Save. Notice that a notification is immediately sent back to the device after the insert has been made in the table in Azure.

  5. (Optional) Run the app on two machines at the same time, and repeat the previous step. Verify that the notification is sent to all running app instances.

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 Authenticate users by using Microsoft Account, Facebook, Twitter, or Google identity providers. For more information, see Get started with authentication.

Schedule recurring jobs in Mobile Services

Work with server scripts in Mobile Services