xboxappdev 4. web apps on xbox
TRANSCRIPT
#xboxappdev
Web Apps on XboxBringing Your Web Experience to the Console Kirupa Chinnathambi | @kirupaProgram Manager
#xboxappdev
1. Web Apps as UWP2. Designing for the TV3. Integrating with the platform4. WebView5. What’s next!
Agenda
Please ask questions at any time.
I’ll be monitoring the live feed throughout the talk.
#XboxAppDev
Web Apps
1. Built on web technologies2. Cross-platform / cross-
browser3. Responsive4. Built using your favorite
tools
Web Apps as UWP
To allow you to easily re-use your skills and assets.
Hosted Web AppsYour app content is served from a public URL.Packaged Web AppsYour app content is entirely local and part of your application.
Hosted Web Apps
Think of it as a thin UWP wrapper around a supercharged iframe that displays content from your server.
Think of it as a thin UWP wrapper around a supercharged iframe that displays content from your server.
Demo: Bing UWP
#xboxappdev
Why?
#xboxappdev
UWP apps are fully integrated with Windows 10.
You have access to native device capabilities via WinRT APIs.
#xboxappdev
You have many ways to build Hosted Web Apps. Some popular ones include: • Visual Studio• ManifoldJS• Cordova CLI
Demo: ManifoldJS
Demo: Visual Studio
Designing for the TV(aka the 10’ Experience)
#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.
#xboxappdev
.xboxBody {
margin: 50px;
}
Create a “TV safe border” of 50 or so pixels. Keep critical content away from it.
#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.
var isGamePadConnected = false;
function checkGamepad() { if (navigator.getGamepads) { var gamepads = navigator.getGamepads();
if (gamepads[0]) { isGamePadConnected = true; } else { isGamePadConnected = false; } } requestAnimationFrame(checkGamepad);}checkGamepad();
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:
#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!)
TVJS makes it especially easy to quickly focus on elements that aren’t typically hit targets.
Demo: TVJS
<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>
<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>
<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>
In your JS, just call:TVJS.DirectionalNavigation.focusableSelectors.push(".btn");
#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
Demo: Mouse Mode
Integrating with the Platform
if (typeof Windows !== "undefined") {
// Windows specific code goes here
}
How to detect if you are in a UWP environment:
#xboxappdev
This is what makes your web app really shine and take advantage of what the Xbox provides beyond the browser.
#xboxappdev
1. SMTC Integration
2. Background Audio
Demo: Video App
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.
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.
WebView
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.
<!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>
<!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>
Demo: WebView Focus Transitions
There is a whole lot you can do with the WebView control beyond just displaying HTML content.
What’s Next!
#xboxappdev
The same under-the-hood components that power the Edge browser power the web experience you get in UWP apps.
Improvements to the Edge platform accrue to UWPs as well.
Summary
#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).
#xboxappdev
Keep in mind ways of progressively enhancing your app depending on the capabilities available on the device you are targeting.
If you have any questions, feel free to ping me via @kirupa or send e-mail to [email protected].
