Welcome and hope these information can be helpful to you. We placed some tips and tricks for our experience around three years developing for Smart TV applications.
Play with Smart TVs should be fun, if you like to be challenged. There are a lot of devices, with different operating systems, browsers engines and hardware level. Keep in mind that you will create applications running on these low end devices, with hardware limitations and obsolete operating systems.
Some devices have motion control support, such as webOS (LG operating system). This is a mandatory functionality so you need to support it to be approved in the app store. In the same way, Samsung has mandatory functionalities, like multitasking.
| Manufacturer | Operating System | Web Engine |
|---|---|---|
| Samsung | Tizen¹ 2015 | Webkit r152340 |
| Samsung | Tizen¹ 2016 | Webkit r152340 |
| Samsung | Tizen¹ 2017 | Chromium M47 |
| Samsung | Tizen¹ 2018 | Chromium M56 |
| Samsung | Tizen¹ 2019 | Chromium M63 |
| Samsung | Orsay¹ | - |
| LG | webOS | Chromium / WebKit 538.2- |
| LG | NetCast | WebKit 537.1- |
| Sony | Linux | - |
| Sony | Android | - |
| Panasonic | Firefox OS | - |
| Philips | NetRange | - |
| TCL | NetRange | - |
| Philco | NetRange | - |
¹ - Linux based OS
https: You will play with low end and old devices. It means obsolate software with low resources, and these devices usually doesn't play well with encryptation.- DOM level APIs: like
document.*,element.*,JSON.parseandXMLHttpRequest, it costs for the TV to process. - DOM update: avoid updates when there is an animation in progress, it causes the framerate dropping dramatically. Always do one thing at a time.
.focus(): It affects performance. Use CSS classes to know which element is focused.
- Try to use images in place of CSS for the properties:
border,background,box-shadowandgradient, because everything that is generated via CSS, needs to be calculated, rendered and then painted. opacityandtransformare properties that can be animated (in moderation) because they perform well on TVs.- Export your images with low quality, we can say to you that 40% is enough. Users will use your application a little bit far from the TV.
- Avoid using properties
gridandflexbecause some TVs do not fully support it.
