Using Ionic 2 App as Hybrid (Desktop & Mobile) App

Hi,

I have been trying to find out if Ionic (Ionic 2 specifically) can be used for developing an hybrid application that can be used and will give complete experience for each user on the respective platforms (like mobile (iOS, Android, Windows) and desktop (Windows, Mac)). I am completely new to Ionic world and from the looks of it I want to use it. But would like to know couple of things before I jump in.

Our main need is that we need to have a website developed as a product for the services we provide. And we have finalized on Angular 2, TypeScript with Bootstrap for desktop. Then came the need for having mobile version developed. I think Ionic 2 is the best choice to get it across all mobile platforms.

Now since we are not too much far into the development with Angular 2 and Bootstrap and more importantly to avoid maintaining two different codesbases for two different platforms (mobile and desktop), I was wondering if Ionic 2 can be used to create one web application that can be used/deployed/rendered on both the platforms. That is, desktop users will be able to have full website experience with elaborated functionalities and mobile users will get the usual mobile website/app experience.

I have looked for this information everywhere but havenā€™t been able to get a concrete answer or discussion that says that it is possible. The discussion I came across are from 2014/2015 which are kind of old if you take todayā€™s day and age in terms of technology. Therefore, before I reinvent the wheel I wanted to check with the experts here about the same.

I also read about Electron framework by Github which can help in building cross-platform web applications. Does anybody know if Electron will help me in achieving the above?

I will highly appreciate if somebody could please give me some valuable pointers on this.

Thanking you all in advance.

Best Regards,
Gauzy

Hi Gauzy,
Iā€™m also looking forward to see Ionic as an frontend framework for desktop apps. But unfortunately mobile first approach, doesnā€™t fit really well in responsive design of PWAs. I think this is fine, because Ionicā€™s strategy is to make hybrid apps to look and behave like native apps. Achieving desktop requirements will introduce significant cost to the project stability and mission critical features.

In one of the projects, we styled Ionic app for large viewports, so that sidemenus were fixed to be opened and we used custom html and css components in few parts of the app. But the overall experience is not great. Once again, switching from mobile first to responsive design is introducing many UX challenges. It would be awesome if we could use Ionicā€™s platform flag to switch between mobile and desktop dedicated styles

So what I learned, is that having a feature rich desktop and mobile app in one codebase is almost impossible using Ionic. Itā€™s just easier to create desktop-focused UI reusing some of the Angular components used in the Ionic app.

This is quite common problem and Iā€™m sure many people have approached it. Iā€™d like to see examples of Ionic app restyled to desktop but I couldnā€™t find any.

1 Like

Hi mordka,

Thanks for the reply, very much appreciated.

Thanks also for sharing your experience and approach for your projects. That will certainly help us decide our approach.

I have added a couple of lines on Electron Framework in my original post. Read about it being helpful for developing cross-platform applications. I need to research more on it but thought of adding it and see if anybody has any experience on it in achieving our goal.

Upon further reading on Electron Framework, it appears itā€™s a good (in fact, a very good one) tool to have your web application rendered and work as a ā€œdesktopā€ application regardless of OS like Windows, Mac or Unix (and its flavors). However, I am still not able to figure out if it can be used for mobile platforms/OS like iOS, Androis, Windows, etc.

P.S. - you can actually enclose your Angular 2 app inside of Electron.

Maybe, I can write my app with Ionic2 and Angular2 and try to enclose it in Electron for the app to work on all desktop and mobile platforms/OSs.

Electron wonā€™t solve your problem. Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript.
There is no ā€˜webā€™ in this description. Horses for courses :slight_smile:

Hi Mordka,

Thanks again for the reply. Yeah, apparently it would just render whatever app I have as a Desktop app.

However, were you able to embed an Inoic 2 app in Electron? I have tried everything I could think of but nothing is working out. I am looking for some help in getting it working. Please do help with some pointers in case you have done it.

I am just trying to embed a simple bare-bone Ionic 2 app in Electron. It works when I run ā€œionic serveā€ command in a way that it opens up a browser window for my Ionic 2 app. But when I run ā€œelectron .ā€ command it opens up a blank Electron desktop application window. However, it does show the HTML title I have in my index.html as the title of Electron desktop app window.

I will maybe post a separate topic question for this in the forum but also wanted to run it by you.

Any help will be highly appreciated! Thanks!

I have no experience with Electron but Iā€™m aware of a nice Meteor + Electron integration. Have you tried this? https://github.com/electron-webapps/meteor-electron

EDIT, sorry I just found itā€™s not a Meteor forum that I used to post on :wink: In this case there is a nice starter project https://github.com/eristoddle/Ionic2-electron-starter

Thanks for your prompt reply! Very much appreciated!

I did come across that post with the github repository and tried it. In fact, one of the changes I tried before coming across this post was same as he has done here. That is, moving the ā€œappā€ directory out of ā€œsrcā€ that Ionic creates with ā€œionic startā€ command.

Itā€™s not working. I get the same behavior as with my apps. That is, a blank Electron app window with the HTML title shown in title bar.

I am thinking it has to be setup at my end. I am missing something somewhere. But not able figure it out and itā€™s very frustrating. :frowning:

Thanks anyway for your kind and prompt help. I will keep digging and post here if I get it working.