Welcome to Episode 4 of the Firefox OS Tutorial. This episode will take you through the steps to submitting your Firefox OS App to the Firefox Marketplace.
Prerequisites
You have setup your machine with the Firefox OS Simulator. If not, you can check out Episode 1, which takes you through the entire setup.
You have the source code for the IndiaPincodes Application that we covered in Episode 2. This tutorial uses that as an example for packaging and submitting to the Firefox OS Marketplace. Even if you have any other application, that should be fine. You will be able to follow the steps as applicable to your application. In case, you want to download the IndiaPincodes Application code, grab it from Github.
What we shall cover in this Episode
What is Firefox Marketplace?
What things you need to do before you consider submitting to the Marketplace?
Additional files/material that you need before submission
Detailed Steps to submitting the application and correcting errors along the way
Firefox Marketplace
Smartphones are what they are today because of the applications that are available on them. Each of the Smartphone OS has a Marketplace where developers (individuals or organizations) can publish their applications for download by users. The Applications can be free or paid.
The Firefox Marketplace is a similar ecosystem for the Firefox Family of Applications. The Applications are not just restricted to Firefox OS Mobile Applications but they also cater for Firefox Browser Add-ons, Firefox for Android Apps, etc. The submission process is unified but we shall focus here on submitting the application for availability on Firefox OS Device.
Few things to note in brief about the Firefox OS Marketplace so that you can compare it against other similar offerings like Apple iTunes, Google Play, etc.
Signing up for the Marketplace is Free. There is no yearly cost (like Apple iTunes) or one-time registration cost (Google Play).
You can sell both free and paid applications. Selling Paid Applications would mean that you complete some additional paperwork.
There is an application approval phase that is similar to what you see in Apple iTunes. Once your application is accepted after submission, it will be put in a “Pending Review” status and members from the Marketplace Review team will go through your application to certify that it is not doing anything it is not supposed to do 
Once reviewed, it is available immediately or later on, if you decide otherwise.
You can provide filters to your application that will ensure that the application is available for installation only on devices having features that you have asked for them to have. E.g. some Device APIs.
My current experience shows that the application is approved within 2-3 days of submission, which is good in my opinion.
The Firefox Marketplace App is available both as a website and also an application on the device. This is similar to other Smartphone OS.
The Firefox Marketplace (https://marketplace.firefox.com/) as seen in your desktop browser is shown below:
The Firefox Marketplace App in your device is shown below:
You can use the OS Simulator itself to launch the Firefox Marketplace App and install some applications if you want to.
Steps Before You Publish To The Marketplace
Before you considering publishing to the Firefox Marketplace, do the following:
Sign up for a Firefox Marketplace Account. Visit https://marketplace.firefox.com/ and sign up.
Test your application thoroughly. You cannot expect that Firefox Review team is going to go through each and every bit of your functionality. They may but their main task if I understand right is to do functionality testing. And in the highly competitive mobile application ecosystem, users typically give you only one chance to get it right. So make sure that the first impression is the best impression. So test, test and then do some more test.
Now that you have signed up and think your application is ready for the world, we still have some stuff to get in place.
Some Homework To Do Before Submitting The Application
Here are the next things to take care of:
Review your manifest.webapp file in detail. Pay special importantance to name and description fields. The Firefox Marketplace will read the name and description only from the Manifest file. And nothing is more important that choosing a good name for your Firefox OS Application and describing it in simple terms. Spend some time on this since a lot of users will search for Applications based on some keywords that come to their mind.
You will need to decide which Category your application will fall under. As we shall see a little later, the marketplace presents several categories that you can place your application under. Choose a category with care. Typically it is the first filter that users use while searching for your app in the marketplace.
You need to get Application Icons and Screenshots for your Application in place because they will be used for submission. At the minimum you will need a 60×60 Application Icon. So far we had seen adding 16,32,48, etc icons to the manifest.webapp file but the Firefox OS Marketplace looks for a 60×60 icon. So do that the icon to your application and update your manifest file with it. For example, your manifest.webapp entry for icons should look something like this:
“icons”: {
“16″: “/images/icon_016.png”,
“32″: “/images/icon_032.png”,
“48″: “/images/icon_048.png”,
“60″: “/images/icon_060.png”,
“128″: “/images/icon_128.png”
}
Submitting to Firefox Marketplace
We shall now start looking into the submission process for the Firefox Marketplace. Do keep in mind that I will take the IndiaPincodes application that we developed in Episode 2. The code was written in a deliberate manner in Episode 2 to help you understand some of the errors that could get thrown at you just before the Application is accepted for review by the Firefox Marketplace. So it will act as a real example.
1. Since we are delivering a packaged application to the Firefox Marketplace, we need to ZIP up all the files that comprise the application into a single ZIP file. That is required by the Marketplace. So the first step is to take all the files and ZIP them up. A sample screenshot is shown below. It shows the entire IndianPincodes App directory and I am simply ZIPping up the entire set of files to a ZIP file. Use any ZIP utility of your choice.
2. Next thing is to visit the https://marketplace.firefox.com site and login with your account.
3. Once you are logged in, go to Settings and then My Submissions as shown below:
This will bring up the list of Apps that you have (It will be an empty list if you have not submitted any apps till now). Click on the Submit a New App link as shown below:
This will bring up a submission page where you will now need to provide various little pieces of information, some of which you would have ideally already prepared.
4. We need to select the Firefox OS App as shown below. I had mentioned that the Firefox Marketplace is a unified marketplace for applications in the Firefox Ecosystem (Apps, Add-ons, Firefox for Android, Firefox OS Apps), so you need to tell what kind of App you are submitting. Hence in our case, it is the Firefox OS. Go ahead and select that.
5. Below that you will find two tabs. One for Hosted and the other for Packaged. Since we are submitting a Packaged App, select that tab. You should see something like the screen below:
6. Click on Select a file button and this will bring up a File Dialog. Go ahead and select the ZIP file that you generated in Step 2.
7. The File will get uploaded and you should see a progress bar that indicates that it is getting uploaded:
and then finally when it is all uploaded, the Marketplace will start validating your ZIP file i.e. checking the manifest, any code violations, icons, etc.
8. If there is a problem with the ZIP file contents, then a validation error will be shown.
If you do not have any validation error, you can straightaway go to Step 12. I am simply showing a validation error process here so that you get used to the process of fixing the issues.
Without clearing all the errors, there is no way you will be able to move forward. If you have created the ZIP file from the IndiaPincodes App that you downloaded earlier, you will get a Validation Error. And this is exactly what I received on submitting the ZIP file. The Marketplace threw back an error at me as shown below:
9. The error was that of a CSP (Content Security Policy) Violation and which we will see in a while. Simply click on the See full validation report and more details will be shown to you as follows:
10. The error above indicates that as per the CSP rules, we should not be writing our code directly within the <script> tag. This is one of various other places that your code could trip in getting pass the validation test. For other scenarios, refer to https://developer.mozilla.org/en-US/docs/Security/CSP. The good part is that the validation process will list them one by one and you could fix it. For specific issue that we faced here, you can check out the Default CSP violations.
11. So what we have to end up doing refactor our code and move all the code from within the <script> tag to an external file app.js. And then in the index.html file, we can reference it via <script src=”app.js”></script>. If you want to download this updated and fixed code, you can download it from Github here. Note that you have to create the ZIP file again and upload it once more.
Check out the Gist below for the index.html and notice how we have extracted out the JavaScript code that was inside of <script> and moved it into an external file named app.js.
12. If the ZIP file validation is successful, you will get a positive validation message as shown below:
13. Click on the Continue button as shown below to proceed with filling out the rest of the information for your application.
14. The Next Screen, I will show it in parts here. Notice that it populates the Description for you from the manifest.webapp file.
15. Select a Category for your application. I will selected Reference over here. You need to also provide a Privacy Policy text. There are enough resources available on the net, should you need to frame it more carefully than I have done. You can optionally also provide a Homepage url, Support Website url. You need to give your email address. The App does not need any Flash, hence selected No over there.
16. The next piece of information is important. You need to provide 1 or more screenshots of your application. There should be atleast 320px x 480px as specified. I suggest that you put in atleast 2-3 important screenshots for your application. Users do look at the screenshots in the marketplace application and it could influence them significantly to download your application. Adding a Video is optional but highly recommended. Pictures speak louder than words
17. Finally, click on Continue. This will indicate that the app has been submitted and is now due for review.
18. Now all you need to do is wait for 2-3 days to hear back from the team if your application was reviewed and is available in the Marketplace. At any point in time, you can login to your marketplace account, go to Settings and then My Submissions. You should see the list of your applications. A sample screenshot is shown below for the India Pincodes App and you will notice that it shows that it is under Review. The nice thing is that it tells you the current queue status and expected time to complete the review.
With this, we come to the of this episode. Hope you have enjoyed it.
Next Steps
I suggest that you first think about a useful mobile app and begin your work towards writing a Firefox OS App. Once you are ready, submit it to the Firefox Marketplace. You might find the screens and information required for submission change a bit from time to time but the basic steps should remain the step. Also this is a great time to get in early in the game while the Marketplace is still in a nascent phase, so grab the opportunity. The Web is waiting …
Coming up Next
The next few episodes will begin diving into Device APIs. We will start off with the GPS and see how we can use HTML5 Location APIs to retrieve the position of the device and do some interesting things with it. Stay tuned …
Complete Firefox OS Tutorial
Episode 1 : Setting up your Development Environment
Episode 2 : Hello World
Episode 3 : Working with the OS Simulator
Episode 4 : Submitting your Application to the Firefox Marketplace
Feedback
I would love to hear your feedback on the series so far. Do put your feedback in the comments. If you are facing issues, use the comments to let me know about it, I will do my best to answer your queries. And by putting in your issues within this thread itself, it will help build collective knowledge that could help other readers.