Home > Resources > Platforms > HTML5/Web Apps

Setting Up Your Environment

Introduction

This document explains how to set up the environment for your web app.

Including the Amazon API JavaScript Library

If your web app makes use of Amazon APIs such as in-app purchasing (IAP), include the Amazon API JavaScript library in your code in order to use those APIs.

Hosted Apps

For hosted apps, the Amazon API JavaScript file is hosted at this URL:

https://resources.amazonwebapps.com/v1/latest/Amazon-Web-App-API.min.js

Add a <script> tag to the end of your HTML <body> to include this file with your web app:

<script src="https://resources.amazonwebapps.com/v1/latest/Amazon-Web-App-API.min.js"></script>

Packaged Apps

Creating Packaged Apps

Creating a new packaged app is as simple as creating any other type of zip file. Make sure the app has an index.html file as its starting page, or indicate the path to the app’s main launch page when submitting the app. To ensure the app works offline, include all those assets as well.

You can use a GUI application like WinZip, or using zip from the command line. This command for zipping a folder will result in the basic zip file you need: $ zip -r project.zip ./project

A packaged HTML5 app project looks and works like a normal web project folder on a server.

For packaged apps, the Amazon API JavaScript file is automatically injected at the root level of your .zip file. Use a relative URL in your <script> tag to refer to that file.

For example, if your app’s files are at the top level of the .zip archive, like this:

Package.zip/
  index.html
  js/index.js
  css/index.css
  html/other.html
  images/image1.png

The Amazon-Web-App-API.min.js is added at the same level as index.html. Use the following <script> tags to include Amazon-Web-App-API.min.js in these HTML files:

From within index.html: <script src="Amazon-Web-App-API.min.js"></script>

From within html/other.html: <script src="/Amazon-Web-App-API.min.js"></script>

If your app’s files are inside a folder in the .zip archive, like this:

Package.zip/
   MyApp/
      index.html
      js/index.js
      css/index.css
      html/other.html
      images/image1.png

The Amazon-Web-App-API.min.js is added at the same level as the MyApp folder. Use the following <script> tags to include Amazon-Web-App-API.min.js in these HTML files:

From within MyApp/index.html: <script src="/Amazon-Web-App-API.min.js"></script>

From within MyApp/html/other.html: <script src="/Amazon-Web-App-API.min.js"></script>

Using the Amazon API JavaScript Library

Any code in your web app that uses an Amazon API must be called after the amazonPlatformReady event has been raised from the Amazon HTML5 framework.

document.addEventListener('amazonPlatformReady', function () {
  //API code goes here
});

Specifying the Launch Path

The launch path of your app is the path to the file that should be loaded when your app first starts.

Hosted Apps

For hosted apps, the launch path is the URL of your web app. When you submit your hosted app to the Amazon Appstore, specify the URL of the page to be loaded when the app starts.

Packaged Apps

For packaged apps, the launch path is the the HTML file that should be loaded when your app first starts, relative to the root of the .zip archive. For example, if you want to launch index.html when your app first starts, and that file is at the root level of your zip archive, you would use /index.html. If the file is within a subdirectory called MyApp/ the launch path is /MyApp/index.html. When you submit your app to the Amazon Appstore, specify this URL as the launch URL.

Web App Permissions

If your app uses one or more features that need customer permission please select the appropriate check-box during the submission flow. If your app requires any customer permission (In-App Purchasing or User Login), you must configure the associated page to use SSL. The following table specifies the features that require permissions 

Feature Permission
In-App Purchasing Allows the web app to use Amazon's In-App Purchasing API
Geo Location Allows the web app to use location features
Storage Allows the web app to read/write from external storage

In order to protect customers, we require that you serve your web app using SSL if your app uses In-App Purchasing or requires authentication. For more information, please refer to Protecting your Web App.

Testing Your Packaged Web App

The Amazon Web App Tester has been upgraded to handle packaged web apps as well. If you’re not familiar with the Web App Tester, check out this blog post, Getting the most out of the Web App Tester, which shows you how to use it to test your web app before submission, including enabling and using the Remote Development Tools and other tips and tricks.

In addition to entering URLs for hosted web apps, developers can now load their zipped web app files on to the device, which will be pulled in by the Web App Tester for viewing/debugging. Using the Android File Transfer tool, copy the zipped web app files you want to test to a folder in the root of the device: /amazonwebapps

The app package file should then show up in Web App Tester, where you can click Extract and use the app as per normal. You can also enter a URL pointing to a packaged zip file instead and follow the same steps above.

Submitting your HTML5 Packaged Web App to the Amazon Appstore

  1. Log in to your Amazon account
  2. Go to the New Web App Submission page and provide details about the packaged web app
    1. General Information (title, category, support details, privacy URL)
    2. Availability and Pricing (release date and base list price)
    3. Description
    4. Images and Multimedia (screen shots, icons)
    5. Content rating
  3. Choose whether or not to submit a hosted web app or a packaged web app. (In this case, the latter).
  4. Upload the web app files (HTML, JavaScript, CSS, content files/resources) as a zip file.
  5. Submit!