tvOS: ontwikkelen voor Apple TV met Focus Engine

Wat is tvOS?

tvOS — het besturingssysteem van Apple voor Apple TV-settopboxen, gebaseerd op dezelfde Darwin XNU-kernel als iOS. Voor het eerst uitgebracht op 30 oktober 2015 met de 4e generatie Apple TV. tvOS verving de verouderde Apple TV Software (gebaseerd op iOS, zonder App Store en SDK). Het systeem is geoptimaliseerd voor gebruik op tv met een resolutie tot 4K HDR (Dolby Vision) en Dolby Atmos-geluid.

Volgens Apple (WWDC 2025) is tvOS geïnstalleerd op Apple TV HD (2015), Apple TV 4K (2017, 2021, 2022) en ingebouwd in sommige Smart TV-modellen via AirPlay. Apple TV gebruikt A8 (HD), A10X Fusion (1e gen 4K), A12 Bionic (2e gen 4K) en A15 Bionic (3e gen 4K) chips. Alle modellen ondersteunen tvOS 17. tvOS heeft geen camera, microfoon (behalve afstandsbediening), touchscreen of GPS.

De belangrijkste functie van tvOS is Focus Engine, die aanraakbediening vervangt door focusnavigatie. De gebruiker verplaatst de selectie tussen UI-elementen met de Siri Remote. Ontwikkelaars maken apps in Swift/SwiftUI (native) of JavaScript/TVML (media-apps zoals Netflix, Hulu).

tvOS-versiegeschiedenis

tvOS 9 (2015) — eerste versie met SDK en App Store. tvOS 10 (2016) — Single Sign-On (SSO) voor kabelabonnementen. tvOS 11 (2017) — Amazon Prime Video-ondersteuning en automatische modus. tvOS 12 (2018) — Dolby Atmos. tvOS 13 (2019) — meerdere gebruikersmodus. tvOS 17 (2023) — FaceTime, VPN, audi profielen via HDMI.

tvOS-architectuur en verschillen met iOS

De tvOS-architectuur is gebaseerd op dezelfde stack als iOS: XNU-kernel, Core Services-systeemdiensten, Media-laag en Cocoa Touch-gebruikerslaag. Er zijn echter belangrijke verschillen vanwege de specifieke kenmerken van het tv-platform.

Hardwarebeperkingen

De 3e generatie Apple TV 4K gebruikt A15 Bionic met 6 CPU-kernen (2 prestaties, 4 efficiëntie) en een 5-kern GPU. RAM — 4 GB (interne SSD-opslag vanaf 64 GB). Het systeem heeft geen permanente lokale opslag in klassieke zin: alle app-gegevens kunnen door tvOS worden verwijderd bij ruimtegebrek (purgeable). Ontwikkelaars moeten iCloud Key-Value Storage of CloudKit gebruiken voor statusbehoud.

TVMLKit en TVJS

TVMLKit — een uniek framework voor tvOS waarmee interfaces kunnen worden gemaakt in JavaScript en TVML (Apple-specifieke XML-achtige taal). TVMLKit laadt JSON/XML van de server en geeft native UI-componenten weer. Dit is de primaire technologie voor streamingdiensten: Netflix, Hulu, Amazon Prime Video gebruiken TVMLKit. TVJS — een JavaScript-omgeving die in een geïsoleerde context draait.

Gebrek aan permanente opslag

tvOS beheert schijfruimte automatisch: bij ruimtegebrek kan het systeem cache, gedownloade bronnen en zelfs de app zelf verwijderen (met behoud van het pictogram). Bij heropenen moet de app zijn status herstellen. iCloud NSUbiquitousKeyValueStore is de enige gegarandeerde permanente opslag voor instellingen (tot 1 MB per app).

import Foundation

// // Statusbehoud en -herstel in tvOS
final class StateManager {

    private let store = NSUbiquitousKeyValueStore.default
    private let coder = JSONEncoder()
    private let decoder = JSONDecoder()

    // Kijkvoortgang wordt opgeslagen
    func saveProgress<T: Codable>(_ value: T, for key: String) {
        if let data = try? coder.encode(value) {
            store.set(data, for: key)
            store.synchronize()
        }
    }

    // Status wordt hersteld na cacheverwijdering
    func restoreProgress<T: Codable>(_ type: T.Type, for key: String) -> T? {
        guard let data = store.data(for: key) else { return nil }
        return try? decoder.decode(type, from: data)
    }

    // Wijzigingsmelding op ander apparaat verwerken
    init() {
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(ubiquitousKeyValueStoreDidChange),
            name: NSUbiquitousKeyValueStore.didChangeExternallyNotification,
            object: store
        )
    }

    @objc
    private func ubiquitousKeyValueStoreDidChange(_ notification: Notification) {
        print("Gegevens gewijzigd op ander apparaat")
    }
}

De StateManager gebruikt NSUbiquitousKeyValueStore om de app-status op tvOS op te slaan. Omdat lokale opslag door het systeem kan worden gewist, garandeert alleen iCloud gegevenspersistentie. store.synchronize() stuurt gegevens onmiddellijk naar de server, terwijl didChangeExternallyNotification de app op de hoogte stelt van wijzigingen op andere apparaten van de gebruiker.

Focus Engine: navigatie en focus

Focus Engine — het belangrijkste mechanisme van tvOS dat aanraakgebeurtenissen vervangt door focusnavigatie. De gebruiker verplaatst de selectie tussen UI-elementen met de Siri Remote (aanraakoppervlak of knoppen). Het systeem berekent automatisch het volgende focuselement op basis van afstand en bewegingsrichting.

UIFocusEnvironment en focushiërarchie

Elk UI-element dat focus kan ontvangen, implementeert het UIFocusEnvironment-protocol. UIKit bepaalt automatisch de navigatievolgorde op basis van elementgeometrie. De ontwikkelaar kan de voorkeursfocus overschrijven via preferredFocusEnvironments, een reeks onderliggende focusEnvironment opgeven en de beweging regelen via UIFocusHeading (up, down, left, right). UIFocusGuide maakt het mogelijk aangepaste routes in te stellen voor niet-triviale lay-outs.

UIFocusEffect en parallax

tvOS voegt automatisch UIFocusEffect toe aan het gefocuste element: schaduw, markering en parallax-effect (verschuiving bij kantelen van de afstandsbediening). De ontwikkelaar kan het effect uitschakelen via focusedValue of aanpassen via UIFocusEffect.transform. In SwiftUI wordt parallax toegevoegd met de modificator .hoverEffect(.highlight).

import SwiftUI

// // tvOS-component met aangepaste focus
struct MovieCardView: View {
    let movie: Movie
    @State private var isFocused = false
    @Environment(\.isFocused) var envFocused

    var body: some View {
        VStack(spacing: 8) {
            AsyncImage(url: movie.posterURL) { phase in
                if let image = phase.image {
                    image
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 320, height: 180)
                        .cornerRadius(8)
                        .overlay(
                            RoundedRectangle(cornerRadius: 8)
                                .stroke(isFocused ? Color.blue : Color.clear, lineWidth: 3)
                        )
                        .scaleEffect(isFocused ? 1.08 : 1.0)
                }
            }

            Text(movie.title)
                .font(.caption)
                .lineLimit(2)
                .foregroundStyle(isFocused ? .white : .gray)
        }
        .onHover { hovering in
            withAnimation(.spring(response: 0.35)) {
                isFocused = hovering
            }
        }
        .onPlayPauseCommand {
            // Play/Pause-knop op afstandsbediening verwerken
            startPlayback()
        }
        .focusable()
        .focusEffect { phase in
            // Aangepast focus-effect
            phase == .active ?
                AnyView(self.scaleEffect(1.08)) :
                AnyView(self.scaleEffect(1.0))
        }
    }

    private func startPlayback() {
        print("Afspelen: \(movie.title)")
    }
}

// // Hoofdscherm met filmraster
struct MovieGridScreen: View {
    let movies: [Movie]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 320, maximum: 400))], spacing: 24) {
                ForEach(movies) { movie in
                    MovieCardView(movie: movie)
                }
            }
            .padding(60)
        }
        .focusSection() // Groeperen voor navigatie
    }
}

MovieCardView toont Focus Engine in SwiftUI: de modificator .focusable() maakt het element focusbaar, .onHover volgt statuswijzigingen, .focusEffect maakt aangepaste focusanimatie mogelijk. .onPlayPauseCommand verwerkt het indrukken van de Play/Pause-knop op de Siri Remote. focusSection groepeert een raster voor cyclische navigatie.

Siri Remote: gebaren en knoppen

De tweede generatie Siri Remote (2021) heeft een aanraakoppervlak, 5 knoppen en een microfoon. tvOS ondersteunt gebaren: vegen (navigatie), tikken (selecteren), dubbeltikken (centreren), knijpen-zoomen (afbeeldingen), lang indrukken (contextmenu). UIPress met typen .select, .playPause, .menu, .upArrow, .downArrow, .leftArrow, .rightArrow — vooraf gedefinieerde druktypen. De microfoon van de afstandsbediening wordt gebruikt voor Siri en spraakzoekopdracht.

Top Shelf en app-scherm

Top Shelf is een gebied op het Apple TV-startscherm dat dynamische app-inhoud weergeeft wanneer de app in de bovenste rij staat. In tvOS 17 ondersteunt Top Shelf tot 8 widgets met aangepaste achtergronden en interactieve elementen. De ontwikkelaar implementeert TVTopShelfProvider om inhoud te leveren.

Top Shelf-stijlen

Er zijn drie Top Shelf-stijlen beschikbaar: Sectioned — gecategoriseerde lijst (series per genre), Inset — centraal element met gedetailleerde beschrijving (aanbevolen film), Photo — afbeeldingenraster (fotoalbums). Het systeem werkt Top Shelf op de achtergrond bij via BGTaskScheduler, vergelijkbaar met watchOS. De provider moet inhoud snel retourneren — tvOS cached gegevens gedurende 24 uur.

App-scherm

Het tvOS-startscherm bestaat uit een Top Shelf-rij en een app-raster. Gebruikers kunnen pictogrammen herschikken en mappen maken. tvOS verwijdert automatisch apps uit het geheugen bij gebrek aan bronnen, dus de ontwikkelaar moet UISceneDidDisconnectNotification correct afhandelen en de status herstellen bij herstart.

SwiftUI voor Apple TV

SwiftUI wordt volledig ondersteund in tvOS vanaf tvOS 13. Apple raadt SwiftUI aan voor alle nieuwe projecten. Dezelfde SwiftUI-code werkt op iOS, iPadOS, macOS en tvOS met minimale aanpassingen voor Focus Engine. SwiftUI voor tvOS biedt de modificatoren .focusable(), .focusSection(), .onPlayPauseCommand en .onExitCommand.

Aanpassing aan tvOS

Bij het overzetten van een iOS-app naar tvOS moet u: TabView vervangen door NavigationView met focusnavigatie, lettergroottes vergroten (minimaal 30pt voor koppen, 22pt voor tekst), marges toevoegen (minimaal 40pt van randen — veilig gebied op tv's). tvOS ondersteunt geen UIAlertController met tekstveld, UIWebView en MFMailComposeViewController.

Ontwerpaanbevelingen

Apple HIG voor tvOS: minimale aanraakoppervlakgrootte 60×60 punten, tekst leesbaar op 3 meter (lettergrootte niet minder dan 22pt voor body), tekstcontrast 4.5:1, donkere achtergrond (lichte achtergrond spiegelt op OLED-tv's), alle elementen toegankelijk zonder complexe gebaren. Resolutie: Apple TV 4K levert 3840×2160 (4K) of 1920×1080 (HD) bij 60 FPS. Alle afbeeldingen moeten @2x (voor 1080p) en @4x (voor 4K) zijn.

TVMLKit en mediatoepassingen

TVMLKit — een framework voor het maken van media-apps op tvOS met webtechnologieën: JavaScript (TVJS) en TVML (Apple-specifieke XML). TVMLKit-apps hebben geen compilatie nodig — de interface wordt van de server geladen, waardoor inhoudsupdates mogelijk zijn zonder App Review. Het wordt gebruikt door grote streamingdiensten voor inhoudscarrousels.

TVML: sjabloonstructuur

TVML biedt kant-en-klare sjablonen: CatalogTemplate (catalogus met secties), ProductTemplate (inhoudsdetailpagina), FormTemplate (aanmeldformulieren), LoadingTemplate (laadindicator). Sjablonen worden beschreven in XML en gestyled via CSS-achtige attributen. TVJS-code verwerkt drukken en roept native API's aan.

<!-- CatalogTemplate — filmcatalogus op TVML -->
<document>
  <catalogTemplate>
    <banner>
      <title>Nieuwe films</title>
      <description>Nieuwe premières en exclusieven</description>
    </banner>
    <section>
      <header>
        <title>Populair</title>
      </header>
      <items>
        <lockup>
          <img src="https://cdn.example.com/movie1.jpg" width=300 height=450/>
          <title>Interstellar</title>
        </lockup>
        <lockup>
          <img src="https://cdn.example.com/movie2.jpg" width=300 height=450/>
          <title>Inception</title>
        </lockup>
      </items>
    </section>
  </catalogTemplate>
</document>

Het TVML CatalogTemplate bevat een banner met titel en secties met lockup-elementen. Elke lockup is een filmkaart met afbeelding en titel. Focus Engine beheert automatisch de navigatie tussen lockup-elementen. Bij indrukken ontvangt de TVJS-handler de select-gebeurtenis en kan een detailpagina weergeven via ProductTemplate.

TVJS: gebeurtenisafhandeling

TVJS is een JavaScript-omgeving die geïsoleerd is van de hoofdapp. TVJS-code wordt aangeroepen bij het laden van een TVML-sjabloon en het afhandelen van gebeurtenissen. TVJS heeft toegang tot native API's via Appliance en Player voor videoweergavecontrole. Apple raadt aan TVMLKit alleen te gebruiken voor media-apps met frequente inhoudsupdates. Voor games en interactieve apps heeft SwiftUI de voorkeur.

tvOS-apps publiceren

Een tvOS-app publiceren vereist een Apple Developer Program-abonnement ($99/jaar). De app wordt via App Store Connect geüpload als afzonderlijk product of als onderdeel van een universele binaire (iOS + tvOS). App Review controleert stabiliteit, HIG-naleving en de 4 GB-groottebeperking.

Bouwen en distribueren

Xcode maakt een tvOS-doel met de extensie .app (.ipa-pakket). Architectuur — arm64 (Apple TV gebruikt ARM-chips van Apple Silicon). tvOS ondersteunt geen frameworks met i386 of x86_64. De app wordt ondertekend met een Apple Development-certificaat (testen) of Apple Distribution-certificaat (publicatie). Distributie via Volume Purchase Program voor zakelijke klanten is mogelijk.

App Review-vereisten

Speciale tvOS-vereisten: alle interface-elementen moeten toegankelijk zijn via Focus Engine zonder touchscreen of toetsenbord. Apps die autorisatie vereisen, moeten Single Sign-On (SSO) ondersteunen via de iTunes Store. Reclame-inhoud mag de weergave niet onderbreken zonder toestemming van de gebruiker. De geüploade binaire grootte mag niet groter zijn dan 4 GB.