Migrate Your Existing Web App (Fire TV)

Amazon Fire TV supports HTML5 web apps. If you have an existing web app that you want to make available on Fire TV, review the following checklist for migrating your web app to the Fire TV platform.

If you are developing a new web app instead of migrating an existing app, see Getting Started with Web Apps.

Before you begin, review the Design and User Experience Guidelines for details about designing your app for the 10-foot User Interface experience.

Web App Migration Checklist

If your web app… You need to…

Plays video Make sure your UI is the proper state when your app regains focus. Note that the video playback is automatically paused when your app loses focus.

You can use the Page Visibility API to detect focus changes and respond appropriately. See "Focus Changes" in Getting Started with Web Apps. In addition, be sure to select the Prevent Sleep for Video Playback check box when submitting your app. This disables the Fire TV screensaver while your app plays videos.

Plays audio Pause the audio playback when your app loses focus. The audio is not automatically paused, and the user cannot pause the audio with the remote once the app is in the background.

You can use the Page Visibility API to detect focus changes and respond appropriately. See "Focus Changes" in Getting Started with Web Apps for more details.

Shows audio or video duration during playback Listen for the durationchange events to show the appropriate duration. Note that the duration property reports an incorrect duration during initialization, so you need to update the duration once playback begins. See "Why does my web app show an unchanging duration of 1:40 seconds during audio and video playback?" in the Web Apps FAQ in the FAQ.

Uses custom playback controls Capture the key presses to use input from the Amazon Fire TV Remote and Amazon Fire TV game controller. See Supporting Controllers in Web Apps.

Has an exit button Properly close your web app. See "How do I properly close a web app?" in the Web Apps FAQ.

Is a single-page application Use the W3C history to move through the content and respond to the back button correctly. See "How can I customize the Amazon Remote Back button behavior for a web app?" in the Web Apps FAQ.

Uses the viewport API to control scaling Make sure your app targets 1080p. See "Resolution and Page Scaling" in Getting Started with Web Apps in Getting Started.

Explicitly targets 720p resolution Change your app to target 1080p. If the device is set to 720p, your app is automatically scaled down. See "Resolution and Page Scaling" in Getting Started with Web Apps.

Relies on touch or click events for navigating between app components Review your UI and make sure it will work with remote and game controller input instead of touch and click input. All selectable UI elements should be reachable using the up, down, left, and right navigation buttons available on remotes and game controllers. See Design and User Experience Guidelines and Supporting Controllers in Web Apps.

Is a game Review the information about supporting game controllers and handling focus changes. See "Using Input from the Amazon Fire Game Controller" in Supporting Controllers in Web Apps and "Focus Changes" in Getting Started.

If your web app…	You need to…
Plays video	Make sure your UI is the proper state when your app regains focus. Note that the video playback is automatically paused when your app loses focus. You can use the Page Visibility API to detect focus changes and respond appropriately. See "Focus Changes" in Getting Started with Web Apps. In addition, be sure to select the Prevent Sleep for Video Playback check box when submitting your app. This disables the Fire TV screensaver while your app plays videos.
Plays audio	Pause the audio playback when your app loses focus. The audio is not automatically paused, and the user cannot pause the audio with the remote once the app is in the background. You can use the Page Visibility API to detect focus changes and respond appropriately. See "Focus Changes" in Getting Started with Web Apps for more details.
Shows audio or video duration during playback	Listen for the `durationchange` events to show the appropriate duration. Note that the duration property reports an incorrect duration during initialization, so you need to update the duration once playback begins. See "Why does my web app show an unchanging duration of 1:40 seconds during audio and video playback?" in the Web Apps FAQ in the FAQ.
Uses custom playback controls	Capture the key presses to use input from the Amazon Fire TV Remote and Amazon Fire TV game controller. See Supporting Controllers in Web Apps.
Has an exit button	Properly close your web app. See "How do I properly close a web app?" in the Web Apps FAQ.
Is a single-page application	Use the W3C history to move through the content and respond to the back button correctly. See "How can I customize the Amazon Remote Back button behavior for a web app?" in the Web Apps FAQ.
Uses the viewport API to control scaling	Make sure your app targets 1080p. See "Resolution and Page Scaling" in Getting Started with Web Apps in Getting Started.
Explicitly targets 720p resolution	Change your app to target 1080p. If the device is set to 720p, your app is automatically scaled down. See "Resolution and Page Scaling" in Getting Started with Web Apps.
Relies on touch or click events for navigating between app components	Review your UI and make sure it will work with remote and game controller input instead of touch and click input. All selectable UI elements should be reachable using the up, down, left, and right navigation buttons available on remotes and game controllers. See Design and User Experience Guidelines and Supporting Controllers in Web Apps.
Is a game	Review the information about supporting game controllers and handling focus changes. See "Using Input from the Amazon Fire Game Controller" in Supporting Controllers in Web Apps and "Focus Changes" in Getting Started.

Last updated: Oct 29, 2020