Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Publishing an existing mobile app to Desktop

Marketplace feature removal
The functionality described on this page no longer works — Firefox Marketplace has discontinued support for Android, Desktop, Tablets, and payments (and other related functionality). For more information, read the Future of Marketplace FAQ.

With desktop now an available publishing option on the Firefox Marketplace, you can reach even more users by making some tweaks to your app to ensure it is desktop-compatible. This guide describes the workflow.

Note: This guide assumes that your app has been submitted to the Firefox Marketplace and is enabled for Firefox OS.

Mobile to Desktop Flow

Terminology

Responsive
Adapting the layout of a website to suit varying form factors (like screen size, density, aspect ratio and input methods — i.e. touch vs mouse.) This is usually achieved with CSS media queries. Responsive web design is the recommended development practice for web sites to work across a variety of devices.
Mobile m. site
Mobile-optimized sites are often served from their own subdomain, most often m.domain.com. The corresponding desktop sites typically redirect users to mobile sites depending on user agent sniffing. This pattern allows developers to optimize assets for mobile easily, but it does have disadvantages compared to responsive design. Having two separate sites is harder to maintain as the content is duplicated across multiple subdomains.
Desktop www. site
The desktop site is usually the standard version, written for desktop browsers and served from www.domain.com.

Further details

Because the flow chart doesn't provide enough space, this section has additional details on some nodes.

Redirecting to www based on user agent detection

Set up an automated redirect to the appropiate version. While most sites have "unidirectional" redirects (desktop to mobile), this approach adds the "bidirectional" redirect  (mobile to desktop). We suggest giving users the option to override the redirect policy, i.e. allowing users on mobile to try the desktop page if they wish.

HTTP redirects

HTTP redirection is done based on User agent detection (the user agent is sent with the HTTP request headers.) When the device does not identify itself as mobile, the m. site should redirect to the desktop version.

JavaScript redirects

While this technique adds latency, it is recommended because it can detect the device's form factor accurately using media queries, rather than inferring it from the user agent. The implementation can use a variety of approaches, the simplest being to just use matchMedia().

Enable your existing app for Desktop

Select your app on the Marketplace My Submissions page. In the "App Compatibility" section, enable "Firefox for Desktop" and Save Changes.

Submit a hosted app for your www site and make it only available on Desktop

Follow the steps to create a manifest and serve it on your www. domain. Submit this manifest as a new app to the Marketplace and enable Compatibility only for Firefox on Desktop. Users will now see the previous mobile-only version on their phones and the desktop-only version on their desktop Firefox browser.

To identify the different app versions, you can change the App URL for the desktop listing — for example, add "-desktop" like this: https://marketplace.firefox.com/app/myapp-desktop.

Further reading

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, teoli, douglas-j-bothwell, digitarald
 Last updated by: chrisdavidmills,