Matt HidingerProgram ManagerOSG Notifications2-523

Getting your app tapped

(by making amazing live tiles)

2-523

Live Tiles are just Notifications

Notifications are important, but finding the right delivery mechanism is key.

Tiles offer a unique, unobtrusive way to satisfy the info-snacking urge.

Users want the right notification, in the right way, at the right time.

Smartnotifications drive engagement

Consistent, harmonious experience

Now on Windows and Windows Phone

http://bit.ly/TileTemplateCatalog

Tile template catalog

Windows phone will accept all templates, but might not support every field due to space constraints.

Phone will ignore any Square310x310 templates.

Phone has its own unique templates.

A little about the templates

We’ve got you covered

Don’t worry if our templates don’t fit the bill

(how you too – yes, even you – can create beautiful tiles)

The nitty gritty

Debuted with Windows 8Server-side and client-side APIsReliability improvements over MPNSSL for free - no more certificatesAnd now… those same APIs have been brought to Windows Phone

Windows Notification Service

WNS

Mechanism Scenario Expires WinRT API

LocalUpdate a tile immediately, while the app is running or from a background task

Never TileUpdateManagertileUpdater.Update()

Scheduled Update a tile once, at a specific date and time. E.g., tomorrow at 4pm 3 days TileUpdateManager

tileUpdater.AddToSchedule()

Periodic Update a tile by polling a remote URI on an interval. E.g., every 30 minutes 3 days TileUpdateManager

tileUpdater.StartPeriodicUpdate()

Push

Update a tile immediately, by sending a push notification from your server

-or-

Send a Raw notification to wake a background task that triggers a tile update

3 days PushNotificationChannelManager

How can I send tile updates?

<tile> <visual version="2"> <binding template="TileSquare150x150Text01"> <text id="1">New Message</text> <text id="2">Thomas Fennel</text> <text id="3">Looking forward to your \\build\ talk next week</text> <text id="4"></text> </binding> <binding template="TileWide310x150SmallImageAndText02"> <image id="1" src="http://favoritesocialmediasite.com/profiles/thomas.png" />

<text id="1">New Message</text> <text id="2">Thomas Fennel</text> <text id="3">Looking forward to your \\build\ talk next week</text> <text id="4"></text> <text id="5"></text>

</binding> </visual></tile>

All update mechanisms use the same payload

Sending tile updates to both platforms

Demo

Notifications SimulatorPeriodic pollingTile notification queueExpiration supportRaw notifications can wake a background taskGlyph badgesMore templates

Brand new stuff for Phone

Send same XML to both platforms

Include all tile sizes at once

Use Versions and Fallbacks

Put Windows Phone templates first

Tile payload checklist

Session 2-521Thomas Fennel and Jorge RaastroemYesterday at 5:30 PM

Would you like to know more?

Notifications Deep Dive

Custom draw your own tiles

Any bitmap generatorCloud

XamlRenderingBackgroundTask

Windows Phone XAML

WriteableBitmap

Windows Phone

Silverlight

Custom rendering tiles using XamlRenderingBackgroundTask

Demo

That was cool, but I already have a Silverlight app…

Can I use any of the new hotness?

Windows Phone Silverlight 8.1

With some minor work to opt-in

Absolutely!

WNS and the WinRT APIs work in Windows Phone Silverlight 8.1

Choosing a notification platform

Scenario Recommendation

You are creating a new Windows Phone Silverlight 8.1 app WNS / WinRT

You are upgrading your Windows Phone Silverlight 8.0 app and want to add notifications for the first time WNS / WinRT

You are upgrading your Windows Phone Silverlight 8.0 app and already using MPN notifications

WNS / WinRT

-or-

MPN / .NET

Choosing a notification platform

Open WMAppManifest.xml to select the Notification Service

Still works! Nothing has been deprecated

No need to rewrite or change anything

BindToShellTile no longer requires a URI list

Notifications Simulator works too!

What if I stick with MPN and .NET?

WNS Tiles in Windows Phone Silverlight 8.1

Demo

Session 2-517Sam Jarawan, Harini KannanYesterday at 5:30 PM

Would you like to know more?

What’s new with Windows Phone Silverlight apps

Scaling and localizing assets

Windows runs on a huge range of devices, screen sizes, and DPI

Why asset scaling?

/ProjectFolder /images logo.scale-100.png logo.scale-180.png logo.scale-240.png /contrast-black logo.scale-100.png logo.scale-180.png logo.scale-240.png /contrast-white logo.scale-100.png logo.scale-180.png logo.scale-240.png /ja-JP logo.scale-100.png logo.scale-180.png logo.scale-240.png /contrast-black logo.scale-100.png logo.scale-180.png logo.scale-240.png /contrast-white logo.scale-100.png logo.scale-180.png logo.scale-240.png

To make sure your tiles always look great…

1. Use this tile XML

2. Add assets to Solution

Ü <image id="1" src="ms-appx:///images/logo.png"/>

<image id="1" src="ms-appx:///images/logo.scale-180.png"/>

<image id="1" src="ms-appx:///images/contrast-black/logo.scale-100.png"/>

Lighting up your web site with live tiles

Beyond apps

Lighting up your web site with live tiles

Demo

<meta name="application-name" content="Contoso" /><meta name="msapplication-TileColor" content="#009900" /><meta name="msapplication-square150x150logo" content="images/mediumtile.png" /><meta name="msapplication-wide310x150logo" content="images/widetile.png" /><meta name="msapplication-square310x310logo" content="images/largetile.png" /><meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/tileContent.xml;" />

Add a few meta tags

document.addEventListener('mssitepinned', startPeriodicUpdate, false);

function startPeriodicUpdate() { var uri = "notifications/tileContent.xml"; window.external.msEnableTileNotificationQueue(true); window.external.msStartPeriodicTileUpdate(uri);}

Or some JavaScript

Key takeaways

Tiles are the best unobtrusive notificationTemplates are great, but render a PNG if you needSame templates look great on bothBrowse the template catalog, use the simulator to playTake advantage of easy pollingWindows Phone Silverlight 8.1 fully supportedLight up your web site

I love my start screen…

Make me pin you.

@MattHidinger

Thank you!

Your Feedback is Important

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

Scan the QR code to evaluate this session on your mobile device.

You’ll also be entered into a daily prize drawing!

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.