Microsoft Build 2016 9/19/2018 7:06 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Web Apps Beyond the Browser: Cross Platform Meets Cross Device Jeff Burtoft Kiril Seksenov Principal PM, Dev EX Program Manager, Web Plat

Universal Windows Platform Microsoft Build 2016 9/19/2018 7:06 PM Web Apps on Windows .appx __ × http://mysite.com HTML CSS JS Universal Windows Platform © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Edge Engine Chakra Packaged content Offline first Hosted content Microsoft Build 2016 9/19/2018 7:06 PM Edge Engine Chakra Packaged content Offline first Hosted content Always up-to-date © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Cross Platform Website Code Microsoft Build 2016 9/19/2018 7:06 PM Cross Platform Website Code © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Building Cross-platform Web Apps

Web Apps Cross platform 9/19/2018 7:06 PM Web Apps Cross platform Reach users through store Listed is platform stores where some users go to first (especially on mobile) Access Hardware APIs Hardware APIs such as Bluetooth, media input and event contracts like user contacts can be accessed by Web code Monetize your App Paid apps, advertising, IAP and Micro-transactions are available to your web app Offload to Native Your web app can pass execution to native components and back again © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Pick the right tool for the job Microsoft Build 2016 9/19/2018 7:06 PM Pick the right tool for the job Publish packaged Apps to different stores from one code base Run your app from your web server, no need for store deploys © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo WANAPLAN: https://www.wanaplan.com/ Microsoft Build 2016 9/19/2018 7:06 PM Demo WANAPLAN: https://www.wanaplan.com/ © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Cross-platform to Cross-Device

Cross-Device on Windows Microsoft Build 2016 9/19/2018 7:06 PM Cross-Device on Windows © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Meteor ToDos running across Platforms Microsoft Build 2016 9/19/2018 7:06 PM Demo Meteor ToDos running across Platforms © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Web Apps on Xbox Introducing UWP Apps on Xbox Gamepad Input on Xbox 9/19/2018 7:06 PM Web Apps on Xbox Introducing UWP Apps on Xbox Windows Store will now be present on Xbox Web Apps are UWP Apps and will work on Xbox Gamepad Input on Xbox W3C Gamepad, XY/Directional navigation, and mouse mode supported JavaScript API to toggle between modes Preferred UI navigation through Directional Navigation https://github.com/Microsoft/TVHelpers/tree/master/tvjs/src/DirectionalNavigation Design Considerations Default input behavior is mouse mode 10 ft TV experience TV Safe Area © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Nick App Running on Xbox / PC Microsoft Build 2016 9/19/2018 7:06 PM Demo Nick App Running on Xbox / PC © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Publishing your Web App

Publishing to the Windows Store Microsoft Build 2016 9/19/2018 7:06 PM Publishing to the Windows Store Reach More Users Windows users on PC, Phone and Xbox can all see your content through Store search Publish on a Mac Using ManifoldJS and W3C manifest Dependent on Windows APIs Publish Using Visual Studio Create, test and publish your web app through Visual Studio <link> © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

W3C Manifest Manifest Support in Store Publish a UWA in Minutes Microsoft Build 2016 9/19/2018 7:06 PM W3C Manifest { "lang": "en", "name": "Super Racer 2000", "short_name": "Racer2K", "icons": [{ "src": "icon/lowres", "sizes": "64x64", "type": "image/webp" }, { "src": "icon/hd_small", "sizes": "64x64" "src": "icon/hd_hi", "sizes": "128x128", "density": 2 }], "splash_screens": [{ "src": "splash/lowres", "sizes": "320x240" "src": "splash/hd_small", "sizes": "1334x750" "src": "splash/hd_hi", "sizes": "1920x1080", "density": 3 "scope": "/racer/", "start_url": "/racer/start.html", "display": "fullscreen", "orientation": "landscape", "theme_color": "aliceblue", "background_color": "red" } Manifest Support in Store Upload a zip of your manifest + image resources in dev center Publish a UWA in Minutes Great if you have an existing web app manifest © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo W3C Manifest Upload to the Store Microsoft Build 2016 9/19/2018 7:06 PM Demo W3C Manifest Upload to the Store © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Using Web to Deliver Amazing Quality

State of Web Apps Many Popular Apps in Store are Web Apps 9/19/2018 7:06 PM State of Web Apps Many Popular Apps in Store are Web Apps Pandora, Shazam, USAA, AMEX, Netflix, Yahoo Mail, Office Sway Great UI Design These web apps tend to have aesthetically pleasing and highly functional design Integrate with the Platform These apps integrate with the Windows OS Integrations include System Media Transport Controls, Live Tiles, Cortana and more © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Microsoft Build 2016 9/19/2018 7:06 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Shazam Microsoft Build 2016 9/19/2018 7:06 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Media Integration if (typeof Windows !== 'undefined') { Microsoft Build 2016 9/19/2018 7:06 PM Media Integration if (typeof Windows !== 'undefined') { var systemMediaControls = Windows.Media.SystemMediaTransportControls.getForCurrentView(); systemMediaControls.addEventListener("buttonpressed", systemMediaControlsButtonPressed, false); } http://aka.ms/hwamedia © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Controlling GPIO in JavaScript Microsoft Build 2016 9/19/2018 7:06 PM Controlling GPIO in JavaScript gpioController = Windows.Devices.Gpio.GpioController.getDefault(); var buttonPin1 = gpioController.openPin(12) buttonPin1.setDriveMode(Windows.Devices.Gpio.GpioPinDriveMode.inputPullUp); buttonPin1.debounceTimeout = 50; buttonPin1.onvaluechanged = function () {} © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Pandora / Pandora Pi Microsoft Build 2016 9/19/2018 7:06 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Recap Cross Platform is Cross Device on Windows 9/19/2018 7:06 PM Recap Cross Platform is Cross Device on Windows Leverage the cross plat power of the web to deploy a UWA on Windows Web Apps on Windows are first class citizens Full access to Windows APIs and new platform features Numerous high quality Web Apps are in the Store Many Web Apps with high ratings http://aka.ms/webappsdocs © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Please Complete An Evaluation Form Your input is important! 9/19/2018 Please Complete An Evaluation Form Your input is important! or © 2016 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

9/19/2018 7:06 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Sample Media App / background

Demo Add Web Allowed Object

Demo Web App Offline

Web Apps on Windows Mix of remote and local content 9/19/2018 7:06 PM Web Apps on Windows Mix of remote and local content App can range from fully packaged or entirely hosted Content Security Policy JavaScript libraries in packaged apps just work Remote Content can call Windows APIs Full access to the Windows namespace Dependent on Windows APIs © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.