What's New in tvOS

Session 206 WWDC 2016

Apps are quickly changing how we experience TV today, and tvOS is the foundation upon which new apps and ideas are being built. Take your app to the next level with great new features in tvOS 10. Learn all about the new interface appearance APIs, support for badging and notifications, and more.

[ Music ]

Welcome to what's new in tvOS.

[ Applause ]

I'm Hans, and I'm an engineer on the tvOS team.

We're really thrilled this year to welcome you to the very first WWDC for tvOS.

[ Applause ]

So I'd like to begin this afternoon with a brief overview of tvOS.

And we'll walk you through some of the new features of tvOS 10.

And then we'll take a few of them and dive into more details.

And we even have a very good demo.

So let's begin.

Just nine months ago we launched the new Apple TV and with it the tvOS.

tvOS is a modern operating system designed for modern hardware, which is 64-bit only with no 32-bit runtime.

So it would save you nontrivial amount of time that you'd spent testing for 32-bit compatibility or configuring for 32-bit slices.

And unlike your iPhone, iPad, or even Mac, the Apple TV is always connected to a high speed network.

And this makes tvOS an ideal platform where you can offload some tasks like managing your app's assets, user data, or even your app's content to technologies such as CloudKit and on-demand resources.

CloudKit is your interface to an almost infinite amount of storage in iCloud.

It offers a structure storage for your assets.

It also provides a public and private database for user data.

So as you've heard in the previous session, it can be accessed from across iOS, Mac OS, and tvOS and can also be shared.

And thanks to iCloud authentication, you don't have to ask your customers for a separate login anymore.

And this is still true even if your app happens to also run on other platforms that do not have CloudKit.

And by using CloudKit JS and its web service API's you don't have to roll your own solution and still take advantage of the security and efficiency.

Now, traditionally customers had to download an entire app to be able to launch and start using it.

And as app grows in size, this becomes a pain point.

Because we don't wait 800 megabytes to download for fun.

And this is not only frustrating for the users, but also a challenge for us developers because customers may lose an interest in our apps before they even get to try them.

On-demand resources takes advantage of Apple TV's constant connection and provides a mechanism by which your app can launch even before all of its content is downloaded.

This means for your customers, they can use the app sooner.

And while the app is being downloaded, the system can continue to download more content so they're ready when they're needed, minimizing further wait time.

And also, applications can be very large, in fact, much larger than was traditionally agreeable.

Let's take a look at this.

Every app has a main app bundle of executable and base resources.

And when using ODR, your main app bundle can be up to 200 megabytes.

To this you can add a first set of content to be downloaded with the app bundle so they're ready when the app installs.

For example, this could be the first three levels of your game.

This first set is called the initial install tags, and this can be up to two gigabytes.

What if you have more contents?

Well, you can specific additional sets of assets packs to be downloaded immediately after the install.

And this is called prefetch tags.

And prefetch tags are intended for content that you know you'll need soon but not soon enough to justify blocking your app's initial launch, thereby preventing your users from using the app.

So, for example, if your user is playing level one of your game, the system will start downloading levels four, five, and six.

And by the time the user is completed with level three, the next levels are already downloaded and waiting for the user.

So the wait has been shifted from the user to the system.

And the system doesn't mind waiting, but the users do.

Prefetch tags can be up to four gigabytes, using the rest of the allowance.

So, for example, if you spent 500 megabytes for initial install tags, then you have 3.5 gigabytes for prefetch tags.

If you've spent all two gigabytes of your initial install tags, then naturally you have two gigabytes for your prefetch tags.

What if you had no initial install tags?

Well, math says it's four gigabytes for your prefetch tags.

But you might want to move some of that content into initial install tags so they can be used early.

In similar way as the app is further used, more assets packs can be downloaded.

And the total downloadable content can be up to 20 gigabytes, making the combined size of app bundle and downloadable content at a whopping 20.2 gigabytes.

[ Applause ]

And this is not just a big number, but a big number that does not feel to the customers heavy or tedious because they can get started sooner and they can continue to use the app without much interruption.

Transistor is a great game and a great example of using ODR.

It has 160 megabytes of app bundle and 500 megabytes of initial install tags, so it downloads and installs quickly.

But thanks to 900 megabytes of prefetch tags, gamers are continuously challenged with new, gorgeous game levels without virtually any interruption.

But ODR is not just for games.

One of my favorite apps is Earthlapse TV.

Earthlapse TV presents time lapse videos taken from International Space Station and creates a virtual window to the space right in your living room.

It has over one gigabyte of super high-quality content.

And yet, it downloads and launches quickly and there's virtually any wait jumping from content to content.

So that's ODR.

And that, by the way, is Canada seen from the Cupola module.

[ Applause ]

Now, let's take a look at how we interact with the TV.

We use our phone every day and we're quite accustomed to it.

But it's unique in that both our attention and our action are right there in front of us on the touch surface.

When you're looking at a TV, however, our attention is 10 feet away on the other side of the room and our action is on the remote right in our hand.

There's no direct connection between the two.

tvOS provides a unique opportunity to make this experience more direct and connected.

First is the Siri Remote.

Through its touch surface Siri Remote enables a new focused-based interaction designed specifically for this kind of environment.

By pressing buttons and using gestures on the touch surface, users can move focus from one element to another, stop on a specific one, and click to trigger an action.

To complement this focused interaction, tvOS also introduces a new parallax effect.

The parallax effect gives you a sense of where your focus is and also the feeling that you are connected with the screen.

And the best way to take advantage of the parallax effect is by using layered image.

A layered image is an image type designed for tvOS, and it increases depth and dynamism when an element is in focus.

It can have up to five layers and is actually required for the app icon.

And to create a new layered image, you can use Xcode's asset catalog, the Parallax Previewer app for Mac OS, and the Parallax Exporter plug-in for Photoshop.

And of course, all of these are available for download at developer.apple.com.

Now, let's take a step back and take a look at the Home screen.

The Home screen is where this 10-foot experience is best illustrated.

Above the first row of app icons is an area called Top Shelf, and apps placed on the first row can participate in it.

Your apps can present the most relevant features or contents as shortcuts to the content deep inside your app so your customers can jump straight to it.

And this could be, for example, a poster for your movies, album art for music, banners, or really anything that makes sense for your app.

Top Shelf is a great conduit for bringing customers back into your app, so we highly recommend that you take advantage of it beyond providing a placeholder image.

Now let's come back to the Home screen again.

The Home screen is a collection of apps you care about.

And as you've heard in the keynote, we believe the future of TV is apps.

And all of this is enabled by the App Store.

The App Store, just like on iOS, is where you go to browse, discover, and download apps.

And because it exists on both iOS and tvOS, it supports universal purchase.

So if your customer has downloaded the app on iOS, they can enjoy the app on tvOS with just one button press and for free.

And thanks to Apple TV's constant connection, in tvOS 10 we're introducing auto download.

So apps downloaded on iOS will be automatically downloaded to the TV just like that.

So it's even easier for your customers to get a hold of your apps.

But how are you going build them?

tvOS offers the same developer tools and languages as iOS, Mac OS, and watchOS.

And many of the same frameworks you that already know, such as UIKit, Foundation, Core Animation, AVFoundation, Core Audio, and so on and so on are all available on tvOS.

And by the way, in tvOS 9.2 we've also brought MapKit to TV.

But this is still a partial list of a whole lot more you can pick and choose from.

For example, if you're developing a game, you'd be excited to learn that all the game technologies that you love are all available on tvOS: Game Center, Game Controller, GameplayKit, Model I/O, MetalKit, Performance Traders, SpriteKit, SceneKit and many more, these are all available at your disposal.

And finally, tvOS introduces a brand new high-level framework called TVMLKit.

TVMLKit makes it really easy for you to build content-centric apps by taking care of the heavy lifting, such as layout and focus management, for you.

And it does so with predefined templates for layout and JavaScript for application logic.

It is really great for rapidly iteration and deployment.

And, of course, it's tuned for great performance.

In fact, several of Apple's own apps are built using TVML the Movies app.

And that's right, the App Store itself is built using TVMLKit.

And all of the developer tools on iOS that helped you fine-tune and optimize your apps, such as Unit Testing, App Analytics and TestFlight are also available for tvOS.

This year tvOS continues to offer new and exciting features.

As you've heard in the keynote, we're bringing HomeKit to the TV so you can control HomeKit-compatible accessories from your TV.

We're also bringing PhotoKit so your app can leverage your customers' iCloud photo library.

Using SpriteKit is even easier thanks to native support from the focus engine.

Your movement and navigation will feel more natural and fully integrated with the rest of the OS for free.

Speaking of movement and navigation, an integral part of gameplay is how you control them.

You can hold the Siri Remote vertically as a lightweight game controller and use gestures like swipes and clicks for jumping, for example, to control a game.

If your title requires slightly more complex input, you can hold it landscape as a micro game pad with basic D-pads and two-button controls.

Well, if your game title requires even more complex input, you can use the extended game controllers and as you heard in the State of the Union, up to four of them.

You now have an option to require the use of MFI-based game controllers, and the app store will prompt the user accordingly if it's necessary.

We're also bringing ReplayKit to the TV.

Using ReplayKit, players can record their gameplays locally on device and share it with friends via AirDrop.

But that's not all; game players can now broadcast their gameplays live on services like Mobcrush.

In tvOS 10 we're also bringing a brand new UserNotification.framework with iOS 10 and also ExternalAccessory.framework for Bluetooth accessories from iOS.

We're also shipping a brand new Apple TV remote app.

And finally, users can set their system appearance to light or dark.

And when you're actually building apps, you have many options.

You might want to use UIKit as your baseline and take advantage of all the available frameworks.

If you're already comfortable with full native frameworks or if you have an existing iOS app, we have some great sessions this week for to you check out, including mastering UIKit on tvOS where you can take your UIKit app to the next level.

And in Focus Interaction on tvOS, we review the Focus system, discuss some of the new features on tvOS 10, and of course, SpriteKit.

We also recommend that you check out TVMLKit.

TVMLKit is an incredibly rich framework.

And if your skillset already includes JavaScript and XML, it's really easy to use TVMLKit to rapidly develop and deploy content-centric apps.

And because TVMLKit is built on top of UIKit, you can even mix in UIKit for further customization.

And these sessions focus on getting the most out of TVMLKit, and we highly encourage you to come go check out.

And if you are a game developer, of course, all the game technologies packaged as GameKit might well be your choice.

Next I'd like to switch gears and take a deep dive into some of the new features in tvOS 10.

And for that, I'd like to hand it over to my colleague, Marshall Huss.

[ Applause ]

Good afternoon.

My name is Marshall.

I'm a tvOS engineer.

And today we're going to dive into how you can implement some of the new features with tvOS 10.

We heard in the keynote that there's a new Apple TV Remote app.

We'll take a look at how you can use notifications to notify users when you have new content available.

And finally, we're going to look at how you can implement the light/dark appearance in your app.

So the new Apple TV Remote app works just like the Siri Remote, so there's no changes that are required for your app to make it work.

It also includes a new Game Controller layout so users can use it to play games.

Now, if the user is using the app and your app is linked against the game controller framework, then they're going to get a new icon in their navigation bar that looks like this.

When that user taps that icon, they'll get presented with a Game Controller layout that they can use by rotating the phone.

To learn more how to make the most use of Game Controller framework, we have a session coming up later this week.

Also, as you heard, the seed is available today.

So go download it and try it out.

Next we're going to take a look at notifications and how you can use those to notify users when you have new content available.

A great way of doing this you might be used to is badging your application icon.

And we've added this support for tvOS 10.

Now, like iOS you're required to request permissions from the user in order to badge the application icon.

But on tvOS this looks a little bit different.

They're going to get a full-screen modal alert.

So make sure that you that request permission at an appropriate time, or this may be the first experience the user has with your app.

We've also added support for remote notifications so you can use Apple's Push Notification service to send remote notifications.

We support two notification types.

Those are Badge, which we just saw and also content-available.

Now, if your app is in the background, then these content-available applications will not wake up your app like you might be used to in iOS.

Let's take a look at what that means.

So say your user has new content available.

A great way to notify them would be to send a Push Notification with content-available and a Badge of 1.

If the application's not open, tvOS will hold onto this notification and update the user's Badge.

Now, the user gets more content-available, so you can send another Push Notification that updates the Badge icon.

tvOS will hold onto the latest notification and wait for the app to come back.

And finally, you get more content-available and you can update the Badge again.

When the user is ready to go back to the app and see what they have is new, they can open the app.

And then we deliver that last notification so you can go to your servers and get maybe any new content that's available.

In order to support this you have to use the new user notification framework.

If you've implemented notifications in iOS before, you might be used to using the UIKit API's.

Well, those have been prohibited up until now on tvOS, and they're going to remain prohibited.

So in order to fully support local and [inaudible] notifications, you're going to need to use the new user notification framework.

We have a few sessions coming up later this week on how you can learn to fully implement those in your app.

And finally today, we're going it take a look at the new light and dark appearance on tvOS.

We see that that this is a system-wide setting to the user.

The user will determine when they want the change between light or dark.

Now, something to consider is that users might have their rooms in different environments.

It could be in a movie room, which is dark; it could be in a living room, which has a lot of windows.

Or the user may change it based on time of day.

So it's important in order to respect your user's choice to offer them the best user experience.

In order to fully support this we've added new API on the UITraitCollection, and you must actually opt-in for the dark appearance.

If you don't opt-in for the dark appearance, your app will remain in the light just like it did in tvOS 9.

So let's take a look at what it takes for your app to adopt the new light and dark system appearance.

The first step is to add a new key to your Info.plist; we've added one called UIUserInterfaceStyle.

If you set a value of Light, it will always resolve to light.

If you set a value to Dark, your app will always stay dark.

Or if you use what we recommend, Automatic, it respects the user and the system setting and will propagate that through your app.

If you create new projects in Xcode 8 for tvOS, this will actually default to Automatic.

I mentioned that there is new API and TraitCollection.

We've added a new property called .UserInterfaceStyle.

This could have a value of unspecified, which might the case if your view has not been inserted in the view hierarchy yet, or if could be light or dark depending on what the system setting is and what your app supports.

In order to support developers adopting this, we've added developer tool support to Interface Builder and the simulator.

If you use standard UIKit controls, these will actually automatically change for you.

If you're used to using the appearance proxy, with a little bit of refactoring, you can then specify colors depend on TraitCollection.

And if you want the most control, you can implement TraitCollectionDidChange in your views or view controllers.

Now in Interface Builder you can specify colors right in the inspector for light and dark.

We added a light and dark preview to storyboards so you can rapidly develop and design your app.

We've also added a shortcut to the simulator to be able to quick toggle between these system appearances.

I mentioned UIKit controls will automatically update them.

And we use these a lot in our own system apps.

We see that certain views like this keyboard or text field or [inaudible] control automatically update their style to look best against the TV wallpaper.

If you use a table view like we do in our settings app, it will automatically adjust its background colors, its text color, and everything to look good.

And if you're using the system built-in keyboards, than those adapt as well.

If you're looking to customize your text, we've added support to UILabel and UITextView, so those will automatically change their color as well.

Text color will be set to black for the light appearance; it will be set to white for the dark appearance.

But one caveat is if you ever set the text color, then you're responsible for updating that color for both those modes on your own.

We've also added two new blur styles to the API.

You can now use UIBlurEffectStyleRegular or UIBlurEffectStyleProminent.

And we call these automatic styles.

And they'll actually adjust the effective blur effect style based on what the system setting is.

So if you use UIBlurEffectStyleRegular and the system's in light, it will use UIBlurEffectStyle.light.

If you use regular and dark, you'll use dark.

If you use prominent, it will use .extraLight and .extraDark.

.extraDark will be coming in a later seed.

Now, you might customize your app with the appearance proxy.

So you might have code like this that sets the title color of a button to red.

With a little bit of refactorring, we can vend a TraitCollection for both light and dark.

And using the appearance proxy API's we can set a color for each of those specific TraitCollections.

Now in this case our button will use red in the light appearance and blue in the dark appearance.

And finally, if you want the most control over these changes, you can respond to them directly.

You can do this using TraitCollectionDidChange in your views or view controllers.

Let's take a look at what an implementation of this would look like.

First we override TraitCollectionDidChange in our view controller.

Then we check to make sure that UITraitCollection responds to the new user interface style property.

This allows us to build this feature for our users on tvOS 10 but still support users who might be on tvOS 9.

Next we check to see that the user interface style actually changed; otherwise we might be doing more work than we need.

And finally, we can check the user interface style and update our controls accordingly.

Now, one more advanced use of this is if you wanted to override TraitCollections.

And this might be the case that if you want your app to support the automatic style but may have certain views or view controllers in your app that you want to specify the style itself.

We use this in our system apps, our product pages and our movies and TV shows actually use the artwork to base on what the elements look like.

In this case we have light artwork, so we use black text in button styles that make the colors pop out.

We also have dark pages where we use white text on darker styles and the buttons also update accordingly.

In order to override these TraitCollections, we use API that was added in iOS 8.

And this is setOverrideTraitCollection for ChildViewController.

In order to use this we can use a small wrapper class.

Let's see what an example of this might look like.

First we create a new class, AppearanceViewController, and we inherit from UIViewController.

We can add a property that has the style that we might want to set in our ChildViewControllers.

And then we can another property where we actually set the view controller in which we want to set that style for.

Then we use a setOverrideTraitCollection for ChildViewController using the style that we specified.

And finally, we use standard ChildViewController containment.

Now, if you wanted to use this class, we could vend our AppearanceViewController, specify the style that we want for based on whatever attributes we want, we can set the ViewController, and then we can present it to the user.

Next, I'd like to invite Brandon up to show you what it takes to update your app for tvOS 10.

[ Applause ]

Thanks, Marshall.

Hi, everyone.

My name's Brandon, and I'm really excited to show you the tvOS app that we've been working on.

It's called Fireplaces of the World.

And fireplace enthusiasts have been loving it so far.

Let's take a look.

This app allows to you bring fireplace styles from around the world straight to your living room.

Let's see what a fireplace from Vermont looks like.

Ahh, doesn't it feel cozy in here?

I think this is great.

Now, even though the simulator appearance will set to dark, our app is using the light appearance by default because we haven't specified a preference.

I'm excited to adopt the new dark appearance, so let's go update our app now.

The first thing we need to do is add the new User Interface Style key to our Info.plist.

We'll set the value to automatic and rerun our app.

We chose automatic because we want our app's appearance to match the user's appearance setting.

Okay. This is looking pretty good so far.

So all of our standard UIKit views have been updated automatically.

So in this case the tab bar and the wallpaper now have a dark appearance.

For some of you this might be all you need to do to update your apps.

However, our designers have decided that they want a different logo color for the dark appearance.

And the background color on the collection view styles sticks out a little bit too much.

So let's go make those changes.

So let's go to our main.storyboard.

And the first thing we need to do because this is an existing project, we need to enable the trait variations feature in Xcode 8.

So to do that, we'll go to the File Inspector and click on this Use Trait Variations checkbox.

When we do that, we're going to get a warning that trait variations is only compatible with Xcode 8 or later.

And that's fine, so we'll continue.

So now we'll click on our logo, go to the Attributes Inspector.

And there's these new plus buttons next to some of the properties.

So we'll click on that and add a darkinterface for our logo image and we'll specify yellow.

Now, one cool feature of Xcode 8 is that you can actually switch between the light and dark appearances directly within Interface Builder.

To do that we'll go to the bottom of our storyboard and click on this View As: Apple TV (Light Style).

And we have two options here.

We have light and dark.

When we click dark everything updates automatically.

So our logo changed color and also the tab bar and wallpaper have changed color as well.

So that looks pretty good.

So let's go update our background colors.

In our AppDelegate we're setting the background color of our CollectionViewCell using the appearance proxy.

Now, we want the background color to change based on specific traits.

So we need to use a trait-specific appearance proxy.

So first we'll start out by creating a UITraitCollection.

So let light equals UITraitCollection with a UserInterfaceStyle of light.

Then we'll replace our generic appearance proxy with a trait-specific appearance proxy.

So for TraitCollection, and we'll pass in the TraitCollection we just created.

We'll do the same for dark and specify a different background color.

Now, because we can't view this in Interface Builder, we'll rerun our app.

We've added a keyboard shortcut, so you can switch quickly switch between the light and dark appearances within the simulator.

To do that, we'll hit Command Shift D to switch the light appearance and then Command Shift D to switch back to the dark appearance.

So that's looking pretty good so far.

But I've noticed that the icon is hard to see now that we've changed our background color.

So let's go update that as well.

So we'll go to our to custom collection ViewCell subclass and before we were setting the tint color in our awakeFromNib function.

Since we want the tint color to change when our TraitCollection change, we'll override the TraitCollectionDidChange function.

We'll use the same color as before for our light interface style, and for our dark we'll actually use a light gray.

Now, TraitCollectionDidChange is called each time your view is added to a view hierarchy.

So we remove our initialization code here.

But for backwards compatibility reasons, we'll just leave it in there.

Let's run our app, see how it looks now.

Okay. That looks much better.

So let's switch to light appearance, make sure nothing has changed.

And that still looks good.

And we'll switch back to the dark appearance, and that looks great.

So we've just updated our app to adopt a new dark appearance, and we're ready to ship with tvOS 10.

Now I'd like to invite Hans back up on stage.

[ Applause ]

Thank you, Brandon.

That was a very cool demo and warm.

So as you've seen, adopting light and dark appearance is really easy.

So we hope all of you can adopt it in your apps very soon.

This afternoon we have seen just a few of the many features in tvOS.

tvOS offers the same tools, services, and frameworks that you already know so it's really easy to get started.

And focus-based interaction, layered images with parallax effect and Top Shelf, they all work together to create a direct and connected 10-foot experience.

And with Universal Purchase and Auto Download, your customers are ever-closer to enjoying your apps.

We're also shipping a brand new Apple TV Remote app.

And it's available as a seed, so please download and test your app with it.

And with ReplayKit and SpriteKit support directly from Focus Engine, game experiences are even better.

And finally, users can set their system appearance to their liking.

We hope you're excited by what you've seen and you can learn even more throughout the great many sessions this week.

And the Apple TV Tech Talk videos from earlier this year are very useful in guiding you through the basics.

And they're available at developer.apple.com as well.

And of course, all this information is available on the session link.

Finally, we can't wait to see the great things you create for the future of TV.

Thank you so much for coming, and enjoy the rest of the conference.

[ Applause ]

Apple, Inc. AAPL
1 Infinite Loop Cupertino CA 95014 US