Today we are releasing Webbing, a template for creating Firefox OS apps from existing web applications. Firefox OS is built upon standard web technologies, which makes it easy for developers to rapidly create apps for the platform. Many companies, like Yahoo, already have existing web applications that would work well on the platform with little modification. We created Webbing as a way to make the transition from a mobile web app to Firefox OS as painless as possible.

Ideally, when creating an app for Firefox OS, you would build it from the ground up specifically for the platform. However, this isn’t always possible with limited resources. A more expedient way to port a web app would be to create a Firefox OS app that simply redirects to your web site. This would have a lot of benefits, such as a short development time and complete code reuse with your mobile site. However, you would likely face several issues:

Mobile sites assume they are being viewed in a mobile browser. Navigation through the site often relies on the back-navigation provider through the browser chrome. Firefox OS gives the option to show on-screen browser navigation in your app, but this should be a last resort. It gives the impression that the use is simply browsing a web page instead of using an app.

There is no way to keep the user on your site. If a link directs to another company’s page, the user will now be using their site inside of your app frame. This is confusing to the user and may lead them to the incorrect conclusion that this external site is part of your app.

If the user has no network access, the app will display the same generic error message that the user would see in the web browser.

Creating a Firefox OS-specific version of your site that had extra navigation controls would fix the first problem, but not the others. Plus, these changes would take time and could complicate site maintenance. When creating the Yahoo Firefox OS apps, we wanted to avoid those issues by restricting changes to the client whenever possible. Through investigating client-side solutions, we developed Webbing.

Webbing serves as a wrapper for your mobile site. It embeds your site in an iframe, allowing it to add extra features from the outside. Most importantly, this allows Webbing to display custom back navigation over the app.

Normally there is no back navigation on the login screen. Webbing added the back button on the bottom.

While the back navigation could be shown all the time, that likely isn’t what you want. That’s why Webbing offers the ability to specify URL patterns of pages where you want to show or hide the navigation. For the Yahoo! app, that included the login screen (where no back navigation is present) and external sites.

If you’re familiar with iframes, you know that normally there is no way to get the URL of the actively-displayed page. To achieve this, we took advantage of Firefox OS’s Browser API. The Browser API effectively adds additional features to an iframe: namely, you can retrieve the currently displayed URL and listen to a long list of events, such as URL changes and page load completion.

In order to make your mobile site feel more like a native app, Webbing also adds a configurable loading screen and spinner. This will help keep the user’s attention better than a white screen while your page loads. Also, Webbing will show a custom notification if there happens to be no network connection, as opposed to the stock notification that the user would see if they were in the web browser.

Finally, Webbing sets up L20n, Mozilla’s localization framework. By default, Webbing includes translations in both English and Spanish.

Webbing still has areas for improvement. Overall, we’d like to make customization easier, whether that be having more options for navigation overlays or new built-in styles of loading screens. Still, we feel that Webbing will greatly ease your transition from taking a mobile website and launching it on Firefox OS.

If you’d like to use Webbing, visit the Github page. If you’d like to get started with general Firefox OS development, check out Mozilla’s Quick Start documentation.