1. 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.

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

3. Universal Windows Platform
Microsoft Build 2016
9/19/2018 7:06 PM
Web Apps on Windows
.appx __ ×
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.

4. 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.

5. 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.

6. Building Cross-platform Web Apps

7. 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.

8. 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.

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

10. Cross-platform to Cross-Device

11. 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.

12. 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.

13. 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
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.

14. 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.

15. Publishing your Web App

16. 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.

17. 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.

18. 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.

19. Using Web to Deliver Amazing Quality

20. 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.

21. 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.

22. 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.

23. 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); }
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

24. 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.

25. 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.

26. 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
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

27. 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.

28. 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.

29. Demo
Sample Media App / background

30. Demo
Add Web Allowed Object

31. Demo
Web App Offline

32. 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.