Developer Console
Sign In
Sign In
Developer Console

Best Practices for Developing Web Apps (Fire Tablets)

Whether you are porting an existing web app or creating a new web app for Fire tablets or Android devices, it's important to consider how different device capabilities affect the behavior or appearance of your app. Use the following best practices and guidelines to optimize your web app.

Protect Your Web App

Communication on the Internet is susceptible to eavesdropping and malicious tampering. Amazon Appstore recommends you take action to protect the web apps you submit. The best thing you can do to secure your web apps is to use TLS 1.2. Avoid earlier versions, like TLS 1.0 or TLS 1.1, since they are not as secure.

Learn more about protecting your web app.

Plan for Changes in Device Orientation

Your customers may use your app with the device oriented in either portrait or landscape mode. Use these tips for managing your app's behavior in different orientations.

Use Responsive Design Techniques

The spectrum of screen sizes and resolutions is widening every day. For this reason, creating a different version of a web app that targets each individual device is not a practical way forward. Instead, use responsive web design techniques to provide an optimal viewing experience, with a minimum of resizing, panning, and scrolling across a wide range of devices.

Lock Orientation in Portrait or Landscape Mode

Native apps such as games are often designed to run in only one optimal orientation. When a customer rotates the device, the app stays locked in its original orientation. See Forcing the Device to be Oriented in a Certain Direction.

Instruct Customers to Rotate the Device 

If your app runs best in one orientation, tell customers with words or pictures to rotate their device to that orientation.

Turn Off Touch Feedback

By default, most Android devices provide visual feedback to customers when they tap web links. This feedback usually appears as a translucent block of color overlaying the target of the link. If you want to disable this behavior, include the following code in your CSS markup.

          body {
          -webkit-tap-highlight-color: rbga(255, 255, 255, 0);
          -webkit-user-select: none;
          }

Make Sure Your Web App Fills the Screen

Design your app to fill the entire screen taking into consideration that devices have different screen sizes and aspect ratios. In certain cases it may not be possible for your app to fill the entire screen e.g. the app may need to be letterboxed or the native aspect ratio may not match that of the target device. In these scenarios the app must fill 80% of the screen. The Web App Resources include sample code that dynamically resizes an app for any device while maintaining the proper aspect ratio. This code is located in the folder <install location>/Web/samples/webapp-cookbook/FillScreen/

If you use the tag to provide custom settings for your viewport, you may notice a difference in your web app rendering on Fire tablets and mobile Android devices.

If you have content wider than the screen, the viewport may zoom out to fit the content. To prevent this, add the following to the head section:

<meta name="viewport" content="user-scalable=no">

User Agent Strings

See User Agent Strings for Fire Tablets.

Best Practices for Game Apps

  • Use requestAnimationFrame to cap the frame rate. Do not render at more than required rate.
  • Use data structures to keep track of game state.
  • Use efficient collision detection algorithms and data structures such as k-d tree, quad tree, r-tree, bounding rectangles etc. or use an efficient pre-existing library. An example of an efficient collision detection technique can be seen here.
  • Do not constantly calculate game states dynamically.
  • Do not try to draw things that are not visible.
  • Do not use CSS box-shadows as they are expensive to paint and can significantly degrade performance.

Best Practices for Using Canvas Element

  • Use sprites with pre-generated content in the form of textures.
  • Use integer coordinates to avoid sub-pixel math.
  • Use an off-screen canvas for drawing calls like line, stroke, path etc. and copy the resulting buffer to the main render canvas.
  • Use web workers to draw on the off-screen canvas in a separate worker thread.
  • When using canvas draw calls, batch them together for better performance.
  • Keep unchanging backgrounds and animated objects in different rendering layers. This reduces the rendering overhead due to static content.
  • Use clearRect to clear the canvas instead of alternatives such as resetting the width or height attribute.
  • Minimize state changes to the canvas.
  • Track and reduce the portions of the animating canvas that require re-rendered if the engine does not detect and optimize a non-preserve mode.
  • Avoid blurring. This can be expensive.
  • Avoid pixel readbacks and manipulations because they will disable any parallelization/pipelining that the rendering engine might otherwise be able to do.

Best Practices to Optimize Compositing Layers for Web Apps

Amazon Web View improves rendering by sending select layers to the GPU to be composited. If a CSS transform is carried out on a div that is part of the root layer, a layer is created on the fly and sent to the GPU to be composited. This gets expensive for larger, more complex divs. To improve performance, divs that will be transformed/repainted frequently should be made into their own compositing layers in advance.

A RenderLayer gets its own compositing layer if one of the following is true:

  • Layer has 3D or perspective transform CSS properties.
  • Layer is used by <video> element using accelerated video decoding.
  • Layer is used by a <canvas> element with a 3D context or accelerated 2D context.
  • Layer is used for a composited plugin.
  • Layer uses a CSS animation for its opacity or uses an animated webkit transform.
  • Layer uses accelerated CSS filters.
  • Layer with a composited descendant has information that needs to be in the composited layer tree, such as a clip or reflection.
  • Layer has a sibling with a lower z-index that has a compositing layer.

Best Practices for JavaScript

  • Use Typed Arrays where possible instead of JS Arrays.
  • Use "for" loops instead of "for-in" loops. "for" loops are more efficient.
  • Use local variables as much as possible. However if a variable is a complex object and needs allocation support, you may want to create it as singleton (provided its data-type does not change and the object does not become polymorphic).
  • Do not create "large" methods. Modularize and break methods into smaller algorithmic chunks. The Virtual Machine can inline and recreate larger methods where it deems profitable. The reverse is not true.
  • Do not use variables where the data-type could change, such as between int to float to double.

Preserve Navigation within your App

Your customers will have the best experience using your app if the navigation flow stays within the app and does not launch the customer into a browser on the device. Test the core app functionality and ensure that the customer does not get launched into a browser.

Last updated: Nov 05, 2024