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.
If you are a native mobile platform developer, why should you look into developing open web apps? This article talks you through open web app advantages, and the basic steps required to create one.
Advantages
For mobile application developers, the open web apps project offers these advantages:
- Simplicity: Develop on a single technology stack (HTML5/CSS/JavaScript) and deliver across all platforms, from smartphones to tablets to desktops.
- Standards: The technology stack is defined by standards bodies (W3C and Ecma) that operate in the open, rather than by particular technology or platform vendors.
- Freedom: You're not locked in to a vendor-controlled ecosystem. You can distribute your app through the Firefox Marketplace, your own website, or any other store based on Mozilla's open app store technology.
- Reach: You have the potential to reach Firefox's 450 million desktop users, as well as users of other desktop browsers and mobile users.
Steps to developing a Web app
- 1. Develop your app using open Web technologies.
- You probably already know at least a bit about HTML, CSS, and JavaScript. The Learn section of this website has resources to help you ramp up even more. As a mobile app developer, you already have a Mobile First approach to Web design.
- 2. Add an app manifest.
- All that inherently separates a Web app from a normal website is a single, JSON-format text file.
- 3. Publish the app, either on your own site or in an app store (or both).
- Publishing it yourself requires adding some code to your site to manage installing and updating the app in users' browsers.
Optional features
Philosophically, the idea of an installable Open Web app is much more than simply adding a manifest to your site. Web standards technologies can be viewed as a full-blown application platform that happens to use a browser engine for rendering user interfaces and interpreting code, and happens to use Web protocols for communicating with a server. Mozilla offers "Web runtime" executables for various platforms so that apps can run in their own window, without a browser window frame.
To "appify" a website, there are many application-specific questions to consider:
- Should my app work when not connected to the Web?
- How does my app use data, and how does it need to be stored?
- Can my app's performance benefit from advanced platform features like Web Workers or WebSockets?
- And many more
If you want to take full advantage of the capabilities of installable apps, there is plenty that you can do. For example:
- Use responsive Web design to look good and work well on all devices.
- Charge money for apps.
- Provide a way to identify users.
- Enable offline caching so the app can be used when the device is not on the Internet.
- Store data locally using either IndexedDB or localStorage.
- Launch the app natively (with an icon on the desktop or the home screen).
- Use device APIs to interact with hardware, such as geolocation and orientation.
- Give users a way to give you feedback. Mozilla's user research shows that users want to give feedback to app developers, and want to know that there is a human receiving it. They want to make suggestions and get help with problems. They may stop using an app if they have a problem and there is no way to get help with it.
Useful technologies
See Useful technologies.