How to export an Open Web App for Firefox Marketplace

Stats

2,671 visits, 5,096 views

Translations

This tutorial hasn't been translated.

Tools

While most app stores are proprietary and closed, Mozilla are inventing the Open Web Apps format - a HTML5 based app format that potentially any platform can use. This is the format used by Firefox Marketplace, and is also how apps are published to the upcoming Firefox OS. Firefox Marketplace apps can also be installed from desktop Firefox and Firefox for Android. It's very easy and you can increase your app's reach to many Firefox users this way.

Development and testing

As with any mobile development, be sure to add touch controls and support multiple screen sizes.

To test your app works, it is probably sufficient to test it works in Firefox, since it uses the same engine as Firefox OS. However it would be wise to also check it works in Firefox for Android, as well as on a real Firefox OS device if you can get hold of one. Preview over Wifi is handy for testing this quickly.

Exporting from Construct 2

First, ensure your project has the right Name, Description and Author properties set, since these will be used in the exported app. You'll also need to set a Fullscreen-in-browser mode, since mobile apps have to run fullscreen.

Then click Export project, and choose the Open Web App option. Continue with the next step as you would for exporting an ordinary project. There is an additional dialog where you need to enter a bit more information specific to your app:

There are two types of apps you can export: packaged apps, which contain every file your project needs in the package, or hosted apps, which are basically a website wrapped in an app. You'll need server hosting for a hosted app. Note hosted apps also work offline.

Exporting a packaged app

Packaged apps are probably the easiest way to publish your app, since you don't need your own hosting.

After exporting, there are also some icons exported, with names like icon_16.png, icon_32.png and icon_128.png. These are copied from the Icons subfolder in the Project Bar. Double-check these are what you intend them to be.

Once you've updated your icons, select all the files in the folder and add them to a .zip file. The .zip is now your packaged app.

Exporting a hosted app

When exporting a hosted app, you must specify the server path. This is relative to the domain and must be set according to where your game will be uploaded to the web. For example, if the final URL would be http://www.scirra.com/games/spaceblaster/, the server path should be set to /games/spaceblaster/.

The rest of the options allow you to lock orientation and enable sotrage permission (be sure to enable that if you use the WebStorage object or savegames).

There are also three icons you'll need to edit before uploading: icon_16.png, icon_32.png and icon_128.png. Please don't upload without changing these icons!

When you're done, the export folder is very similar to an ordinary HTML5 website. You need to upload all these files to your server, as with publishing to the web. Note this does mean you'll need hosting. If you don't already have a website host, it should not take you long to search the web and find a cheap host that won't set you back much and can give you a place to upload the files.

You'll also need to configure the server MIME types. If you don't know how to do this yourself, contact your host's support for more information. You must set the .webapp file extension to use the application/x-web-app-manifest+json MIME type. This is required: the Firefox Marketplace will not allow you to submit an app if this is not set up correctly.

While you're at it, some servers also need the following MIME types set up:

text/cache-manifest for .appcache (so offline support works)

audio/ogg for .ogg (so .ogg format audio can play)

audio/mp4 for .m4a (so .m4a format audio can play)

Submitting to Firefox Marketplace

In theory, Open Web Apps can work anywhere, for any service or device with HTML5 support. However for the time being the only store accepting them is Firefox Marketplace. To submit, visit the Firefox Marketplace developers section and sign up an account. Then you can submit your app! You'll need to provide either the full URL to the .webapp file for a hosted app (which you should have set the correct MIME type for earlier), or upload the .zip file for a packaged app. As you submit can also provide additional art assets and more detailed information about the app for the store listing, and choose the supported devices. Since Construct 2's engine is cross-platform you should be able to select all the devices, unless you want to limit it for some reason (e.g. if the interface is designed for phones only). It's best to support all platforms if at all possible, though.

Targeting Firefox OS

Note that Firefox OS is initially being released on low-end devices. If your game runs on Android or iOS, there's no guarantee it will run on Firefox OS. The early devices are expected to have about 256MB total system memory, which is the same as the original iPad. Be sure to avoid designing your game to use lots of memory, such as avoiding using lots of large images. For more information, see the section on Memory use in Best Practices. If your game uses too much memory, Mozilla may decide not to list it for Firefox OS.

Other options

See also:

How to make iPhone and iPad games

How to make Android games

How to make a Windows Phone 8 app

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!