Build Your First App for webOS TV

Web apps for webOS TV are basically very similar to standard web apps. Further, they are given access to hardware and OS features typically available for native apps. So if you have an experience in building web apps, you can start developing web apps for webOS TV easily, with your knowledge in standards-based web technologies, such as HTML, CSS, and JavaScript. For information about using standard web API in developing a web app for webOS TV, see Supported Web API.

Here’s how you build your first app for webOS TV.

Create an app with CLI

  1. Download and install webOS TV CLI.

  2. Create a new app with the ares-generate command. Replace "YOUR_PATH" with the path where you want to create app directory first_app. If you do not specify the path, the app directory will be created in the current working directory.

    ares-generate -t basic YOUR_PATH/first-app
    

    With this example, you will use a template named basic to generate a new app.

  3. Type in app ID, title, and version.

    ? app id com.yourdomain.app.firstapp 
    ? title HelloWorld 
    ? version 0.0.1
    

    If the app is successfully generated, you will see Success.

    Generating basic in YOUR_PATH/first-app
    Success
    

Now you have an app in the first-app directory.

You can try running the app on the simulator, or if you have a real TV device and want to test the app on it, you need to package and install the app first.

Launch the app on the simulator

  1. Download and install the webOS TV 22 Simulator.

  2. Launch your app on the simulator with the area-launch command.

    ares-launch -s 22 YOUR_PATH/first-app
    

    If the app is successfully launched, you will see Hello, World! on the simulator.

    note

    If an error occurs with the above command on Linux, uncapitalize the last part of the file name of the Simulator's AppImage file (AppImage to appimage) and try again.

Package, install, and launch the app on a TV device

To test the app on a TV device, you first need to install Developer Mode app and connect your PC with the TV device. For how, see Developer Mode App.

  1. Package the app in the first_app directory with the ares-package command.

    ares-package YOUR_PATH/first-app
    

    If packaging is successful, you can see the created package (.ipk) file in the current working directory.

    note

    You can specify a directory where the package file is to be created using the -o option.
    Example

    ares-package YOUR_PATH/first-app -o YOUR_PATH/output 
    

    With this example, the package (.ipk) file will be created in the output directory under YOUR_PATH.

  2. Install the package file to the TV device with the ares-install command. Replace [TARGET_DEVICE] with your device name. Be sure to type correctly the file name of your package.

    ares-install --d [TARGET_DEVICE] com.yourdomain.app.firstapp_0.0.1_all.ipk
    
    note
    • For how to check and manage the list of registered devices, see ares-setup-device.

    • If you have specified the directory where the package file is to be created as in the above example, the command will be:

      ares-install --d [TARGET_DEVICE] YOUR_PATH/output/com.yourdomain.app.firstapp_0.0.1_all.ipk
      
  3. Launch the app on the TV device with the area-launch command.

    ares-launch --d [TARGET_DEVICE] com.yourdomain.app.firstapp
    

    If the app is successfully launched, you will see Hello, World! on the TV device.

See also

Here's the list of recommended activities you can do next.

  • To create a hosted web app, go to Hosted web app. If you are planning on an app that requires continuous update, a hosted web app is a good choice.

  • To learn about the lifecycle of an app, go to App Lifecycle. Understanding the app lifecycle will help you have a rough sketch on how your app will work.

  • To learn about JS services on webOS, go to JS Service Basics. JS services allow your app to do some work, even when it is not running.

No Headings