The Amazon Mobile App Distribution Program enables developers to create Kindle Fire apps using existing HTML5 mobile web apps. It’s also a good way for web developers to start creating mobile apps using the skills and knowledge they already have.

Back in December we covered how to get your existing web apps onto actual devices with a Webinar on Submitting HTML5 Web Apps to the Amazon Appstore, and companion blog post focusing on setting up the Amazon Web App Tester to debug and test your apps.

We wanted to follow up with some more details to help you get the most out of the tester, which is a key part of the HTML5 web app creation process on Kindle Fire tablets. The Web App Tester has a variety of powerful features which can be used to make development faster and easier. Below are a few ways to best take advantage of all that great functionality. 

Amazon's Web App Tester

What exactly is Amazon's Web App Tester? It's a downloadable app which lets you test your web app in a production-like environment on your Kindle Fire or Android device, without first submitting it to our store. The tester contains the same web engine and libraries that will run your web app when it is wrapped into a downloadable app. The tester however, has an interface that lets you enter in your own custom URLs, and most importantly, enables remote debugging for development and testing using your desktop computer.

Because the Web App Tester is based on the same technologies as the final wrapped app, you should be able to better assess your app's performance and functionality - and more quickly work through any problems you might encounter - on the device itself, rather than via an emulator or simulator, which may not be as accurate.

Additionally, libraries that are pre-loaded into the final downloadable app, such as the In App Purchasing API for JavaScript, are also built into the Tester so you can debug your IAPs before you launch. (Look for a more detailed post about enabling IAP for your web apps coming soon).   

Managing Multiple URLs

The first thing you'll encounter when using the Web App Tester is a place to enter a URL for testing. This is great for easy ad-hoc testing, but if you have complicated URLs to enter, or have multiple URLs that you need to manage, you can create a JSON file of URLs and put it into the root folder of your Kindle Fire. The file has to be named amazon.testerurls.json and placed in the /mnt/sdcard/ folder on your device. Here's how the list of URLs should be formatted:

{ 
   "urls":[
      "http://m.imdb.com",         
      "http://m.amazon.com",         
      "https://read.amazon.com"]     
}
 

The easiest way to get it to the correct spot on your device is via the command line using the Android Debug Bridge (ADB), which comes as part of the Android SDK. Assuming you've set up the SDK correctly, you only need to connect your device using USB, open a command line, change to the directory where your JSON file is located and run this command:

$ adb push amazon.testerurls.json /mnt/sdcard/ 

Remote Debugging Options

If your device and your computer share the same network, you can enable Web Developer Tools for debugging over WiFi. If you're on a corporate network, or want to test aspects of your app including offline functionality or WLAN speeds, you can connect via USB using ADB.

Helpfully, the Web App Tester gives you all the details you need to enable Remote Debugging once you start the app. Simply click the full screen handle at the bottom or side of the screen, and swipe down. There you'll see options to enable remote debugging using ADB or via your network.

Once you choose, a dialog box pops up with instructions and the exact URL to enter into your Chromium based browser (for debugging). For example, here are the instructions for remote debugging via WiFi:

Close that dialog, enter the URLof your web app to test and you'll be all set to debug via a desktop computer.

Dev Tools Tips

Once the Dev Tools page is open in your desktop browser, remote testing and debugging of your mobile web app should become as familiar as doing development for desktop browsers. Here are some things to watch for.

On Device Tools. First, note that all the normal functionality you'd find in Dev Tools is live, but running on the device itself. In fact the entire UI is a static HTML app served from the device, which then communicates back via Web Sockets. Viewing the network speed, recording the timeline activity or profiling is all happening with the device's hardware.

Reload Shortcut. When doing development for a desktop browser, you may be in the habit of clicking the reload icon in the browser to refresh the page. Rather than exiting out of your app on the device, and then re-starting, you can simply type Command-R/Control-R inside the remote Dev Tools window to refresh the contents of the page on the device itself.

Live Inspection. Just like on a desktop browser, you can use the inspect icon to help pinpoint elements on the screen within the HTML5 markup of your app - rather than clicking the screen, just activate the inspect icon, and then touch the screen to find that element within the Dev Tools. It goes in reverse as well, notice that as you use your mouse to hover over the markup in Dev Tools, the corresponding elements light up on the device.

FPS Meter. In the Dev Tools, you can use the settings icon to turn on the FPS meter, which displays in the top corner of your device. This will let you get a live view of how fast your app is refreshing, without having to add in additional libraries.

On Device Debugging and Console. You can step through JavaScript code just as you would normally. Additionally, the console is also live, with the JavaScript engine running on the device. This allows you to use console tricks such as $0 to refer to the selected element, navigate using document.location.href, or even pop up an alert() window if needed.

Remote Debugging API

Because the Web App Tester's Dev Tools use the same remote debugging protocol as desktop Chromium browsers, they can be accessed not only from Dev Tools, but from text editors, IDEs or via scripting languages such as Python. Here's an example using the chrome-remote-interface Node.js module.

First, install the library using NPM:

npm install chrome-remote-interface 

Then create a test.js file with this boilerplate example (modifying the options variable as needed):

var Chrome = require('chrome-remote-interface');

var options = {

host:  'localhost',

port:  '9222'

};

Chrome(options, function (chrome) {

    with (chrome) {

        on('Network.responseReceived', function (message) {

            console.log(message);

        });

        on('Page.loadEventFired', function (message) {

            console.log("----------------------- page loaded ");

            console.log(message);

        });

        Network.enable();

        Page.enable();

        Page.reload();

    }

}).on('error', function (err) {

    console.log(err);

    console.error('Cannot connect to Chrome');

)};

Then run the script

node test.js 

As you use your app on the device, you'll see events logged in your console as they fire. The protocol and module will also let you send commands to the remote browser, letting you automate testing on the device and recording the results. For more info, check out the Remote Debugging Protocol pages here.

Hopefully some of these tips will come in handy as you're doing development for your web app, if you have any tips of your own or questions about using Dev Tools, definitely get in touch!

-Russ (@RussB)

HTML5 Web Apps: Tips on Acquiring Customers in the Amazon Appstore

We want to start the year off by focusing on getting your Web Apps noticed in the Amazon Appstore, so you have the best chance of acquiring new customers.  There are a few easy steps you can take to so that your apps, whether web or non-web apps, are more appealing to first time downloaders.  This includes ensuring you have quality screenshots and promotional images, detailed product descriptions, an easy way for customers to review or share your app, as well as a way for customers to discover your apps outside of the Amazon Appstore.  Amazon also offers unique ways to help your Web Apps get noticed including weekly promotions for the top Web Apps in the Appstore as well as access to Appstore Developer Select.   

Appstore Developer Select

All Web Apps submitted to the Amazon Appstore will be automatically entered into for Appstore Developer Select, if they meet the program requirements.  This program helps get your Web Apps discovered and gives you more opportunities to boost your sales and revenue.  As a developer with one or more qualifying apps, you will receive the following benefits:

• Enhanced Merchandising to Improve Discovery: Your qualifying apps will receive 500,000 free mobile ad impressions across the Amazon Mobile Ad Network. We’ll provide enhanced merchandising for your apps in a dedicated section on the Amazon Appstore home page and consider your apps for advertising on Kindle Fire.
• Amazon Coins Rewards to Customers to Improve Conversion: Consumers purchasing your app or in-app items in your app will receive up to 30% of the purchase price back in Amazon Coins. We’ll boost customer acquisition by rewarding first-time purchasers of Select paid apps and in-app items with an extra 250 bonus Coins.
• 25% off AWS Services to Help You Scale: You will earn 25% credit back on qualifying purchases of Amazon Web Services (AWS) products, up to a maximum $500 credit per year.

You can check the status of your eligibility by going to the My Apps section of the Apps and Services Tab in the Developer Console.
 

You can click on View Report to see which items your App has passed on and which items you need to update in order to become eligible.

Once your app has been enrolled in Appstore Developer Select you will also have the option to view the Ad Campaign that has been set up on your behalf.
 

Optimizing App Details

The title and description of your app is like the front door of a building.  Customers will never know what’s inside until they knock and walk inside.  By writing an effective description you can change your app from the spooky abandoned house on the corner to an enticing new shopping mall just waiting to be explored.

The keywords section will be how customers find your app when searching the Amazon Appstore so make sure you chose relevant discoverability terms. 

In addition to the App details you can also select a Content Rating for your app letting customers know what to expect.

Be sure to read our previous blog post with tips on effective title and description for your apps here.

High Res Screenshots and Multimedia

Your Web App submission will need to provide screenshots of your app running as well as an optional video.  You should create and upload both a 114x114 icon and a 512x512 icon, which will be used for the app list and carousel respectively.

In order to take the screenshots of your app running you will need to use the Web App Tester program on a Kindle device (emulators are not currently supported) and use the Kindle built in screenshot button combination.  The button sequence for each Kindle device can be found here.

You will need to next copy the screenshots off of the Kindle device and uploaded to the developer portal.  

On windows simply plug in your Kindle device and open File Explorer to Internal Storage > Pictures > Screenshots.

For Mac OSX you will need to use the Android File Transfer Tool and navigate to Pictures > Screenshots.

While you are only required to submit three screenshots, having additional screenshots as well as a promotional image is recommended and will help to increase the chance for downloads.  You can also include an optional Video showcasing your Web App.

You can get additional information on taking screenshots of your Web Apps via the official developer documentation  here.

App Badges

Amazon also offers App Badges you can include on your Website and customer communications such as email blasts.

These Badges are available in a variety of languages and will further increase potential download traffic to your app by referring customers who are already interested in your products or have come across your website. 

For full details on using App Badges be sure to check out the documentation here.

Conclusion

Building an audience for your apps and connecting with new customers is an important concern for most developers.  By following the steps listed here you can ensure a higher chance of getting noticed.  The more customers who see your app the greater the chance of increased downloads, more reviews and eventual promotion inside the Amazon Appstore.

Got a great HTML5 Web App in the Amazon Appstore?  Looking to get promoted?  Why not tell us about it!  You can Contact Us directly and let us know. 

-Dave (@TheDaveDev)

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 2^nd 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)

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)

Today we have a video interview with the executive leadership of Tre Sensa (http://www.tresensa.com/) a NYC based game development and distribution company that optimizes games for the mobile web. In this video, they talk about their business and the importance of HTML5 in their goal to deliver apps to as many screens as possible. They also discuss their experience developing HTML5 apps for Amazon mobile devices as well as a talk about how they came to use Amazon Web Services to support their mobile gaming applications. 

We hope you enjoy this video interview with TreSensa. 

Ever wonder what’s involved in turning your web app into an app you can launch from a mobile device? On the Amazon Appstore, it’s pretty easy, and involves just a few steps you can learn about here. One of those steps is adding a JSON file called the web-app-manifest to your web app.

This manifest file contains information required to run your app on a mobile device, and the basic manifest file is created for you on the developer portal. Where you put that manifest file can make a difference though. You should know about that and how to edit your manifest file in order to give your app access to features like geolocation on the device.

Where can you put the Manifest, and what difference that makes.

While we recommend that you put the manifest file at the root of your web app, you can put the manifest file anywhere on your server. The location of your manifest file determines what pages will render in the context of your app, and which pages will render in the default browser. The pages in the sub-domains under your manifest will be accessible by your app and will render in the context of your app. Any pages outside of those domains or directories will open in the default browser instead of in the context of your app.

Take a look at what pages will and won’t be accessible from your mobile app depending on where you put the manifest. Note the special case of www. and m. addresses in yellow below.

SSL Note:

• If the manifest is delivered with https://, then the entire app must be delivered over SSL as well.
• If the manifest is delivered with http://, the app may be still be served over SSL.
• If you use any permissions (IAP, Geo Location, Login), you must use SSL.

Now that you have a good idea where to put your manifest, what to put in it?

Contents of the web-app-manifest.json file

The manifest created automatically for you will look like this:

{
 "verification_key" : "c8efxxxx-xxxx-xxxx-xxxx-xxxxe5b239e9",
 "version" : "0.00(0)",
 "type" : "web",
 "last_update" : "2013-11-19 23:40:17+0000"
}

• “verification key” connects your website to your app.
  *This is the only required field in the manifest.

• “version” helps you track the version that you have submitted
• “type” lets us know that in this case, the app is a web-app
• “last_update” is when this manifest file was created (you can change it to match your updates)

In addition to the elements above, you may also wish to add one of these elements:

• “permissions” specifies the permissions your app will request (these will require SSL use).  They consist of:
• “Created_by” = you.
• “launch_path” identifies the file you want your app to open

1. iap = In App Purchasing
2. geolocation = Get location information
3. auth = if you request user credentials for login (facebook connect, google, your own.)

A finished web-app-manifest.JSON that uses all available fields might look like this:

Updating your web-app-manifest.JSON file

If after your app launches, you decide you want to update you web-app-manifest.JSON file, the app on device will not automatically update with new JSON file data. You will need to publish an updated version of your app. You can create an updated version of your native app in the dev portal by using the ‘Add an upcoming version’ link at the top of the developer portal page for your app (see below).

Once your new version submission is underway, you can submit and verify a new manifest, and then submit the new app version for publication.

A Tip to Remember!

Please be sure to configure your server to accommodate .JSON MIME types! For example:

.json -> application/json
.webapp -> application/x-web-app-manifest+json

More Information

You can find detailed documentation on the web-app-manifest.JSON file and on HTML5 app submission on our Dev Portal here.

Should you have any additional questions about the web app manifest file and how it is used, please send us a quick note so we can get you the answer you need.

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.

Starting today, you can submit your web apps and mobile optimized web sites and have them merchandised alongside native apps on Amazon and Kindle Fire in nearly 200 countries worldwide, without any third-party software or doing any native app development. Amazon Web App Resources (http://developer.amazon.com/webapps) provides the tools that you need to optimize your web apps for Kindle Fire and Android devices to sell them in our store, including powerful tools to help you test and debug your web apps and monetize using Amazon’s In-App Purchasing API for JavaScript. Plus, we’ve made sure your web apps achieve native-like performance on Kindle Fire with our new fast web runtime, based on the Chromium engine.

Tools

To make sure your web app works great on Kindle Fire and Android devices, you can use the Web App Tester, which you can get from our store here. The Web App Tester allows you to test your web app in a production-like environment before submitting it to Amazon, and offers a suite of tools to help with on-device debugging of your web apps, ensuring that they’ll work great on Android and Kindle Fire.

We’ve also created and made available the Amazon In-App Purchasing API for JavaScript, allowing you to easily build sales of digital goods like gems, level unlocks, and subscriptions into your web apps.

Kindle Fire web runtime

Kindle Fire’s web runtime is based on the open source Chromium project, and is GPU-accelerated and optimized for fluidity to make sure your web apps run smooth on Kindle Fire, just like a native app. The new runtime supports the latest HTML5/web features and includes standards-based extensions that give you access to offline storage and location sensors. Read more about the updated web app runtime here.

Get started today

Web developers with HTML5 apps and mobile-optimized web sites can easily get started at the Amazon Mobile App Distribution Portal. Once you’re logged in, go to “My Apps”, hover over the green “Add New App” button and click “Add new Web App”.  More information on how to prepare and submit your web apps is available here.