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.