Note: The Quickstart section has been updated with a new, more focused Firefox OS app essentials article, which replaces all the previous Quickstart articles. We hope you'll find this more useful, and a quicker learning experience than the older set of articles.
We have already looked at developing web apps — in Your first app we reviewed the basic code steps required to make an app installable, talked about different open web app types, and said a few words about Web APIs and permissions required to use certain device APIs. Read it first if you've not already done so. In this article we talk about the types of functionality you might want to implement in a bit more detail.
Open web technologies
Open web apps are no different to normal web sites/pages in terms of how you code functionality. They run on regular open web technologies, all of which you can find detailed documentation for on this site, for example:
There are a few differences here and there. A manifest.webapp file is required to define app information such as permissions, locales, icons, etc., and there are a variety of special APIs available to allow you to implement install functionality, charge money for your apps, and access device features such as contacts, battery status and device storage. Note that some of the APIs we've implemented are not yet W3C standards, but we are aiming to standardize them as soon as we can.
You can find a list of APIs and required permissions at App permissions, and a more general index of all API interfaces.
App center development pages
MDN contains a whole wealth of guides and reference docs to teach you about just about any front end web technology you want to use. However, in addition to all the other information we have included some special development pages in the app center. First of all we have several reference apps, including developer walkthroughs, source code and other information. You can feel free to download, install, play with and modify them, with the aim of learning by experimentation.
Next, we have a variety of development topic pages, which aim to cover practical uses of web APIs and other technologies, used together to perform tasks and solve different catgories of problems. These are at an early stage now, but keep checking back, as we will be adding to these regularly.
- Control data flow
- This section provides a basic guide to setting up the data flow through your application, including HTTP basics, and when and how to use Ajax.
- Gather and modify data
- A lot of what you'll want to do involves retrieving data — from files, the device hardware and key services, and the location around the device. This section looks at topics such as Geolocation, exchanging data from files and phone contacts, battery information, device orientation and light sensors, and grabbing pictures from the camera.
- Control the display
- This part of the docs contains tutorials covering mechanisms you can use to control the display of data to the user. Obvious topics are full screen, orientation and pointer lock, but this also includes creating phone notifications and controlling vibration.
- Implement user input and control mechanisms
- Modern user input goes beyond simple mouse and keyboard, including pointer lock, touch inputs, drag and drop, and more. This section should provide best practices articles that cover the different disciplines in detail.
- Work offline
- When using apps, it is a great advantage to be able to continue using them when a network connection isn't available, especially on portable devices like laptops and mobile phones. This section looks in detail at making apps work offline using mechanisms such as appCache, localStorage, and IndexedDB.
- Manipulate media
- A lot of modern web usage includes the consumption and manipulation of media, such as images and video. This part of our docs looks at video, audio, and images, and how to do interesting things with them inside Open Web Apps.
- Advanced network communication
- This section will move on from our basic data flow article, looking at advanced network communication technologies and technniques like CORS, system Ajax, WebRTC, Web sockets, and how these can be used to your advantage.
- Play games
- Special considerations for game app developers, above and beyond the basics of Web app development.
- Utilize User services
- Here we look at APIs designed to facilitate common user services, such as taking payments and login functionality.
- App permissions
- Access to device APIs is key to creating many useful apps. Here is what's available and how to access them.