Developer Console
Amazon Developer Blogs

Amazon Developer Blogs

Showing posts tagged with HTML5dev

December 19, 2013

David Isbitski

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.

What has changed?

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.

Enabling Device Targeting

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.

 

-Dave (@TheDaveDev)

 

December 09, 2013

David Isbitski

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). 

Almost any mobile friendly website you are hosting today can be run as a Web App.  This means all of the HTML5, JavaScript, and CSS code you have built today can be made available as an App in the Amazon Appstore

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.

Setting up your Debug Environment

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).

Conclusion

By utilizing the free Chrome Developer Tools and the free Web App Tester tool we are now able to debug our Web App on an actual device in real time.  This includes everything you would expect from the Chrome Developer Tools, like real time resource monitoring, the ability to view our html source and a JavaScript console.

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.

 

-Dave (@TheDaveDev)

 

September 11, 2013

Peter Heinrich

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.