Application Development Basics
Technical information for developing and using HTML5 applications. The basic mechanism is simple. Specify the application auid in autorun.txt and application information and launch method in manifest.json. Insert a USB drive into the monitor to launch the HTML5 application based on autorun.txt.
Structure
1. File Structure
When developing HTML5 applications, follow the directory and file structure rules below.
USB:/ ├ sony/ │ ├ autorun.txt // Specifies app ID │ └ apps/ │ └ webapps/ │ ├ <app name 1>/ // Application Folder Name │ │ └ app/ // Application Directory │ │ ├ manifest.json │ │ └ doc/ // Document Root │ ├ <app name 2>/ │ │ └ app/ │ │ ├ manifest.json │ │ └ doc/ │ └ ... └ media/ ├ video1.mp4 └ video2.mp4
- HTML5 application names can be specified as desired.
- Multiple HTML5 applications can be placed under /sony/apps/webapps/.
Tips
Only one application can run at a time. When installing multiple HTML5 applications to the monitor’s built-in storage simultaneously, place multiple applications under /sony/apps/webapps/.
2. Static File Placement
Static files such as HTML, JavaScript, CSS, and images (.html, .js, .css, .png, etc.) have different placement locations and access methods depending on the HTML5 application launch method.
For External Web Server Placement
Place static files on an external web server and specify the URL in the web_urlproperty of manifest.json.
For USB Drive or Monitor Built-in Storage Placement
Place static files in the /doc/ folder and specify the path in the local_pathproperty of manifest.json.
Example Static File Placement (local_path)
file://localhost/doc/<file_name>.html
3. Large File Placement (Videos, etc.)
For external web server placement, specify the URL in theweb_urlproperty of manifest.json, same as static files. For USB drive or monitor built-in storage placement, place files in the /media/ folder. The monitor will access them automatically without specifying a property in manifest.json.
Example Video File Placemen
file://localhost/media/<file_name>.mp4
Specifying autorun.txt for launch
autorun.txt is written based on JSON key/value format. All values are strings, and only the auid property is mandatory. For details and optional properties, see below. You can also specify HTML5 application operations (launch, install, delete).
autorun.txt Structure and Properties
Structure
In autorun.txt, specify the auid of the HTML5 application you want to launch. When a USB drive is inserted, the monitor reads autorun.txt, matches the auid with each application’s manifest.json, and launches the matching HTML5 application.
Correspondence between autorun.txt and manifest.json auid
USB:/ /sony/ ├ autorun.txt // auid ├ apps/webapps/ ├ <app name 1>/app/manifest.json // auid ├ <app name 2>/app/manifest.json // auid_1 ├ :
Tips
Only one auid can be specified in autorun.txt. Place multiple applications only when installing multiple HTML5 applications to the monitor’s built-in storage simultaneously.
Example
autorun.txt example
{
"action": "auid", // auid: Launch / copyapp: Install / removeapp: Delete
"auid": "<app ID>", // Mandatory. Application ID to launch
"copyapp": {
"app": "<app ID>", // Application ID to install to built-in storage
"media": "nocopy", // copy / sync / nocopy
"mode": "confirm", // confirm / auto / dryrun
"startup_uri": "<app ID>", // Application ID for power-linked launch
"home_menu_app": "false" // Home menu icon display true / false
},
"removeapp": {
"app": "<app ID>", // Application ID to delete
"media": "keep", // keep / remove
"mode": "confirm" // confirm / auto / purge
}
}Control Properties for Built-in Storage Placement
1. “copyapp”
When placing HTML5 applications in the monitor’s built-in storage, you can combine the following properties for more detailed control of installation behavior.
| Property | Mandatory/ Optional | Default Value | Description |
|---|---|---|---|
| action | Optional | auid | USB Drive Insertion Behavior Settings Control of processes automatically executed when a USB drive is inserted (Key settings in autorun.txt). Keys that can be set in autorun.txt are as follows: auid: Launches the HTML5 application with the specified auid (mandatory). copyapp: Installs the HTML5 application on the monitor. removeapp: Uninstalls the HTML5 application from the monitor. |
| auid | Mandatory | Specifies the auid. | |
| app | Optional | Specifies the auid or list of auids for the HTML5 application(s) to be installed. | |
| media | Optional | nocopy | Specifies installation behavior for USB:/media directory Specify one of the following behaviors for the /media directory on the USB drive: copy: Copies files from USB:/media. If a file with the same name exists on the monitor, it will be overwritten with the file from USB:/media.。 sync: Synchronizes files between the monitor and USB:/media. Files that do not exist in USB:/media will be deleted from the monitor. nocopy: Does not copy files. |
| mode | Optional | confirm | Specifies UI behavior during HTML5 app installation flow Specify the UI behavior during the installation flow as one of the following: confirm: Displays a confirmation dialog during the installation flow. auto: Does not display dialogs during the installation flow (automatic execution). dryrun: Does not install; launches the HTML5 app specified in startup_uri. |
| startup_uri | Optional | Specifies the auid corresponding to startup_uri. | |
| home_menu_app | Optional | FALSE | Specifies behavior for Home menu (Leanback Launcher) icon If an auid or uri is specified, an icon to launch it will be displayed in the Home menu. If false or an empty string is specified, the icon will not be displayed. |
About “startup_uri”
startup_uri is a child property of copyapp. By specifying an auid in startup_uri, you can configure the HTML5 application to launch automatically when the monitor powers on.
{
"action": "copyapp",
"auid": "<app ID>",
"copyapp": {
"app": "<app ID>",
"startup_uri": "<app ID>" // Optional. Specify when using power-linked launch
}
}2. “removeapp”
You can control uninstallation behavior using the following properties.
| Property | Mandatory/ Optional | Default Value | Description |
|---|---|---|---|
| app | Optional | Specify the application information to be removed. | |
| media | Optional | keep | Specifies uninstallation behavior for USB:/media keep: Does not delete AV media files. remove: Deletes AV media files. |
| mode | Optional | confirm | Specifies UI behavior during HTML5 app uninstallation flow confirm: Displays a confirmation dialog during the uninstallation flow. auto: Does not display dialogs during the uninstallation flow (automatic execution). purge: – Uninstalls all installed HTML5 apps and AV media files. – Displays a confirmation dialog during the flow. |
Specifying manifest.json for information
manifest.json specifies application information such as auid, display name, launch URL, and splash image.
The manifest file must be named “manifest.json”.
Example web_url
{
"name": {
"default": "en_US",
"en_US": "<app display name>" // Application name displayed in Home menu
},
"auid": "com.example.myapp", // Reverse domain format (e.g., http://example.com → com.example)
"version": "1.0",
"manifest_version": "1.0",
"app": {
"launch": {
"web_url": "http://example.com/myapp" // URL specification
}
},
"splash": "splash.jpg",
"minimum_web_platform_version": "1.0"
}Example local_path
{
"name": {
"default": "en_US",
"en_US": "<app display name>" // Application name displayed in Home menu
},
"auid": "<app ID>",
"version": "1.0",
"manifest_version": "1.0",
"app": {
"launch": {
"local_path": "file://localhost/doc/index.html" // Path to HTML file launched via USB or built-in storage
}
},
"splash": "splash.jpg",
"minimum_web_platform_version": "1.0"
}manifest.json Property Details
| Field Name | Mandatory/ Optional | Description | ||
|---|---|---|---|---|
| name | Mandatory | Specifies the HTML5 application name. | ||
| default | Mandatory | Specifies the default display language (e.g., en_US). *An HTML5 application name definition corresponding to the specified language is required. | ||
| en_US | Specifies the HTML5 application name language (English). | |||
| ja_JP | Specifies the HTML5 application name language (Japanese). | |||
| … | *List HTML5 application names for each language as shown above, as needed. | |||
| auid | Mandatory | Specifies the auid. | ||
| version | Mandatory | Specifies the HTML5 application version number. | ||
| manifest_version | Mandatory | Specifies the manifest version. *Specify1.0 | ||
| app | Mandatory | Specifies HTML5 application information. | ||
| launch | Mandatory | Specify the startup page using one of the following methods. | ||
| local_path | Startup page specification method 1: Specify with a file path starting with file:// | |||
| web_url | Startup page specification method 2: URL starting with http:// or https:// When using https://, please note the following: 1: The monitor’s date and time settings must be accurate. 2: Use a properly issued server certificate. 3: Import the root certificate to the monitor via [Pro settings] → [HTML5 platform] | |||
| cold_boot_delay | Optional | Specifies the HTML5 app startup delay time (in milliseconds) when the display is turned on for the first time. The default value is 0. Used to specify the wait time until network connection is established, etc. | ||
| screen | Optional | Specifies screen settings. | ||
| orientation | Optional | Specifies display orientation. 0: Normal orientation (default) 90: Rotated 90 degrees clockwise 270: Rotated 270 degrees clockwise (90 degrees counterclockwise) *180 degrees cannot be specified. Tips: Configuration via Pro settings is recommended. Procedure: [Pro settings] → [HTML5 platform] → [Web app orientation] → Enable [Prioritize web app] and set orientation. *Pro settings take priority. | ||
| bgcolor | Optional | Specifies the background color (e.g.,#FFFFFFFF). | ||
| window_close | Optional | Specifies the behavior of window.close(). 0: Disabled (default) 1: Enabled | ||
| attachkeys | Optional | Specifies additional key events that can be acquired by the HTML5 app. See details | ||
| alert_dialog | Optional | Specifies the display behavior of alert dialogs. ignore: Does not display alert dialogs. ※If alert_dialog is not specified, alert dialogs will be displayed. | ||
| confirm_dialog | Optional | Specifies the display behavior of confirmation dialogs. yes: Display (default) no: Do not display | ||
| prompt_dialog | Optional | Sets the string to be displayed in the input field of the input dialog. When a string is specified, the input content is confirmed without user operation. | ||
| initial_input | Optional | BZ40P / BZ35P / BZ30P: not supported Specifies the default display quality settings to be applied. video: Settings suitable for video display (default) photo: Settings suitable for still image display | ||
| fixed_input | Optional | BZ40P / BZ35P / BZ30P: not supported Specifies behavior when switching HTML5 app content. Specifies the behavior when switching between still images, videos, and external input. false: Changes display quality settings according to content (default). true: Does not change display quality settings regardless of content. *Suppresses flickering during switching.。 | ||
| fixed_picture_mode | Optional | BZ40P / BZ35P / BZ30P: not supported Picture mode fixed setting. Fixes [Picture mode] regardless of playback content. When picture_mode is specified, the initial_input and fixed_input settings are disabled. none: Automatically switches [Picture mode] according to playback content (default). game: Always fixes picture mode to [Game]. *Use this if you want to reduce HDMI delay. *Use this if you want to reduce HDMI delay. | ||
| onsleep | Optional | Specifies the built-in browser behavior when the display is powered off by remote control operation. stop: Stops browser operation (default). pause: Pauses browser operation. Resumes when power is turned on. continue: Continues browser operation. | ||
| background | Optional | Specifies JavaScript behavior when the display is in the background. *Example: When YouTube is launched while an HTML5 app is running. true: Continues JavaScript operation. false: Stops JavaScript (default). | ||
| cache_files_and_images | Optional | Specifies cache behavior. true: Enables cache (default). *Enables caching of HTML, CSS, JavaScript, and video/still image content. false: Disables cache. | ||
| video | Optional | |||
| multiple_video_tags | Optional | BZ40P / BZ35P / BZ30P Not supported Specifies simultaneous use of multiple video elements. true: Allows simultaneous use of multiple video elements. *When true, the limit is 2K video x 2, and 4K + 2K is not allowed. false: Does not allow simultaneous use. *When multiple video elements are created, The later created one takes priority in a “last-wins” approach (default). | ||
| error_page | Optional | Specifies the error page. | ||
| default | Optional | Specifies the page when an HTTP error occurs. Available schemes are http://, https://, file://. e.g., http:// example.com/error/404.html | ||
| detail | Optional | Specifies error pages for each HTTP status code Available URL schemes are http://, https://, file://. e.g., This is an example specification for 403, 500, and timeout errors. See details. | ||
| splash | Optional | Specifies the splash image filename in the HTML5 app, such as splash.jpg. | ||
| reboot | Optional | Specifies behavior when the HTML5 app crashes. true: Automatically restarts the HTML5 application. false: Does nothing (default). | ||
| minimum_web_platform_version | Mandatory | Specifies the WebAppRuntime version. *Check navigator.userAgentin JavaScript (e.g., 1.0). | ||
Key event
Key event list and sample HTML5 application are available.
Monitor remote control key events ( [Home] key, channel operation keys, arrow keys, etc.) can be specified in the attachkeys property of manifest.json and received by the HTML5 application.
Example Specifying Each Key Event
"app": {
"attachkeys": [
"VK_HOME", // Home button
"VK_CH_UP", // Channel up
"VK_CH_DOWN" // Channel down
]
},Example Receiving Key Events
document.onkeydown = function(e) {
if (e.keyCode === VK_HOME) {
// Please implement a home key behavior here.
}
}Example for 403, 500, and Timeout Errors
An example of page configuration for error handling is shown below.
[
{“status_code” : “403”, “path” : “http://example.com/doc/403.html”},
{“status_code” : “500”, “path” : “file://localhost/doc/500.html”},
{“status_code” : “timeout”, “path” : “file://localhost/doc/timeout.html”}
]Standard web feature limitations
Not all specifications and features commonly supported in standard browsers and web environments are fully available on the monitor. For details, refer to the W3C/HTML5 API specifications.
Provision of Extended Object Tags and JavaScript APIs
BRAVIA Professional Displays provide proprietary extended object tags and JavaScript APIs.
Customized Object Tag
By specifying the following MIME types in the <object> tag, you can display various media within the HTML5 application. Use with JavaScript control code.
Example
- application/x-decimated-video Display HDMI input video within the HTML5 application
- application/x-multicast-video Multicast video playback
- application/x-4k-photo Display high-quality images
JavaScript API
JavaScript API is an interface for obtaining monitor status and control from within the HTML5 application.
Example
- sony.tv.DirectoryReader Retrieve file list in directory
- sony.tv.systemevents Detect monitor system events (input switching, power status, etc.)
- sony.tv.picturemode Get and change picture mode
Debugging method(Android TV OS 12 or earlier)
Remote debugging and log retrieval are available via adb command over Ethernet or Wi-Fi. Works with HTML5 applications stored in built-in storage, USB drive, or external web server.
Note
Debugging via USB cable connection between PC and monitor is not supported.
Setup
To use the debugging function, follow these steps:
- Monitor: Enable [Developer options]
Procedure: [Settings] → [Developer options] → Enable [Developer options]. - Install
adbcommand on PC
Install Android SDK Platform-Tools on PC to useadbcommand. - Connect PC to monitor
Connect from PC to monitor with the command below. Connection is via Ethernet or Wi-Fi.
adb connect <Monitor IP address>
Log Retrieval Method
Console Log Method
The monitor supports console log. Logcat displays not only javascript console.log() but also other system logs.
$ adb logcat -c # Clear buffer$ adb logcat -v time # Retrieve logs$ adb logcat -v time > log.txt # Use ">" (redirect) to save data
Log Stop Method
Press [Control] + [c] to stop.
Remote Debugging Method
The monitor supports remote debugging. You can debug HTML5 application running on the monitor from a PC browser.
WebAppRuntime v1.4.10 or later
1. Run command
Specify the application with <HTML5 application url>, and run the command below. This will enable remote debugging and start WebAppRuntime.
$ adb shell am start -a android.intent.action.VIEW -n com.sony.dtv.browser.webappruntime/.WebAppRuntimeActivity –es uri -e args ‘–remote-debugging-socket-name=tvsdk-debugging-socket’
2. Display Devices screen
Launch Chrome on PC and enter “chrome://inspect/#devices” in the address bar. The Devices screen will be displayed.
3. Run remote debugging
Click the “inspect” button under the model name on the Devices screen. A new DevTools window will open, and remote debugging will start.
– true Enables cache. The default value is “true”.
– false Disable cache.
WebAppRuntime v1.3.22 or earlier
1. Start WebAppRuntime
Run the command below. This will enable remote debugging and start WebAppRuntime.
$ adb shell am start -a android.intent.action.VIEW -n com.sony.dtv.browser.webappruntime/.WebAppRuntimeActivity -e args ‘–remote-debugging-socket-name=tvsdk-debugging-socket’
$ adb forward tcp:9222 localabstract:tvsdk-debugging-socket
2. Connect PC to monitor
Launch Chrome on PC and enter “http://localhost:9222” in the address bar to connect PC to monitor.
3. Display console log
Debug information and console log will be displayed in Chrome browser.
Disabling Cache Mode
To disable the cache function, configure in manifest.json. To delete cached images and files on page load, set the cache_files_and_images property to false in manifest.json.
{
"app": {
"cache_files_and_images" : false // Disable cache mechanism
}
}