Learn. Connect. Explore.Learn. Connect. Explore.

Mobile push notifications to any client with Azure Notification Hubs

Abhishek Narain

Technical Evangelist

@narainabhishek

Sukriti Sharma

Technical Evangelist

@suksharma

Agenda

• Push Notifications

• Notification Hub

• Tags: Send Targeted Notifications

• Templates

• Manage Devices from your Back-end

• Advanced Scenarios: “Push to sync”, Retargeting

Push Notifications are BIG

Push notification lifecycleRegistration at app launch1. Client app to retrieve PNS Handle (e.g. Channel Uris,

device tokens, registration IDs)

2. Updates back-end

Sending Notification1. Back-end sends notification to PNS

2. PNS pushes the notification to the app on the device

Maintenance1. Delete expired handles when PNS rejects them

Platform

Notification

Service

App back-end

Challenges of push notifications

• Different protocols to PNS’ (e.g. HTTP vs TCP, xml payload vs jsonpayload)

• Tiles vs toasts vs badges

• Maintaining ChannelURI/ RegistrationID/ Token provided by PNS

• Back-end complications (Storage) and Cost

• Scalability

Azure Notification Hubs (advantages)

• X-plat: from any back-end to any mobile platform

• No need to store device information in the app back-end (managed)

• Routing and interest groups

• Personalization and localization

• Broadcast at scale, multicast, unicast

• Telemetry

Using Notification HubsOne-time set up1. Create NH

Register (Client)1. Retrieve PNS Handle

2. Register with NH using PNS Handle

Send Notification1. Back-end sends message to NH

2. NH pushes it to the PNS’

*PNS – Platform Notification Service

*NH – Notifications Hub

APNs WNS

Notification Hub

App back-end

iOS app Windows app

MPNS

GCM

ADM

Case Study

Bing (news, finance, sports, …)

10s

3+ <2

•Client SDKs for• Android – GCM and ADM

• iOS – APNS

• Windows Phone – MPNS

• Windows Store – WNS

•Capable of pushing to specific platform or to all at once

• Server SDKs for• REST API

• .NET

• Node.JS

• Java

Cross-Platform Push

Demo: Get Started

- Portal Demo- Configure your Notification Hub- Connecting your app to the Notification Hub- Send notifications from your back-end

Some snippetsRegister Send

await

[hub registerNativeWithDeviceToken:deviceToken

tags:nilcompletion:^(NSError* error) {…}];

hub.register(regid);

var toast = @“<notification payload>";hub.SendWindowsNativeNotificationAsync(toast);

hubService.wns.sendToastText01(null, {

text1: 'Hello from Node!'},function (error)

{…

});

Send Targeted Notifications

TagsTags as interest groups1. Client app registers with tags

2. Tags are simple strings (no pre-provisioning is required)

3. Back-end can target all clients with the same tag

You can use tags also for• Multiple type of interest groups, e.g.• Follow movie stars: tag “followactor:Rajnikant”

• Follow users: tag “followuser:SachinTendulkar”

• Tags can be user preferences or system information

Notification Hub

App back-end

Tag:”Rajnikant”Tag:”Salman”

Tag:”Rajnikant”

Tags: Example

Some snippetsRegister

await new string[] {"myTag", "myOtherTag"}

[hub registerNativeWithDeviceToken:deviceToken tags:@[@"myTag", @"myOtherTag"] completion:^(NSError* error) {…

}];

hub.register(regid, "myTag“, "myOtherTag");

“How do I read tags from my hub?”• Notification Hubs is not a storage system

• No cleanup needed, expires registrations automatically

• In the device• Every platform provides apps a way to store user information locally or in the

cloud

• E.g. Roaming settings, iCloud

• In your app back-end• Usually stored by user id

• Try not to replicate device information

• Register methods always overwrite tags• Each time you update the channel, overwrite all the tags

• Logic based tag pushed

• Social: “All of this group but me”

• Group:id && !user:id

• Events: “Anyone interested in the game”

• FollowTeam:RealMadrid || FollowTeam:Barcelona || EventInterest:LaLiga

• Time: “@12PM in India send”

• timezone:IST && follows:chinesefood

Tag Expressions

What I will show you

Notification

Class

• Initialize Notif Hub with Hub path and Connection String

• Client registration with tags

• Store and Retrieve Categories in the App’s Local Storage

App.xaml.cs

• In OnLaunched Event, retrieve categories from local storage and request registration for these categories

MainPage.xaml

• Create ToggleSwitch for Categories to Subscribe

• SubscribeButton Click- Check status of Toggle switches and save Tag in local storage

Send Toast

• From Backend Console App

• From Visual Studio

Demo: Tags⁻ Register with Tags

⁻ Push with Tags from Backend

⁻ Send Toast from Azure Portal using Tag Expressions

Notification Templates

Using templates for multi-platform pushRegistration

• Client apps can register with a platform specific template, e.g.

• Windows tablet registers with Windows Store ToastText01 template

• iPhone with the Apple JSON template:{ aps: {alert: “$(message)”}}

Send notification

• App back-end sends a platform independent message: {message: “Hello!”}

Notes

• Multiple templates can be specified for each device

• Each template can have a different set of tags

Notification Hub

App back-end

<toast><visual><binding template=\"ToastText01\"><text id=\"1\">$(message)</text>

</binding></visual>

</toast>

{aps: {

alert: “$(message)”

}}

{message: “Hello!”

}

Hello!

Hello!

Using templates for localizationRegistration

• Client apps can register with personalized templates, e.g. • Windows tablet wants to receive news in English

• iPhone wants Italian

Send notification

• App back-end sends a message including both languages: {news_en: “Hello!”, news_it: “Ciao!”}

Notification Hub

App back-end

<toast><visual><binding

template=\"ToastText01\"><text id=\"1\">$(news_en)</text>

</binding></visual>

</toast>

{aps: {

alert: “$(news_it)”

}}

{news_en: “Hello!”,

news_it: “Ciao!”}

Hello!

Ciao!

Managing devices from your back-end

When to register from your app back-end• To secure Tags

• App back-end can authenticate the user before registering the device

• When back-end has to modify tags• Adding a tag from the web app

• Manager adding an employee to a work group

• Tags are derived from analytics or other user data

Registering from the back-end

Identify your device1. Cannot use ChannelURIs/device tokens/…

2. Keep long-living NH registration ids in device storage

Register1. First time only,

a) Request registration id from hub, and

b) Store it on device storage

2. CreateOrUpdate device registration (@ every app start)

3. Back-end can verify and/or add tags (e.g. performing auth)

Notification HubApp back-end

{id}

upsert({id}, channel, tags)

createId()

Managing devices from your back-end

Back-end driven tag updates

Use a tag to identify user1. Back-end usually refers to users and not devices

2. Register devices with a tag like ‘userid:{id}’

Back-end updates tags1. Retrieve device registration(s) by userid

2. Update tags

Note1. No device information in app back-end

2. Back-end only refers to users

Notification HubApp back-end

getByTag(userid)

update(tags)

Managing devices from your back-end

Advanced scenarios: “Push to Sync”, Retargeting

Push to Sync

Updates app state1. Does not show a message to the user

Example: music app1. User changes playlist on desktop

2. Back-end sends a ‘push-to-sync’ notifications to user’s devices

3. Phone receives push and starts downloading new song

4. User finds the new song already on their phone!

Platform-dependentWindows/Windows Phone (only lock-screen apps)

iOS (only since iOS 7)

Android/Kindle

App back-endNotification Hub

Push to sync

Add new song

Pulling it all together - Retargeting

Send a targeted coupon1. Use tags for user preferences, location, system properties,

timezone, …

2. Target with tag expressions

Push UX & feedback1. Use Rich push & push to sync to provide best UX

2. Contextually report to your app back-end(who tapped, who visited the page, who received it)

Retarget1. (perform analysis on user data)

2. Update tags from your back-end with the new information

3. Send alternative offer to users that did not participate

App back-endNotification Hub

Loc:SF && Food

Update tags

Loc:SF && Food

&& !tapped

CRM/DMP

system

Sending geo-targeted notifications with Windows Azure Notification HubsSome examples are:

• Send coupons to all my customers in Mumbai

• Send notifications of new mortgage rates/open houses in a specific locality

• Notify people in a town/city about a concert they might be interested in

• Notify people in a town/city of a charity/recycling event

Geolocator = new Geolocator();

Geolocator.DesiredAccuracy = PositionAccuracy.Low;

Geolocator.MovementThreshold = 1000; // The units are meters.

Geolocator.PositionChanged += geolocator_PositionChanged; //Callback function

Public void RegisterForNotificationsWithAddress()

{

//Code for registering with Notification Hub with Specific Area Tags

}

//Send the Notification

Telemetry, security, and scale• Telemetry

• Portal dashboard and programmatic access for all outcomes exposed by PNS’.

• Security• Role-based security available to restrict access to hub for:

• Device registration management rights

• Sending rights

• PNS credentials rights

• Scale• Guidance for very high scale depends on specific scenarios

• Any audience <5million devices and <5million pushes per day can use a single hub

Demo: Integration with Mobile Services

Your Feedback is Important

OPTION 3: Feedback stations outside the hall

Fill out evaluation of this session and help shape future events.

OPTION 1 OPTION 2

Replace this space with the

actual QR Code

Follow us online

Facebookfacebook.com/MicrosoftDeveloper.India

twitter.com/msdevindia

Twitter

@narainabhishek

@suksharma