tvOS: การพัฒนา Apple TV ด้วย Focus Engine

tvOS คืออะไร?

tvOS — ระบบปฏิบัติการของ Apple สำหรับกล่องรับสัญญาณ Apple TV บนพื้นฐานเคอร์เนล Darwin XNU เดียวกับ iOS เปิดตัวครั้งแรกเมื่อวันที่ 30 ตุลาคม 2015 พร้อม Apple TV รุ่นที่ 4 tvOS แทนที่ Apple TV Software รุ่นเก่า (บนพื้นฐาน iOS ไม่มี App Store และ SDK) ระบบถูกปรับให้เหมาะสมสำหรับการทำงานบนทีวีด้วยความละเอียดสูงสุด 4K HDR (Dolby Vision) และเสียง Dolby Atmos

ตามข้อมูลของ Apple (WWDC 2025) tvOS ถูกติดตั้งบน Apple TV HD (2015), Apple TV 4K (2017, 2021, 2022) และรวมอยู่ใน Smart TV บางรุ่นผ่าน AirPlay Apple TV ใช้ชิป A8 (HD), A10X Fusion (4K รุ่นที่ 1), A12 Bionic (4K รุ่นที่ 2) และ A15 Bionic (4K รุ่นที่ 3) ทุกรุ่นรองรับ tvOS 17 tvOS ไม่มีกล้อง ไมโครโฟน (ยกเว้นรีโมท) หน้าจอสัมผัส หรือ GPS

คุณสมบัติหลักของ tvOS คือ Focus Engine ซึ่งแทนที่การควบคุมแบบสัมผัสด้วยการนำทางแบบโฟกัส ผู้ใช้เลื่อนการเลือกระหว่างองค์ประกอบ UI โดยใช้ Siri Remote นักพัฒนาสร้างแอปด้วย Swift/SwiftUI (เนทีฟ) หรือ JavaScript/TVML (แอปสื่ออย่าง Netflix, Hulu)

ประวัติเวอร์ชัน tvOS

tvOS 9 (2015) — เวอร์ชันแรกที่มี SDK และ App Store tvOS 10 (2016) — การเข้าสู่ระบบครั้งเดียว (SSO) สำหรับการสมัครสมาชิกเคเบิล tvOS 11 (2017) — รองรับ Amazon Prime Video และโหมดอัตโนมัติ tvOS 12 (2018) — Dolby Atmos tvOS 13 (2019) — โหมดผู้ใช้หลายคน tvOS 17 (2023) — FaceTime, VPN, โปรไฟล์เสียงผ่าน HDMI

สถาปัตยกรรม tvOS และความแตกต่างจาก iOS

สถาปัตยกรรมของ tvOS ใช้สแต็กเดียวกับ iOS: เคอร์เนล XNU, บริการระบบ Core Services, เลเยอร์ Media และเลเยอร์ผู้ใช้ Cocoa Touch อย่างไรก็ตาม มีความแตกต่างที่สำคัญเกี่ยวกับลักษณะเฉพาะของแพลตฟอร์มทีวี

ข้อจำกัดด้านฮาร์ดแวร์

Apple TV 4K รุ่นที่ 3 ใช้ A15 Bionic พร้อม 6 คอร์ CPU (2 สมรรถนะ 4 ประสิทธิภาพ) และ GPU 5 คอร์ RAM — 4 GB (พื้นที่จัดเก็บ SSD ภายในตั้งแต่ 64 GB) ระบบไม่มีพื้นที่จัดเก็บในเครื่องแบบถาวรในความหมายดั้งเดิม: ข้อมูลแอปทั้งหมดอาจถูกลบโดย tvOS เมื่อพื้นที่ไม่เพียงพอ (purgeable) นักพัฒนาต้องใช้ iCloud Key-Value Storage หรือ CloudKit เพื่อรักษาสถานะ

TVMLKit และ TVJS

TVMLKit — เฟรมเวิร์กเฉพาะของ tvOS ที่ช่วยให้สร้างอินเทอร์เฟซด้วย JavaScript และ TVML (ภาษาเหมือน XML เฉพาะของ Apple) TVMLKit โหลด JSON/XML จากเซิร์ฟเวอร์และแสดงผลส่วนประกอบ UI เนทีฟ นี่คือเทคโนโลยีหลักสำหรับบริการสตรีมมิ่ง: Netflix, Hulu, Amazon Prime Video ใช้ TVMLKit TVJS — สภาพแวดล้อม JavaScript ที่ทำงานในบริบทที่แยกออกจากกัน

การขาดพื้นที่จัดเก็บถาวร

tvOS จัดการพื้นที่ดิสก์โดยอัตโนมัติ: เมื่อพื้นที่ไม่เพียงพอ ระบบอาจลบแคช ทรัพยากรที่ดาวน์โหลด และแม้แต่แอปเอง (โดยเก็บไอคอนไว้) เมื่อเปิดอีกครั้ง แอปต้องคืนค่าสถานะ iCloud NSUbiquitousKeyValueStore เป็นพื้นที่จัดเก็บถาวรที่รับประกันเพียงแห่งเดียวสำหรับการตั้งค่า (สูงสุด 1 MB ต่อแอป)

import Foundation

// // การเก็บรักษาและคืนค่าสถานะใน tvOS
final class StateManager {

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

    // กำลังบันทึกความคืบหน้าการรับชม
    func saveProgress<T: Codable>(_ value: T, for key: String) {
        if let data = try? coder.encode(value) {
            store.set(data, for: key)
            store.synchronize()
        }
    }

    // กำลังคืนค่าสถานะหลังจากลบแคช
    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)
    }

    // กำลังจัดการการแจ้งเตือนการเปลี่ยนแปลงบนอุปกรณ์อื่น
    init() {
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(ubiquitousKeyValueStoreDidChange),
            name: NSUbiquitousKeyValueStore.didChangeExternallyNotification,
            object: store
        )
    }

    @objc
    private func ubiquitousKeyValueStoreDidChange(_ notification: Notification) {
        print("ข้อมูลเปลี่ยนแปลงบนอุปกรณ์อื่น")
    }
}

StateManager ใช้ NSUbiquitousKeyValueStore เพื่อบันทึกสถานะแอปบน tvOS เนื่องจากพื้นที่จัดเก็บในเครื่องสามารถถูกล้างโดยระบบ มีเพียง iCloud เท่านั้นที่รับประกันความคงอยู่ของข้อมูล store.synchronize() ส่งข้อมูลไปยังเซิร์ฟเวอร์ทันที ในขณะที่ didChangeExternallyNotification แจ้งให้แอปทราบเกี่ยวกับการเปลี่ยนแปลงจากอุปกรณ์อื่นของผู้ใช้

Focus Engine: การนำทางและโฟกัส

Focus Engine — กลไกสำคัญของ tvOS ที่แทนที่อีเวนต์สัมผัสด้วยการนำทางแบบโฟกัส ผู้ใช้เลื่อนการเลือกระหว่างองค์ประกอบ UI โดยใช้ Siri Remote (พื้นผิวสัมผัสหรือปุ่ม) ระบบคำนวณองค์ประกอบโฟกัสถัดไปโดยอัตโนมัติตามระยะทางและทิศทางการเคลื่อนที่

UIFocusEnvironment และลำดับชั้นโฟกัส

องค์ประกอบ UI แต่ละรายการที่สามารถรับโฟกัสได้จะใช้โปรโตคอล UIFocusEnvironment UIKit กำหนดลำดับการนำทางโดยอัตโนมัติตามเรขาคณิตขององค์ประกอบ นักพัฒนาสามารถแทนที่โฟกัสที่ต้องการผ่าน preferredFocusEnvironments ระบุอาร์เรย์ของ focusEnvironment ย่อย และควบคุมการเคลื่อนที่ผ่าน UIFocusHeading (up, down, left, right) UIFocusGuide อนุญาตให้กำหนดเส้นทางที่กำหนดเองสำหรับเลย์เอาต์ที่ไม่ธรรมดา

UIFocusEffect และพารัลแลกซ์

tvOS เพิ่ม UIFocusEffect ให้กับองค์ประกอบที่โฟกัสโดยอัตโนมัติ: เงา การเน้น และเอฟเฟกต์พารัลแลกซ์ (การขยับเมื่อเอารีโมท) นักพัฒนาสามารถปิดเอฟเฟกต์ผ่าน focusedValue หรือปรับแต่งผ่าน UIFocusEffect.transform ใน SwiftUI พารัลแลกซ์ถูกเพิ่มด้วยตัวปรับแต่ง .hoverEffect(.highlight)

import SwiftUI

// // ส่วนประกอบ tvOS พร้อมโฟกัสแบบกำหนดเอง
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 บนรีโมท
            startPlayback()
        }
        .focusable()
        .focusEffect { phase in
            // เอฟเฟกต์โฟกัสแบบกำหนดเอง
            phase == .active ?
                AnyView(self.scaleEffect(1.08)) :
                AnyView(self.scaleEffect(1.0))
        }
    }

    private func startPlayback() {
        print("กำลังเล่น: \(movie.title)")
    }
}

// // หน้าจอหลักพร้อมกริดภาพยนตร์
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() // จัดกลุ่มสำหรับการนำทาง
    }
}

MovieCardView แสดง Focus Engine ใน SwiftUI: ตัวปรับแต่ง .focusable() ทำให้องค์ประกอบสามารถโฟกัสได้ .onHover ติดตามการเปลี่ยนแปลงสถานะ .focusEffect อนุญาตให้ทำแอนิเมชันโฟกัสแบบกำหนดเอง .onPlayPauseCommand จัดการการกดปุ่ม Play/Pause บน Siri Remote focusSection จัดกลุ่มกริดสำหรับการนำทางแบบวนรอบ

Siri Remote: ท่าทางและปุ่ม

Siri Remote รุ่นที่สอง (2021) มีพื้นผิวสัมผัส 5 ปุ่ม และไมโครโฟน tvOS รองรับท่าทาง: ปัด (นำทาง), แตะ (เลือก), แตะสองครั้ง (กึ่งกลาง), หยิก-ซูม (ภาพ), กดค้าง (เมนูบริบท) UIPress ประเภท .select, .playPause, .menu, .upArrow, .downArrow, .leftArrow, .rightArrow — ประเภทการกดที่กำหนดไว้ล่วงหน้า ไมโครโฟนของรีโมทใช้สำหรับ Siri และการค้นหาด้วยเสียง

Top Shelf และหน้าจอแอป

Top Shelf คือพื้นที่บนหน้าจอหลักของ Apple TV ที่แสดงเนื้อหาแบบไดนามิกของแอปเมื่ออยู่ในแถวบนสุด ใน tvOS 17 Top Shelf รองรับวิดเจ็ตสูงสุด 8 รายการพร้อมพื้นหลังที่กำหนดเองและองค์ประกอบเชิงโต้ตอบ นักพัฒนาสร้าง TVTopShelfProvider เพื่อให้เนื้อหา

สไตล์ Top Shelf

มีสามสไตล์ Top Shelf: Sectioned — รายการแบ่งหมวดหมู่ (ซีรีส์ตามประเภท), Inset — องค์ประกอบกลางพร้อมคำอธิบายโดยละเอียด (ภาพยนตร์แนะนำ), Photo — กริดรูปภาพ (อัลบั้มรูปภาพ) ระบบอัปเดต Top Shelf ในพื้นหลังผ่าน BGTaskScheduler คล้ายกับ watchOS ผู้ให้บริการต้องส่งคืนเนื้อหาอย่างรวดเร็ว — tvOS แคชข้อมูลเป็นเวลา 24 ชั่วโมง

หน้าจอแอป

หน้าจอหลักของ tvOS ประกอบด้วยแถว Top Shelf และกริดแอป ผู้ใช้สามารถจัดเรียงไอคอนใหม่และสร้างโฟลเดอร์ tvOS จะยกเลิกการโหลดแอปจากหน่วยความจำโดยอัตโนมัติเมื่อทรัพยากรต่ำ ดังนั้นนักพัฒนาต้องจัดการ UISceneDidDisconnectNotification อย่างถูกต้องและคืนค่าสถานะเมื่อเริ่มต้นใหม่

SwiftUI สำหรับ Apple TV

SwiftUI รองรับอย่างเต็มที่ใน tvOS ตั้งแต่ tvOS 13 Apple แนะนำ SwiftUI สำหรับโปรเจ็กต์ใหม่ทั้งหมด โค้ด SwiftUI เดียวกันทำงานบน iOS, iPadOS, macOS และ tvOS โดยปรับเปลี่ยนเล็กน้อยสำหรับ Focus Engine SwiftUI สำหรับ tvOS มีตัวปรับแต่ง .focusable(), .focusSection(), .onPlayPauseCommand และ .onExitCommand

การปรับให้เข้ากับ tvOS

เมื่อพอร์ตแอป iOS ไปยัง tvOS จำเป็นต้อง: แทนที่ TabView ด้วย NavigationView พร้อมการนำทางแบบโฟกัส เพิ่มขนาดฟอนต์ (ขั้นต่ำ 30pt สำหรับหัวเรื่อง 22pt สำหรับข้อความเนื้อหา) เพิ่มระยะขอบ (ขั้นต่ำ 40pt จากขอบ — พื้นที่ปลอดภัยบนทีวี) tvOS ไม่รองรับ UIAlertController พร้อมช่องข้อความ UIWebView และ MFMailComposeViewController

คำแนะนำการออกแบบ

Apple HIG สำหรับ tvOS: ขนาดพื้นที่สัมผัสขั้นต่ำ 60×60 จุด, อ่านข้อความได้จากระยะ 3 เมตร (ขนาดฟอนต์ไม่น้อยกว่า 22pt สำหรับเนื้อหา), ความคมชัดข้อความ 4.5:1, พื้นหลังสีเข้ม (พื้นหลังสว่างสะท้อนบนจอ OLED), องค์ประกอบทั้งหมดเข้าถึงได้โดยไม่ต้องใช้ท่าทางซับซ้อน ความละเอียด: Apple TV 4K แสดงผล 3840×2160 (4K) หรือ 1920×1080 (HD) ที่ 60 FPS รูปภาพทั้งหมดควรเป็น @2x (สำหรับ 1080p) และ @4x (สำหรับ 4K)

TVMLKit และแอปพลิเคชันสื่อ

TVMLKit — เฟรมเวิร์กสำหรับสร้างแอปสื่อบน tvOS โดยใช้เทคโนโลยีเว็บ: JavaScript (TVJS) และ TVML (XML เฉพาะของ Apple) แอป TVMLKit ไม่ต้องการการคอมไพล์ — อินเทอร์เฟซโหลดจากเซิร์ฟเวอร์ ทำให้อัปเดตเนื้อหาได้โดยไม่ต้องผ่าน App Review บริการสตรีมมิ่งรายใหญ่ใช้สำหรับ carousel เนื้อหา

TVML: โครงสร้างเทมเพลต

TVML มีเทมเพลตสำเร็จรูป: CatalogTemplate (แคตตาล็อกพร้อมส่วน), ProductTemplate (หน้ารายละเอียดเนื้อหา), FormTemplate (แบบฟอร์มเข้าสู่ระบบ), LoadingTemplate (ตัวบ่งชี้การโหลด) เทมเพลตอธิบายใน XML และจัดสไตล์ผ่านคุณลักษณะคล้าย CSS โค้ด TVJS จัดการการกดและเรียก API เนทีฟ

<!-- CatalogTemplate — แคตตาล็อกภาพยนตร์บน TVML -->
<document>
  <catalogTemplate>
    <banner>
      <title>ภาพยนตร์ใหม่ล่าสุด</title>
      <description>รอบปฐมทัศน์ล่าสุดและรายการพิเศษ</description>
    </banner>
    <section>
      <header>
        <title>ยอดนิยม</title>
      </header>
      <items>
        <lockup>
          <img src="https://cdn.example.com/movie1.jpg" width=300 height=450/>
          <title>อินเตอร์สเตลลาร์</title>
        </lockup>
        <lockup>
          <img src="https://cdn.example.com/movie2.jpg" width=300 height=450/>
          <title>จุดเริ่มต้น</title>
        </lockup>
      </items>
    </section>
  </catalogTemplate>
</document>

เทมเพลต TVML CatalogTemplate มีแบนเนอร์พร้อมหัวเรื่องและส่วนที่มีองค์ประกอบ lockup แต่ละ lockup คือการ์ดภาพยนตร์พร้อมรูปภาพและชื่อเรื่อง Focus Engine จัดการการนำทางระหว่างองค์ประกอบ lockup โดยอัตโนมัติ เมื่อกด ตัวจัดการ TVJS จะรับอีเวนต์ select และสามารถแสดงหน้ารายละเอียดผ่าน ProductTemplate

TVJS: การจัดการอีเวนต์

TVJS เป็นสภาพแวดล้อม JavaScript ที่แยกจากแอปหลัก โค้ด TVJS ถูกเรียกเมื่อโหลดเทมเพลต TVML และจัดการอีเวนต์ TVJS สามารถเข้าถึง API เนทีฟผ่าน Appliance และ Player สำหรับควบคุมการเล่นวิดีโอ Apple แนะนำให้ใช้ TVMLKit เฉพาะแอปสื่อที่มีการอัปเดตเนื้อหาบ่อยครั้ง สำหรับเกมและแอปเชิงโต้ตอบ SwiftUI เป็นที่นิยม

การเผยแพร่แอป tvOS

การเผยแพร่แอป tvOS ต้องสมัครสมาชิก Apple Developer Program ($99/ปี) แอปถูกอัปโหลดผ่าน App Store Connect เป็นผลิตภัณฑ์แยกต่างหากหรือเป็นส่วนหนึ่งของไบนารีสากล (iOS + tvOS) App Review ตรวจสอบความเสถียร การปฏิบัติตาม HIG และข้อจำกัดขนาด 4 GB

การสร้างและแจกจ่าย

Xcode สร้างเป้าหมาย tvOS ด้วยนามสกุล .app (แพ็กเกจ .ipa) สถาปัตยกรรม — arm64 (Apple TV ใช้ชิป ARM Apple Silicon) tvOS ไม่รองรับเฟรมเวิร์กที่มี i386 หรือ x86_64 แอปลงนามด้วยใบรับรอง Apple Development (ทดสอบ) หรือ Apple Distribution (เผยแพร่) สามารถแจกจ่ายผ่าน Volume Purchase Program สำหรับลูกค้าองค์กร

ข้อกำหนดของ App Review

ข้อกำหนดพิเศษของ tvOS: องค์ประกอบอินเทอร์เฟซทั้งหมดต้องเข้าถึงได้ผ่าน Focus Engine โดยไม่ต้องใช้หน้าจอสัมผัสหรือแป้นพิมพ์ แอปที่ต้องการการอนุญาตต้องรองรับการเข้าสู่ระบบครั้งเดียว (SSO) ผ่าน iTunes Store เนื้อหาโฆษณาไม่สามารถขัดจังหวะการเล่นโดยไม่ได้รับความยินยอมจากผู้ใช้ ขนาดไบนารีที่อัปโหลดต้องไม่เกิน 4 GB