Use of ionic as desktop web application

Question

Ionic is a great framework to develop mobile apps using html5. We want same application to be used over desktop browser also. Will it be good idea to make a single responsive UI that works best on both desktop browser and mobile browser and make app. OR we should make different development for browser and mobile app.

Answer 1

The framework is for mobile hybrid app only although it would work as a normal HTML app.

Answer 2

This question was asked at ng-europe earlier this week. The answer from the ionic guys was to share your services and controllers, but use different views for desktop. Ionic is purely focused on mobile.

Answer 3

To expand a little bit on what has already been said, Ionic is is built and tested for mobile only. Internet Explorer for example is not tested and does not properly handle a number of the features in Ionic. Desktop browsers do have different features from their mobile browser counterparts. You would seriously limit the browsers that can use your application on a desktop.

Most likely, you should provide two different applications for desktop and mobile. Unless you have the guts or ability to tell your users that they must use Chrome (or Opera) to run your website, you'll want two separate applications. You could still use Ionic for a mobile website though, but without being able to use Cordova's full platform integration (you would be limited to the native HTML APIs provided by the browser). You could certainly retain much of your business logic in a common core that is shared between both applications. That would require creating a shared angular module(s). I have done this in a project with an Ionic app and a normal Angular desktop app (with Bootstrap).

There are a number of ways to detect if a visitor is coming from a desktop or mobile device. I don't know of a method that is 100% perfect, because they usually rely on the browser's user agent string (and can be spoofed, changed, etc). See http://detectmobilebrowsers.com/ for some common scripts or examples how to implement mobile detection on a server or in a programming language.

Answer 4

My comment became too large. This is to elaborate and add to Jeremy Wilken's excellent answer.

It is not only limiting the browsers on a desktop, but showing the mobile-screen on part of the screen real estate looks downright ridiculous (time to rethink what mobile first means :)). The need for proper API cannot be stressed more because the flow (navigation) will most probably vary across more screens in a mobile format than in the PC format though functionality may be the same.

I agree with Jeremy's observation that Business logic should be kept separate and exposed as fine grained REST APIS e.g use a Express.js framework based server with MySQL/MongoDB/Redis or any other commercial data store. So, the REST API can be used across Mobile/Phablet/Mini Tablet UI (with Ionic) and Desktop/Laptop UIs (with Bootstrap + AngularJS.). Of course I am a fan of JS, OP can use any language of choice for the server.

Answer 5

Interestingly, it seems to be possible to produce a desktop version of an Ionic app using a toolkit named 'Electron' which is sort of a desktop equivalent of Cordova/Phonegap, as explained in this article:

http://alexbergin.com/2015/streamlining-desktop-and-mobile-app-development

Electron (formerly named Atom Shell) packages an embedded Chromium webview to produce a 'real' app. This also means that cross-browser issues are not a concern.

The author of the above article used this successfully with an Ionic app.

If you would go down this road then you would probably need to use some responsive techiques to optimize the UX on desktop.

I haven't tried this so I don't know the pros and cons of this approach but I can imagine there are cases when you just want to quickly throw together a desktop version of an app that you already have.

Answer 6

I would recommend using ionic for mobile and especially if you are using ionic2 use same code for the desktop in angular2 with just minor alterations