Starting today all Web App submissions to the Amazon Appstore now support Amazon Device Targeting. While it is possible to detect and optimize your mobile websites server side, you may decide you only want to target your Web Apps to specific devices. Web App submissions to the Amazon Appstore now allow the same device targeting capabilities that Android submissions do. This means you can elect to make your Web Apps available for download on Kindle Fire, Kindle Fire HD, Kindle Fire HDX, general Android (all non-Amazon) devices or any combination of these.
By enabling device targeting within your individual Web Apps you can tailor your app experience to the specific screen size, density, and capabilities of Kindle devices. For example, you may decide to target only devices capable of the Amazon Webview (Kindle Fire 2nd generation and up) giving your Web Apps native-like speeds on Kindle devices.
In the previous version of the developer portal you did not have the option of choosing the device on which devices your Web Apps would be available. By default your Web Apps would run on all Kindle Fire devices as well as Android capable devices.
As of today, a new Device Support section has been added that will allow you to target any or all of Web App capable devices you choose.
To enable Device Targeting in your Web Apps simply navigate to the Apps and Services, My Apps section in the developer portal, click on the title of your Web App, and then select the App File(s) tab.
You can then select the individual devices you want to target. By default we will enable all Web App capable devices so be sure to uncheck any devices you specifically do not want to support. Once you click the Save button you will find a new list of all the devices you have selected to support.
That’s it! By following these few steps you now have more control over which devices your Web Apps will run on, giving you the option to tailor your app experience to the capabilities of each device.
The Amazon Mobile App Distribution program enables you to distribute your existing web apps on Kindle Fire and select Android devices in nearly 200 countries across the globe (including the US, Canada, UK, Germany, Spain, Italy, France, Brazil and Japan).
In the recent Webinar on Submitting HTML5 Web Apps to the Amazon Appstore, we covered how to get your existing web apps onto actual devices and debug and test them.
You can debug your HTML5 Web App in two different ways.
• You can use your favorite IDE or debugging tools for normal Web App development like you are already doing.
• Or, you can optionally use the Chrome DevTools to debug your web app using a Kindle Fire or an Android device running the Web App Tester Tool.
Note: The Chrome DevTools, the Chrome Browser installation tool, the Android SDK and certain other development tools are provided by third parties, not by Amazon.
The Chrome Developer Tools are freely available from Google and included in all the latest versions of the Chrome Browser. Simply select the Chrome menu at the top-right of your browser window, then select Tools > Developer tools to begin debugging. You can get additional information on installing the tools off the Chromium blog. The Chrome DevTools use the Android Debug Bridge (adb), part of the Android SDK tools, to communicate with the web app from your computer.
Next, we will need to install the Web App Tester Tool from the Amazon Appstore. This tool will allow us to create a bridge to our computer over USB or WiFi.
Simply swipe from the top of the device (if on a Kindle Fire device make sure you tap the full screen handle on the bottom of the screen to open the status bar) and then swipe down from the top of the screen to display the Quick Settings Notification Area. Once there you will have the option to connect over either USB or WiFI.
In this example I have selected WiFi and am given a url I can put into my browser to connect the Chrome Dev Tools to that running app.
Here is a screenshot of a Kindle Fire running my Web App with the Chrome Debug Tools showing the source for my app. This enables me to now select actual <div> tags now in the html code via Chrome on my computer and see those <div> tags being highlighted on my actual device (as in the example below).
For a complete walkthrough of the steps described here you can watch the short screencast below as well as checking out the web app debug documentation on our developer portal here.
The Mobile and Gaming track at this year’s AWS re:Invent conference is coming together! As our speaker list continues to grow, we’re adding more great content every day. Topics like mobile game architecture, scaling, cutting-edge in-app purchasing, and cross-platform development are just a few of the areas we’ll explore, mixing case studies with technical deep dives and coding demonstrations.
We’ve also got some great practical sessions in store, like Coding Tips You Should Know Before Distributing your HTML5 Web App on Mobile Devices. The HTML5 state of the art is finally beginning to deliver on its cross-platform promise, with significant advances in performance, development tools, and support for native device APIs becoming available daily. This session will look under the hood and explain how to get the most out of the technology, especially when it comes to rendering and optimization.
We’ll also discuss new ways to profile and debug your web app directly on a mobile device, a process which has been non-trivial until now. If this has been a pain point in your web app development, Amazon’s Web App Tester tool may be just what you need. It extends web app tool support, even to apps running outside of the browser.
This is just one session of many at AWS re:Invent 2013 dedicated to mobile and game developers. Take a look at the sessions we have so far, and don’t forget about our pre-conference technical bootcamp. Register now and join me in Las Vegas this November.