Смотреть шоу, телеканалы, спортивные трансляции, фильмы и другой контент на Smart TV, используя приложения видеоплатформ — уже типовой сценарий. По данным на конец 2025 года, объём потребления контента в VK Видео увеличился в 2,1 раза (на 110%) по сравнению с аналогичным периодом 2024 года. Наибольшее вовлечение аудитории зафиксировано на платформе Smart TV: в начале 2026 года среднее время просмотра на одного пользователя — 241 минута. При этом многие не думают, как устроен софт для большого экрана.

Я Антон Халин, старший разработчик видеоплатформы VK. До перехода в команду VK я занимался веб-разработкой и почти не задумывался о специфике приложений для телевизоров: платформенных ограничениях, управлении с пульта и особенностях интерфейсов «для дивана». Со временем понял, что это отдельный мир со своими правилами.

В этой статье разберу, чем разработка под Smart TV отличается от обычного веба и какие ключевые моменты встречаются на старте.

Начнём с базы: что такое Smart TV

Smart TV часто считают телевизором с доступом в интернет и приложениями. Но это полноценная программная платформа с возможностями и ограничениями — ближе к мобильным устройствам.

Единого стандарта у Smart TV нет. Каждая платформа по-своему разрабатывает базовые функции: доступ в сеть, магазин приложений, голосовых помощников, подключение периферии и регулярные обновления ПО. Именно из-за этой разнородности разработка под телевизоры сложнее, чем кажется.

Мир устройств Smart TV чётко фрагментирован — большинство брендов использует всего несколько типов операционных систем. Например, в VK Видео мы выделяем эти типы ОС:

• Apple TV

• Android TV (Яндекс ТВ, Салют ТВ, Huawei, Xiaomi)

• Web-based (Samsung, LG, Hisense)

Web-based устройства — телевизоры или приставки, работающие на веб-технологиях (HTML, JavaScript, CSS). Многие бренды создают и продвигают свои ОС, поэтому в web-based нет единого стандарта. 

Особенности проектирования интерфейсов: забываем о вебе

Для меня, как веб-разработчика в прошлом, стало открытием, что подходы к UX/UI нужно пересмотреть. Основная причина — принципиально иной способ взаимодействия. Рассмотрим это на примерах для наглядности.

Линейная навигация

Пользователь управляет интерфейсом через D-pad (крестовину) на пульте: вверх, вниз, влево, вправо, выбор (OK). 

Поэтому важно, чтобы линейные переходы между элементами были логичными и предсказуемыми. Также некоторые производители (например, LG с Magic Remote) добавляют на пульте к D-pad поддержку указателя, имитирующего мышь. И нужно дублировать логику навигации и для него.

Принцип 10-foot UI 

При разработке приложений под Smart TV нужно проектировать интерфейс так, чтобы его было видно с расстояния 10 футов, или 3 метра. Поэтому в UI должны преобладать:

• крупные элементы;

• чёткие контуры;

• визуал (минимум текста).

Также рекомендуют использовать сетку и группировку элементов, но это уже похоже на привычную веб-разработку.

Best Practices и гайдлайны 

У Smart TV есть свои лучшие практики в UX/UI. Это боковое меню, top shelf («верхняя полка»), скелетоны — визуальные заготовки элементов интерфейса, которые видит пользователь во время загрузки страницы или экрана.

Часто вендоры дают строгие рекомендации по дизайну, особенно для приложений с видеоконтентом. Если проигнорировать их требования, приложение могут отклонить при модерации в магазине.

Примечание. Подчеркну, что при разработке интерфейсов нужно учитывать, что у разных технологий дисплеев (например, OLED, QLED) отличается контрастность. 

Управление навигацией

При разработке приложений под Smart TV важно проработать навигацию и логику управления с пульта. Рассмотрим на примерах. 

Допустим, фокус на элементе в строке 1 кластера 1. Как понять, куда перейдёт фокус при долгом нажатии стрелки вправо?

Можно предположить, что в кластер 2, потом обратно в 1 и далее как на картинке.

Или наоборот, переходы должны идти из кластера в кластер, как показано на изображении ниже. 

Правильного ответа нет, так как нет единого стандарта — это и основное ограничение, и уникальность. Каждый сам устанавливает правила навигации для своего приложения — телевизор скажет, какой keyCode вызывается при нажатии на пульт, остальное на плечах разработчика.

Сложности могут возникать даже при более корректном подходе с линейной навигацией интерфейсов, когда кластеры чётко структурированы. 

Например, здесь неочевидно, с какого кластера можно и правильно переходить на кнопку поиска.

При проектировании интерфейсов и программировании навигации есть множество подводных камней, с которыми можно столкнуться. 

Технологический стек

С точки зрения технологий разработка под Smart TV не требует узкой специализации: если вы пишете на JavaScript, то вы уже умеете писать под ТВ.

Но есть нюанс. Под капотом у большинства Smart TV — Chromium, и его версии отстают от актуальных и зависят от модели и года выпуска телевизора. Кроме того, у каждой ОС своя таблица совместимости версий ОС и Chromium — её стоит учитывать при разработке.

Важно:

• Поддержка современных API не гарантирована, используйте полифилы (polyfill) — решения, благодаря которым современные функции JavaScript, HTML5 и CSS работают там, где они изначально не поддерживались.

• Нужно сразу определиться с оптимальной стратегией сборки приложения. Одна сборка на каждую ОС для максимума совместимости (минимализм в выборе фич) или несколько таргетированных под разные версии ОС (больше контроля, но сложнее поддержка).

Для стека подход классический — его можно сформировать под задачу:

• Нужен быстрый старт, стабильность, а писать костыли для навигации и работы с TV API не хочется. Используйте стартовые шаблоны или библиотеки от вендоров, а также решения open-source.

• Нужна мультиплатформенность (web-based, Android, tvOS). Берите кроссплатформенный фреймворк или библиотеку (например, React Native).

• Хочется свой «велосипед». Подберите решение на свой вкус — например, Vanilla JS, React и другие. Главное — полифилить под нужную версию Chromium.

Тестирование

У тестирования приложений под Smart TV есть специфика, и зачастую нужен большой стенд и само ТВ-устройство. Теоретически можно обойтись без реального телевизора — у некоторых брендов есть симуляторы или эмуляторы. А ещё мы можем попробовать открыть и протестировать приложение в старом браузере, ведь под капотом Chromium. Но это не серебряная пуля. Вот пример из моей практики.

Однажды мне прилетел баг-репорт: на старом телевизоре с WebOS приложение зависало и перезагружалось при открытии и до экрана онбординга не доходило. При этом в эмуляторе и браузере всё работало. На скриншоте видно, что я использую симулятор и экран открывается без проблем.

Посмотрел версию 53 Chromium — согласно документации, на этом ТВ была именно она — на Windows при помощи VM на Mac.

Я подозревал, что не хватает памяти. Попытался использовать performance.memory в отладчике самого телевизора, но безуспешно — API работал не так, как я ожидал, и полезной информации не дал.

Я попробовал подход «Разделяй и властвуй»: последовательно удалял элементы, пока у меня не остались голый HTML и CSS. Проблема сохранилась.

Когда увидел пустой экран, сразу понял — дело в рендеринге эффекта размытия на CPU. Чтобы исправить, применил хак transform: translate3d(0,0,0), который принудительно задействует GPU (композитинг). Нагрузка упала, зависания пропали.

Вывод — тестировать приложения под Smart TV исключительно на эмуляторах и симуляторах недостаточно:

• симулятор не всегда точно отражает поведение железа;

• эмуляторы и симуляторы могут не воспроизводить специфические баги, связанные с памятью;

• эмуляторы и симуляторы сложно ставить под некоторые архитектуры процессоров (например, Apple Silicon).

В VK Видео мы тестируем на реальных устройствах. Для этого в наших офисах есть стенды с множеством ТВ, на которых проверяем финальные сборки приложения. 

Подытожим — вот советы, которые помогут на старте разработки приложения:

• Учитывайте ограничения ОС конкретного бренда. Например, иногда сильно урезан LocalStorage.

• Ориентируйтесь при разработке на аппаратные ограничения ТВ-устройств.

• Убедитесь, что нужный WebAPI доступен. Если он закрыт, изучите документацию — возможно, он есть в TV API.

От теории к практике: сборка приложения для ТВ

Разберём адаптацию приложения под Smart TV на примере WebOS, возможности CLI-инструмента и сборку пакета формата .ipk, который подходит для телевизоров LG.

В документации есть два варианта:

• установить WebOS CLI;

• установить расширение для VSC — WebOS Studio. По сути это графический интерфейс для CLI.

Мне привычнее работать через CLI, который называется ares. 

Документация советует команду ares-generate. Видим, что шаблонов несколько, но нас сейчас интересует базовый.

Вводим команду — и CLI просит заполнить поля. Что-то похожее мы делаем, когда пишем npm init. 

Видим, что ares сгенерировал шаблон — так выглядит файловая структура. Файл appinfo чем-то похож на package.json для NPM-пакета, который хранит метаинформацию приложения.

Видим сервисную библиотеку от WebOS для общения с внутренними сервисами телевизора. В файле index.html лежит Hello World. 

Есть 2 варианта работы: 

• вести разработку в папке webos-app;

• поместить в неё уже готовый бандл приложения и формировать установочный файл проекта для ТВ.

Команда для сборки проекта — ares-package. 

Выполняем её и получаем установочный файл для ОС WebOS с расширением .ipk. 

Если нужно, можно проверить сразу в симуляторе, работает ли сборка проекта. Для этого его нужно установить на свой компьютер — список доступных симуляторов здесь. После этого открываем файл формата .ipk в запущенном симуляторе.

Установка на ТВ на примере WebOS

У нас уже есть установочный файл — нужно подключиться к ТВ и установить его. 

1. Регистрируемся на сайте девелоперов WebOS

   

2. Устанавливаем на телевизор приложение Developer Mode из магазина и вводим данные, которые указали до этого при регистрации на сайте. После этого будет можно перевести ТВ в режим разработчика.

   

Согласно документации, нужно связать телевизор и ПК через ares командой ares-setup-device. 

Вводим данные из приложения ТВ. Затем запускаем установку и указываем ТВ, которому нужен софт, и путь до установочного файла.

Если всё прошло успешно, в списке приложений появится дефолтная иконка от ares-cli. Профит — приложение перенесено на Smart TV и готово к работе.

Что в итоге

Разработка приложений под Smart TV — задача со своей спецификой. Нужно учитывать разные аспекты, многие из которых неочевидны для разработчиков из других областей. Это выход за рамки привычного веба и смена парадигмы мышления: от свободы мыши и клавиатуры к линейной навигации, от мощных десктопов к ограниченным ТВ-системам, от современных веб-стандартов к забытым хакам для устаревших браузеров. 

При этом порог входа в разработку под Smart TV не так уж высок — на старте можно опираться на опыт и знания из других областей разработки. Можно начать с WebOS: собрать и установить простое приложение на ТВ. 

А вы сталкивались с разработкой под SmartTV? Что для вас стало сложностью или инсайтом? Делитесь опытом.