At Microsoft’s Windows Event earlier this year, Microsoft and Amazon announced plans to bring the Amazon Appstore to the Microsoft Store on Windows 11. For Amazon Appstore developers, this means expanding their ability to reach hundreds of millions of new customers on Windows.
Today we’re launching the first phase of this program by opening a limited selection of Amazon Appstore apps to Windows Insider community. Microsoft is inviting Windows Insiders to gain early access and explore a preview of mobile app functionality that will be offered to customers. The Amazon Appstore apps featured in this phase of the program are part of a closed beta, and include apps like Kindle, Khan Academy Kids, and United Airlines.
We are excited about the progress we are making with the program and look forward to sharing more details for how Amazon will provide developers with the opportunity to make their Android apps available to Windows 11 customers.
If you’re not developing for the Amazon Appstore, the best way to get started is to submit your app to unlock the benefits of the Amazon Appstore.
FAQs
1) My app is already on the Amazon Appstore. When will it be included on Windows 11? The Amazon Appstore team will share more details over time in the coming months. Developers who aren’t currently part of the Amazon Appstore can submit their Android apps here.
2) Who is included in the Windows Insider Program? The Windows Insider Program is an active community of Window’s biggest fans who get to be the first to see what’s next and help shape the future of Windows.
3) How do I receive updates about Windows 11 eligibility? The Amazon Appstore team will share an update via email as more apps are eligible for Windows 11. Developers can also sign up here to receive updates about the program.
The next generation of Fire TV devices are here. Today, Amazon announced the new Fire TV Stick 4K Max and the first generation Amazon Fire TV.
The new Fire TV Stick 4K Max is the most powerful 4K streaming stick yet – delivering 15% faster apps starts, fluid cloud gaming, and next-gen Wi-Fi 6 connectivity for an optimized entertainment experience.
The Amazon Fire TV 4-Series and Omni Series are the first Amazon branded smart TV’s on the market. These devicesredefine the smart TV experience by delivering cinematic 4K Ultra HD entertainment with Dolby Digital Plus audio and hands-free Alexa voice search, control, content selection.
For developers, these devices create even more opportunities to engage with customers and grow app reach across the Amazon Appstore.
Expanded global reach These Fire TV launches create even more opportunities to reach customers around the world without additional development work. Existing Amazon Appstore apps will work seamlessly on both Fire TV devices, allowing developers to engage with the expanded audience.
Integrate your app with the new Far Field entertainment experience The new Amazon Fire TV will feature Far Field entertainment – taking the Alexa voice experience to the next level. With these enhancements, voice enabled apps will see increased customer engagement. Integrating these features will give customers hands-free control – boosting app interactions and making content discovery easier. If your Fire TV app doesn’t support Alexa voice controls, check out our Media Session API and the Alexa Video Skills Kit to learn how to add voice to your app.
Your customers will be able to use Alexa hands-free, allowing them to interact and engage with apps anytime. With the new Fire TV Stick 4K Max, customers will be able control, search, and browse for content in your app using the Alexa button on their remote.
If you’re new to the Amazon Appstore, it’s easy to get started. Create an account to start developing for leading streaming device with over 50 million monthly active users worldwide.
Interested in learning more about the new devices? Check out these resources:
Today, Amazon is bringing Fire TV outside the living room. With this launch, customers are now able to enjoy the Fire TV experience in the car and stream the latest shows from the most popular video services. This product was announced at CES in Las Vegas in January 2020 and is now available in two Stellantis vehicles – the Jeep Wagoneer and Jeep Grand Wagoneer.
For developers, this launch introduces new ways to engage with customers, grow usage, and broaden app reach outside the traditional living room Fire TV experience.
Building for the 3-foot experience
When optimizing your Fire TV app for Automotive, there are a number of key UX differences:
1) The device is optimized for a smaller screen, including improved legibility for text. 2) There are multiple displays in-vehicle, which allows for content mirroring across devices in the car. 3) Content can be accessed by customers with the remote, voice, or touch.
Given these nuances, it’s important for developers to consider how their app will look in the 3-foot experience and make changes to their app design to optimize for the new functionality. Check out our Automotive UX technical documentation to learn more about adapting your app for auto.
New Fire OS features: Touch and Offline Download
Fire TV’s expansion into automotive introduces new features to the Fire OS for creating intuitive and seamless customer experiences through touch, remote, and voice interactions. Touch for Fire TV is Amazon’s latest innovation in entertainment, bringing touch functionality to a previously remote-driven experience. Offline Download is an opportunity for continuous engagement where customers can watch content even without an internet connection.
Ready to get started or interested in learning more? Check out these resources:
Currently, Amazon Fire TV supports standard Android notifications through the Android Notifications API, which developers can use to send local notifications to customers that appear outside of your app’s user interface. Nowadays, it is quite common practice for apps developers to send notifications to smartphone users to grab their attention.
Similarly, on Fire TV, notifications allow developers to reach out to your customers to encourage them to revisit your app. You can use notifications to inform your customers when there is a new feature, content, or a promotional campaign available in your app.
This blog post will walk you through several types of notifications and the customer experience, how to send a server message through Amazon Devices Messaging (ADM), and how to convert that message to local notifications on Fire TV through the Android Notification API.
Note: Please be aware that ADM is required to push messages from your back-end to Amazon Fire OS devices, including Fire TV and Fire tablet.
Local notifications
There are 3 types of local notifications supported on Fire TV:
Heads-up notifications
Standard notifications
Toasts
1. Heads-up notifications
Fire TV by default sends notifications to customers when there is a new app or new update app available. You can also send heads-up notifications to the customer by using the Android notification API and specify the notification priority to high.
This is the method you need to invoke:
.setPriority(NotificationCompat.PRIORITY_HIGH)
Fire TV displays Heads up Notifications slightly differently from standard Android. See below for the user experience for Heads-up notifications on Fire TV:
2. Standard notifications
Standard notifications will be sent when the developer did not specify the notification priority. Standard notification will be stored inside the Notifications center under the Settings of Fire TV. These notifications are not shown as heads-up display and hence do not interrupt the user experience in any visible way when the customer is using a different app or is navigating the main Fire TV UI.
This is what the Notifications center looks like on Fire TV:
3. Toasts
Toasts are small pop-ups that appear within your app briefly and then disappear, with no ability for the user to interact with the message. Unlike heads-up notifications, toasts are not stored within the Notification Center. Developers can send a Toast message by using the makeText() and show() methods below. The display duration can also be adjusted in the makeText() method.:
Context context = getApplicationContext();
CharSequence text = title + message;
int duration = Toast.LENGTH_LONG;
Toast toast = Toast.makeText(context, text, duration);
toast.show();
This is how Toast messages are displayed on Fire TV:
How to choose a notification method
While toasts notification allow a pop-up dialog to appear, Heads-up notification could also draw the customer’s attention via richer graphics and direct customers to launch your app immediately.
Note:Keep in mind that your app should not send a Heads-Up notification when another app is in the foreground, as this would provide a broken customer experience. Build your notification mechanism in order to verify if another app is in the foreground and do not display Heads-Up notifications in that case.
For less critical notifications such as app release information, standard notifications could be are a better choice instead of Heads-up notifications since they will not distract customers while they are consuming content. Always be mindful of the customer experience when planning your notification mechanism.
Server-side messaging using ADM
Server-side messaging solution provide a scalable communication tools to mobile developers. Developers can send messages to millions of cross platform devices and connect with customers over channels like email, SMS, push, or voice.
One example of server-side messaging solution which supports Amazon Device Messaging (ADM) -required for sending messages to Fire OS devices such as Fire TV – is AWS Pinpoint. With AWS Pinpoint, developer can also measure customer engagement and generate analytical data from its applications. A marketing team can then use this insight to strengthen campaigns and determine how to most effectively communicate with its customers.
In this blog post, we will instead focus on the ADM implementation by using the ADM SDK available on Amazon Developer portal. Before you read through the setup procedures below, you can find more information on the ADM Architecture and Roles/Responsibilities for each ADM component by referring to the ADM Overview page.
1. Server setup
Download the ADM SDK and under the example folder, you could see the server scripts inside the server-python folder. To run the server, perform the following actions:
Change the value of PORT at the beginning of server.py to the port you would like the server to listen on. Make sure this port is opened and accessible before proceeding.
Change the values of PROD_CLIENT_ID and PROD_CLIENT_SECRET to the ones you received from Amazon. These are also located at the beginning of server.py.
Run from the command line: > python server.py
For #2, PROD_CLIENT_ID and PROD_CLIENT_SECRET, these credentials are assigned to you by Amazon. Your servers use both pieces of these credentials in their requests to obtain access tokens.
After #3 above, you can access the server through a browser. In the image below you can see the Server UI for sending message to the clients.
The diagram below shows you the high level message flow from your server to your app. In this example, “your server” will be replaced with a self-contained sample web application written as a Python script which is provided as part of the ADM SDK. The web application simulates a range of tasks your server could implement to send messages to client applications.
2. Client setup
Under the same example folder, you should see the ADMMessenger folder where the client project is located.
To run the client:
In ADMMessenger/assets/api_key.txt, replace the line of text you see with the API Key you received from Amazon.
In ADMMessenger/res/values/strings.xml, change the values of server_address and server_port to values that reference your server.
When you completed the setting above, you can build, install and run the client app from Android studio.
Here is the sample code, based on the ADM SDK, for how we could build local notification, with the data from JSON file through ADM, and display them on the Fire TV as a head-ups notification.
public static void createADMNotification(final Context context, final String titleKey, final String msgKey, final String urlKey, final String timeKey,
final String intentAction, final String title, final String msg, final String url, final String time)
{
/* Clicking the notification should bring up the MainActivity. */
/* Intent FLAGS prevent opening multiple instances of MainActivity. */
final Intent notificationIntent = new Intent(context, MainActivity.class);
notificationIntent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
notificationIntent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);
notificationIntent.putExtra(titleKey, title);
notificationIntent.putExtra(msgKey, msg);
notificationIntent.putExtra(urlKey, url);
notificationIntent.putExtra(timeKey, time);
/* Android reuses intents that have the same action. Adding a time stamp to the action ensures that */
/* the notification intent received in onResume() isn't one that was recycled and that may hold old extras. */
notificationIntent.setAction(intentAction + time);
final PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, notificationIntent,Notification.DEFAULT_LIGHTS | Notification.FLAG_AUTO_CANCEL);
Bitmap largeIcon = BitmapFactory.decodeResource(context.getResources(), R.drawable.amazon1280);
Notification.Builder builder;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
builder = new Notification.Builder(context, CHANNEL_ID)
.setContentTitle(title)
.setContentText(msg)
.setContentText(url)
.setColor(Color.BLUE)
.setSmallIcon(R.drawable.ic_launcher_foreground)
.setLargeIcon(largeIcon)
.setContentIntent(pendingIntent)
.setAutoCancel(true);
} else {
builder = new Notification.Builder(context)
.setContentTitle(title)
.setContentText(msg)
.setContentText(url)
.setColor(Color.BLUE)
.setPriority(NotificationCompat.PRIORITY_HIGH)
.setSmallIcon(R.drawable.ic_launcher_foreground)
.setLargeIcon(largeIcon)
.setContentIntent(pendingIntent)
.setAutoCancel(true);
}
Notification notification = builder.build();
NotificationManager notificationManager = (NotificationManager) context.getSystemService(context.NOTIFICATION_SERVICE);
notificationManager.notify(context.getResources().getInteger(R.integer.sample_app_notification_id), notification);
}
Here is what the customer experience looks like when the alert was sent from the app:
Conclusion
Together with marketing communications services such as AWS Pinpoint, Amazon Device Messaging, and the local notification features, Fire TV provides a powerful way to increase engagement. Learn more with our documentation for Amazon Device Messaging (ADM).
Kevin Tsang is an Amazon Solutions Architect experienced with Fire TV and Fire tablet app development, Live TV, Catalogue Integration, and Alexa Video Skills implementation.
Earlier this year, Android App Bundle format was announced by Google as mandatory open-source format for new Google Play app submissions starting August 2021. Amazon Appstore is actively working to support the new format, which will provide benefits such as smaller app size downloads for customers and on-demand downloads for features and assets. These changes benefit customers by helping them download specific aspects of an app in real-time as needed.
For Amazon Appstore developers, in addition to the existing APK format, we are working to support the app bundles format across all types of submissions. We will share updates later this year on our progress to continue making app submission as simple and friction-less as possible for our developers.
FAQs
1. Will Android App Bundles be mandated for Amazon Appstore? App bundles will be completely optional, and developers will be able to continue submitting apps using existing APK format.
2. Will there be any changes to the way developers submit apps ? There are no changes to the app submission process. For both app formats (APK or bundle), developers will continue to submit apps in the same way as before.
3. Will I need to resubmit my app if it was published using APK? No, you will not need to resubmit your app if it was submitted and published in APK format earlier. You can continue publishing new apps and updates to existing apps using APK format. In order to utilize app bundles, developers would need to plan future submissions using the bundles format (*.aab), however, there will be no changes in the way developers currently submit apps to Appstore.
5. Will my apps get all available App Bundle benefits when Amazon Appstore starts supporting it? We will support upload of apps in App Bundle format. We have a roadmap to enable customer experience benefits incrementally over time. We will share our roadmap and more details closer to rollout.
6. Will I need to submit my app signing key to Amazon to submit App Bundles? No, Amazon Appstore does not require you to share your app signing key to submit App Bundles. You will continue to sign App Bundles similar to the way that you sign APKs and submit today.
Fire TV offers a variety of ways for developers to present content to customers. An HTML5 based web application could be a good candidate to provide a customer experience that is consistent with the rest of your service and have faster time to market, making it easier to deploy your apps in several marketplaces & devices. It also allows for an easier roll out of updates without having to build & release the whole app.
In this tutorial, you will learn how to create a wrapper app for Fire TV devices using Amazon WebView (AWV) technology that works using both D-Pad and touch interactions. The Fire TV documentation on UX Best Practices covers this basic aspects of app navigation and input.
The tutorial will cover 4 key steps:
Step 1: Declare Touchscreen hardware features
Step 2: Adding support for Amazon WebView (AWV) and enabling JavaScript
Step 3: Handling page navigation and device configuration changes
Step 4: Handling interactions between WebView and web application
Step 1: Declare Touchscreen hardware features
To enable basic touch interaction events such as tapping and dragging, add android.hardware.touchscreen declaration to your AndroidManifest.xml file. This feature indicates that the app is compatible with a device if that device has an actual touchscreen or emulates a touchscreen (“fake touch” interface). We need to add this as we will be targeting Fire TV devices with a touchscreen.
Since your web application is hosted online, your wrapper app must have access to the Internet. To get internet access, request the INTERNET permission in your manifest file. For example:
Step 2: Adding support for Amazon WebView (AWV) and enabling JavaScript
The [WebView](https://developer.android.com/reference/android/webkit/WebView) class is an extension of Android’s View class that allows you to render web pages as a part of your Activity layout. It does not include any features of a fully developed web browser, such as navigation controls or an address bar. All that WebView does, by default, is show a web page.
To add a WebView to your app in the layout, add the following code to your activity’s layout XML file:
Now, within your Fire TV app, create an Activity that contains a WebView, then use that to display your online web application in onCreate()). To load a web page in the WebView, use loadUrl()). In the following example, mBaseUri, holds the address to your online hosted web application.
MainActivity.java
public class MainActivity extends Activity {
// Address to your online hosted web application
private final String mBaseUri = "https://mysampleapp.com";
private Context mContext = null;
private WebView mWebView;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext = this.getApplicationContext();
// An activity is a single, focused thing that the customer can do.
// Activity class takes care of creating a window for you in which
// you can place your layout resource defining your UI.
// In this example layout resource is defined in activity_main.xml.
setContentView(R.layout.activity_main);
// Retrieve the WebView widget in UI that you need to interact with.
// In this example WebView widget is identified by "web_view" in activity_main.xml.
mWebView = findViewById(R.id.web_view);
mWebView.loadUrl(mBaseUrl);
}
...
}
Amazon WebView (AWV) optimizations
All Fire TV devices running on Fire OS 5 and later include Amazon WebView (AWV) as a transparent replacement for the standard Android WebView class. AWV uses a custom build of Chromium that has been optimized specifically for Fire OS, devices providing faster and more efficient rendering, better video performance, and improved resource management.
To enable support for AWV, specify com.amazon.webview shared library that the application must be linked against. This tells the system to include the library’s code in the class loader for the package.
To take a full advantage of various optimizations available with AWV, you can also enable additional functionalities by passing command line options in onCreate()) method of your app’s Activity that contains a WebView. For example:
Note: Enabling AWV support using com.amazon.webview and optimization via flags added in Activity class is completely optional. Developers are advised to measure performance of their applications against individual flags.
Enabling JavaScript
As your web application is most likely to use JavaScript for enabling various customer interactions and communicate with your backend services, you must enable JavaScript for your WebView.
JavaScript is disabled in a WebView by default. You must enable it through the WebSettings attached to your WebView. To achieve this retrieve WebSettings with getSettings()), then enable JavaScript with setJavaScriptEnabled()).
WebSettings provides access to a variety of other settings that you might find useful. For example, if you’re developing a web application that’s designed specifically for the WebView in your Fire TV app, then you can define a custom user agent string with setUserAgentString()), then query the custom user agent in your web page to verify that the client requesting your web page is actually your Fire TV app.
Step 3: Handling page navigation and device configuration changes
Note: If your web application is built as a SPA (Single-page application) that only loads a single web document, and then updates the body content of that single document via JavaScript APIs, you can skip this step.
Navigation for non-SPA web applications
In case your web application requires customers to click a link for navigating to a different section of the app, for example a navigation menu, when the customer clicks a link in your WebView, the default behaviour is for Fire TV to launch an app that handles URLs. Usually, the default web browser opens and loads the destination URL. However, you can override this behavior for your WebView, so links open within your WebView. You can then allow the customer to navigate backward and forward through their web page history that’s maintained by your WebView.
Note: For security reasons, the Fire OS browser app does not share its application data with your web application.
To open all links clicked by the customer, provide a WebViewClient for your WebView, using setWebViewClient()). Creating a custom WebViewClient that overrides the shouldOverrideUrlLoading()) gives the host application a chance to take control when a URL is about to be loaded in the current WebView.
In the following example we are creating a CustomWebViewClient as an inner class of Activity and an instance of this new WebViewClient for the WebView.
MainActivity.java
public class MainActivity extends Activity {
private final String mBaseUrl = "https://mysampleapp.com";
private WebView mWebView;
private CustomWebViewClient webViewClient;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
...
mWebView = findViewById(R.id.web_view);
webViewClient = new CustomWebViewClient();
mWebView.setWebViewClient(webViewClient);
...
mWebView.loadUrl(mBaseUrl);
}
...
}
class CustomWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
view.loadUrl(request.getUrl().toString());
return super.shouldOverrideUrlLoading(view, request);
}
}
Device configuration changes in response to accessibility features customization
There are various accessibility features available on Fire TV. One of them is the Text Banner, an on-screen text banner that will help customers with visual impairments view the text on their screen. When the customer changes accessibility features during the runtime, activity state changes occur causing device configuration changes. This could interfere with WebView object’s activity to be destroyed and a new activity to be created, which also creates a new WebView object that loads the destroyed object’s URL.
In order to handle configuration changes during runtime so that your application doesn’t need to update resources during a specific configuration change and avoid the activity restart, declare that your activity handles the fontScale configuration change itself which prevents the system from restarting your activity.
Now, when the configurations change, MainActivity does not restart. Instead, the MainActivity receives a call to onConfigurationChanged(). This method is passed a Configuration object that specifies the new device configuration. By reading fields in the Configuration, you can determine the new configuration and make appropriate changes by updating the resources used in your interface. At the time this method is called, your activity’s Resources object is updated to return resources based on the new configuration, so you can easily reset elements of your UI without the system restarting your activity.
MainActivity.java
public class MainActivity extends Activity {
...
@Override
public void onConfigurationChanged(final Configuration c) {
super.onConfigurationChanged(c);
mWebView.getSettings().setTextZoom((int) (c.fontScale * 100));
}
}
That’s all you need for a basic WebView that displays a web page. Additionally, you can customise your WebView by modifying the following:
Enabling fullscreen support with WebChromeClient. This class is also called when a WebView needs permission to alter the web application’s UI, such as creating or closing windows and sending JavaScript dialogs to the customer.
Handling events that impact content rendering, such as errors on form submissions or navigation with WebViewClient. You can also use this subclass to intercept URL loading.
Step 4: Handling interactions between WebView and web application
Dispatching D-PAD events from webview
All Amazon Fire TV remote controls generate KeyEvent events for button presses, as any Android input device does. You can handle controller button input with standard Android event listener interfaces and callbacks. Neither the Amazon Fire TV Remote nor the Voice Remote raises motion events (from the Android MotionEvent class).
Note: The remote controllers for Fire TV Edition has some additional buttons — such as volume up/down, power, and specific app buttons that allow to directly open those apps. However, these buttons can’t be mapped to events in third-party apps.
You can greatly enhance the customer experience in your application by managing the D-Pad interactions. The Android framework provides APIs for detecting and processing D-Pad (or any other controller) inputs. In your Activity class, override the dispatchKeyEvent()) method, and add customizations as needed. The following example shows how to change the “BACK” key on D-Pad to go back in the WebView consistently, and exit the app if there is no history to navigate. Overriding the dispatchKeyEvent() method simultaneously allows sending the key events to WebView which can be handled in your web application using JavaScript to perform desired actions.
MainActivity.java
public class MainActivity extends Activity {
private final String mBaseUrl = "https://mysampleapp.com";
private Context mContext = null;
private WebView mWebView;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
...
}
...
@Override
public boolean dispatchKeyEvent(KeyEvent event) {
Log.d(TAG, "dispatchKeyEvent : KeyCode = " + event.getKeyCode() + " (" + KeyEvent.keyCodeToString(event.getKeyCode()) + ")");
switch (event.getKeyCode()) {
// Handle back button from D-Pad
case KeyEvent.KEYCODE_BACK:
Log.d(TAG, "dispatchKeyEvent : mWebView.canGoBack = " + mWebView.canGoBack());
if (mWebView.canGoBack()) {
// Navigate back on WebView
mWebView.goBack();
} else {
// WebView has no more history, exit the app
finish();
}
}
return super.dispatchKeyEvent(event);
}
}
After overriding the dispatchKeyEvent() method, when you press Play/Pause button from the D-Pad you should see following lines in ADB logs. KEYCODE_MEDIA_PLAY_PAUSE is represented as KeyCode = 85. Please follow this link to learn more about the Android KeyEvent constants, and the default behavior of those buttons on Fire TV devices.
D-Pad interactions by customers are received as KeyboardEvent events in your web application’s JavaScript. To handle a KeyboardEvent, you need to follow these steps:
1. Select the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) on which the event will fire. Since we are using WebView to render the web application’s content in your Fire TV wrapper application, it is recommended that events are listened on the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object.
2. Use [element.addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to register an event handler. For each key press on D-Pad, JavaScript receives two events,
a. keydown – when a key on the D-Pad is pressed down, and auto repeats if the key is pressed down for long.
b. keyup – when a key on the D-Pad is released.
In following example, we are using an open source HTML5 video player called Video.js to setup a basic media player experience. keydown event is triggered as soon as D-Pad interaction starts, for the demonstration purpose, we are setting the background of whole document to green color. When the key press is released, keyup event is triggered. The custom key handling mechanism is defined in handleKeyEvent() method.
index.html
// https://videojs.com/getting-started/
const player = videojs("video", {...});
// Custom Key Event Handler
const moveTime = 10; // Move time by number of seconds
const handleKeyEvent = (event) => {
switch(event.code) {
case "MediaPlayPause":
case "NumpadEnter":
// Check is the playback is paused
if (player.paused()) {
videojs.log('handleKeyEvent:', 'Play', player.currentTime());
// Resume the playback
player.play();
} else {
videojs.log('handleKeyEvent:', 'Pause', player.currentTime());
// Pause the playback
player.pause();
}
break;
case "MediaRewind":
case "ArrowLeft":
// Move back the playback time by 10 seconds
player.currentTime((player.currentTime() - moveTime) < 0 ? 0 : (player.currentTime() - moveTime));
videojs.log('handleKeyEvent:', 'Rewind', player.currentTime());
break;
case "MediaFastForward":
case "ArrowRight":
// Move forward the playback time by 10 seconds
player.currentTime(player.currentTime() + moveTime);
videojs.log('handleKeyEvent:', 'Fast Forward', player.currentTime());
break;
default:
videojs.log('handleKeyEvent:', 'Unhandled event.code =', event.code);
break;
}
}
// Listen for Keyboard Events dispatched by Fire TV app's WebView
window.addEventListener("keyup", (event) => {
// Reset the background colour when key press is lifted
document.body.style.background = "";
if (event.key !== undefined) {
console.log('keyup:', 'event.key =', event.key);
// Handle the event with KeyboardEvent.key
handleKeyEvent(event);
}
});
window.addEventListener("keydown", (event) => {
// Change background colour when key press is down
document.body.style.background = "green";
});
Dispatching Touch events from webview
Although your app should not exclusively depend on touch gestures for basic behaviors, since this form of interaction may not be available on all Fire TV devices, adding a touch-based interaction to your app wrapper application can greatly increase its usefulness and appeal.
A touch gesture occurs when a customer places one of more fingers on the touch enabled device’s screen, and your application interprets that pattern of touch as a particular gesture. There are two phases to the gesture detection:
1. Gather data about the touch events – When a customer places one or more fingers on the screen, this triggers the callback onTouchEvent()) on the View that received the touch events. For each sequence of touch events (position, pressure, size, addition of another finger, etc.) that is ultimately identified as a gesture, onTouchEvent()) is fired several times.
2. Interpret the data to see if it meets the criteria for any of the gestures your app supports. The gesture starts when the customer first touches the screen, continues as the system tracks the position of the customer’s finger(s), and ends by capturing the final event of the customer’s finger(s) leaving the screen. Throughout this interaction, the MotionEvent delivered to onTouchEvent()) provides the details of every interaction. Your app can use the data provided by the MotionEvent to determine if a gesture it cares about happened.
In the following example, we are intercepting touch events in app’s Activity class, overriding the onTouchEvent()) callback. The snippet uses getActionMasked()) to extract the action the customer performed from the event parameter. This gives you the raw data you need to determine if a gesture you care about occurred:
MainActivity.java
public class MainActivity extends Activity {
...
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getActionMasked();
switch(action) {
case (MotionEvent.ACTION_DOWN):
Log.d(TAG,"Action was DOWN");
return true;
case (MotionEvent.ACTION_MOVE):
Log.d(TAG,"Action was MOVE");
return true;
case (MotionEvent.ACTION_UP):
Log.d(TAG,"Action was UP");
return true;
case (MotionEvent.ACTION_CANCEL):
Log.d(TAG,"Action was CANCEL");
return true;
case (MotionEvent.ACTION_OUTSIDE) :
Log.d(TAG,"Movement occurred outside bounds of current screen element");
return true;
default:
return super.onTouchEvent(event);
}
}
}
Handling Touch interactions in JavaScript
Touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface. The TouchEvent interface encapsulates all of the touch-points that are currently active. The Touch interface, which represents a single touchpoint, includes information such as the position of the touch point relative to the browser viewport.
Touch events consist of three interfaces (Touch, TouchEvent and TouchList) and the following event types:
touchstart – fired when a touch point is placed on the touch surface.
touchmove – fired when a touch point is moved along the touch surface.
touchend – fired when a touch point is removed from the touch surface.
touchcancel – fired when a touch point has been disrupted in an implementation-specific manner (for example, too many touch points are created).
Continuing from the previous example of HTML5 video player, we can now add some basic touch interactions on button elements defined within the player’s media control. playPauseControl element targets the play/pause button from the player, and muteControl targets audio the mute/un-mute button. You can learn more about JavaScript Touch Events from MDN Web Docs and a guide to adding touch events to your application is available on Google Web Fundamentals.
index.html
const player = videojs("video", {...});
// Listen for Touch Events dispatched by Fire TV app's WebView
// Play/Pause
let playPauseControl = document.getElementsByClassName('vjs-play-control')[0];
playPauseControl.addEventListener("click touchstart", (event) => {
videojs.log('playPauseControl', 'touched');
});
// Mute/Un-mute
let muteControl = document.getElementsByClassName('vjs-mute-control')[0];
muteControl.addEventListener("click touchstart", (event) => {
videojs.log('muteControl', 'touched');
});
Conclusion
If you are planning to deliver an existing HTML5 based web application as a part of a client application to Fire TV, this guide will help implement the necessary interactions and navigation required for a smooth customer experience. You can learn more about how to optimize Web Apps for Fire devices on the Amazon Developer Portal.
Mayur Ahir is an Amazon Solutions Architect with domain expertise in developing cross-platform HTML5 applications for devices powered by Fire OS and Alexa, such as Fire TV, Fire Tablets, and Echo Show.
Fire TV devices offer a variety of entertainment options for the over 50 million monthly active users worldwide. With so many choices available, simplify content discovery with recommendations. Your app can send recommendations to users about the movies, shows, music, and games that you want them to watch.
Recommendations appear on a “Recommended By Your Apps” (ReYA) row on the Amazon Fire TV home screen and shows all recommendations from apps the user has currently installed (and opened at least once).
If developers have optimized their apps for Fire OS 5, they may see their recommendations are missing from the ReYA row on Fire OS 7 devices; this is because Fire OS 7 is built on Android 9, which introduces changes to the recommendations engine. The Fire TV home screen, therefore, displays recommendations in two different ways depending on the version of Fire OS running on the device:
Fire OS 5 and 6: Older Fire TV devices are on Fire OS 5 (Android 5.1, API level 22). Before Android 8.0, Android shows all recommendations in a single recommendations row that always appears on the screen. Fire OS 6 is based on Android Nougat (Android 7.1.2, level 25), so the ReYA row will still show up correctly on these devices with no changes from Fire OS 5.
Fire OS 7: In Android 8.0 (API level 26) and later, apps can show recommendations in one or more channels that appear on separate rows. One channel (the default channel) always appears. Hence, in Fire OS 7, which is based on Android 9.0 Pie (API level 28), notifications that any app sends must be assigned to a channel (since recommendations are a kind of notification). If an app sends notifications or recommendations, then it must create a channel and associate the channel with the notification. A notification without a channel ID will be dropped.
To be able to show recommendations on all versions of Fire TV, apps should implement both recommendation APIs, i.e. for Fire OS 5 and 6 and for Fire OS 7.
Interested in learning more or ready to get started? Check out these resources:
Today, at the Microsoft’s Windows Event, Microsoft and Amazon announced plans to bring the Amazon Appstore to Windows 11. With the upcoming release of Microsoft’s operating system, Windows customers will have access to Android apps on their Windows 11 devices, expanding the selection of apps for customers across multiple genres.
“Today we offer a broad selection of mobile apps in our Amazon Appstore, available across Fire TV, Fire Tablets, and Android devices that our customers use and enjoy every day,” said Palanidaran Chidambaram, Director of the Amazon Appstore and Cross-Screen Technology. “With this announcement, Amazon Appstore developers will now have the opportunity to make their Android apps available to hundreds of millions of Windows customers.”
The availability of the Amazon Appstore on Windows 11 will allow developers to easily expand their app reach to Windows devices and increase their return on investment. Microsoft customers will be able to discover a new selection of Android apps in the Microsoft Store on Windows 11, and download them through the Amazon Appstore.
The initial Amazon Appstore selection will be available to Windows customers later this year. We will have more to share in the future about how you can make your app available to Windows customers.
Are you new to the Amazon Appstore? The best way to get started is to submit your app here to unlock the benefits of the Amazon Appstore.
FAQs
1. How will the Amazon Appstore work for Windows customers?
The expanded mobile app selection in the Microsoft Store is powered by the Amazon Appstore, offering more app choice and selection for Windows 11 customers. Customers can access these mobile apps within the Microsoft Store on their Windows device.
2. How will customers find my app in the Microsoft Store?
Windows customers will be able to find Amazon Appstore apps through integrated search, browse, and discovery in the Microsoft Store.
3. Will existing Amazon Appstore apps automatically be included on Windows?
The Amazon Appstore team will be in touch with developers later this year to share details on how to publish to Windows. Developers who aren’t currently part of the Amazon Appstore can submit their Android apps here.
The diagram below shows you the high level message flow from your server to your app. In this example, “your server” will be replaced with a self-contained sample web application written as a Python script which is provided as part of the ADM SDK. The web application simulates a range of tasks your server could implement to send messages to client applications.
