![var isGamePadConnected = false;
function checkGamepad() {
if (navigator.getGamepads) {
var gamepads = navigator.getGamepads();
if (gamepads[0]) {
isGamePadConnected = true;
} else {
isGamePadConnected = false;
}
}
requestAnimationFrame(checkGamepad);
}
checkGamepad();](https://image.slidesharecdn.com/4webappsonxbox-160830221331/85/XboxAppDev-4-Web-Apps-on-Xbox-24-320.jpg)
XboxAppDev 4. Web Apps on Xbox
- 1. Web Apps on Xbox Bringing Your Web Experience to the Console Kirupa Chinnathambi | @kirupa Program Manager
- 2. #xboxappdev 1. Web Apps as UWP 2. Designing for the TV 3. Integrating with the platform 4. WebView 5. What’s next! Agenda
- 3. Please ask questions at any time. I’ll be monitoring the live feed throughout the talk. #XboxAppDev
- 4. Web Apps
- 6. 1. Built on web technologies 2. Cross-platform / cross-browser 3. Responsive 4. Built using your favorite tools
- 7. Web Apps as UWP
- 9. To allow you to easily re-use your skills and assets.
- 10. Hosted Web Apps Your app content is served from a public URL. Packaged Web Apps Your app content is entirely local and part of your application.
- 11. Hosted Web Apps
- 12. Think of it as a thin UWP wrapper around a supercharged iframe that displays content from your server.
- 13. Think of it as a thin UWP wrapper around a supercharged iframe that displays content from your server.
- 15. #xboxappdev Why?
- 16. #xboxappdev UWP apps are fully integrated with Windows 10. You have access to native device capabilities via WinRT APIs.
- 17. #xboxappdev You have many ways to build Hosted Web Apps. Some popular ones include: • Visual Studio • ManifoldJS • Cordova CLI
- 20. Designing for the TV (aka the 10’ Experience)
- 21. #xboxappdev Unless you explicitly designed for it, your web apps are optimized for screens that you hold or sit very close to. There are a handful of things you can do to help address that.
- 22. #xboxappdev .xboxBody { margin: 50px; } Create a “TV safe border” of 50 or so pixels. Keep critical content away from it.
- 23. #xboxappdev You can explicitly check for Xbox via an API like AnalyticsInfo. My preference: Check for DPI (150% default zoom), resolution, whether a controller is connected, etc.
- 24. var isGamePadConnected = false; function checkGamepad() { if (navigator.getGamepads) { var gamepads = navigator.getGamepads(); if (gamepads[0]) { isGamePadConnected = true; } else { isGamePadConnected = false; } } requestAnimationFrame(checkGamepad); } checkGamepad();
- 25. var view = Windows.ApplicationView.GetForCurrentView(); view.SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow); By default, you will get a black border around the page. You can remove it with the following WinRT call:
- 27. #xboxappdev Use a library like TVJS to enable directional navigation easily for your hosted as well as packaged apps. (This works on all Windows devices with a gamepad or keyboard!)
- 28. #xboxappdev You can get TVJS from here: https://aka.ms/tvjs
- 29. TVJS makes it especially easy to quickly focus on elements that aren’t typically hit targets.
- 31. <section> <div> <div id="A" class="btn">A</div> <div id="B" class="btn">B</div> </div> <div> <div id="C" class="btn">C</div> </div> <div> <div id="D" class="btn">D</div> <div id="E" class="btn">E</div> </div> </section>
- 32. <section> <div> <div id="A" class="btn">A</div> <div id="B" class="btn">B</div> </div> <div> <div id="C" class="btn">C</div> </div> <div> <div id="D" class="btn">D</div> <div id="E" class="btn">E</div> </div> </section>
- 33. <section> <div> <div id="A" class="btn">A</div> <div id="B" class="btn">B</div> </div> <div> <div id="C" class="btn">C</div> </div> <div> <div id="D" class="btn">D</div> <div id="E" class="btn">E</div> </div> </section>
- 34. In your JS, just call: TVJS.DirectionalNavigation.focusableSelectors.push(".btn");
- 35. #xboxappdev Mouse mode is the default controller experience. Same as the Edge browser on Xbox where: • Mouse movement is via left thumbstick • Zoom In / Zoom Out via left / right triggers • Scrolling via right thumbstick • You get magnetism support Mouse Mode
- 37. Integrating with the Platform
- 38. if (typeof Windows !== "undefined") { // Windows specific code goes here } How to detect if you are in a UWP environment:
- 39. #xboxappdev This is what makes your web app really shine and take advantage of what the Xbox provides beyond the browser.
- 40. #xboxappdev 1. SMTC Integration 2. Background Audio
- 42. System Media Transport Controls (SMTC) are the common play, pause, back, and forward buttons exposed through Windows 10. SMTC Integration <video id="mediaVideo" src="img/Westminster_high.mp4" controls></video> Just add the controls attribute. There is some JS that needs to be added as well.
- 43. No user wants their music to cut out when an app is minimized or (occasionally) out of focus: Background Audio <video id="mediaVideo" src="myVideo.mp4" msAudioCategory="BackgroundCapableMedia" controls></video> Add the msAudioCategory attribute to a media element with a value of BackgroundCapableMedia.
- 45. WebView
- 46. Think of it is as really fancy/turbocharged iframe that acts as a window for displaying HTML content. WebView is used across UWP apps across the Windows Platform.
- 47. <!DOCTYPE html> <html> <head> <title>Webview Example</title> <link href="css/default.css" rel="stylesheet" /> </head> <body> <x-ms-webview id="webview" src="https://www.bing.com"></x-ms-webview> <script src="js/main.js"></script> </body> </html>
- 48. <!DOCTYPE html> <html> <head> <title>WebView</title> </head> <body> <script> var webview = document.createElement("x-ms-webview"); webview.navigate("https://www.bing.com"); document.body.appendChild(webview); </script> </body> </html>
- 50. There is a whole lot you can do with the WebView control beyond just displaying HTML content.
- 51. What’s Next!
- 52. #xboxappdev The same under-the-hood components that power the Edge browser power the web experience you get in UWP apps.
- 54. #xboxappdev
- 55. Summary
- 56. #xboxappdev If you know how to build a cool web app, then you know almost everything these is to build an app for the Xbox (or any other UWP device).
- 57. #xboxappdev Keep in mind ways of progressively enhancing your app depending on the capabilities available on the device you are targeting.
- 58. If you have any questions, feel free to ping me via @kirupa or send e-mail to kirupac@microsoft.com.